[Plugin: SoundCloud Is Gold] html5 player and chrome

Hi CTCaer,

I think it’s related to the player. The plugin output the html5 player like Soundcloud does (iframe).

I’ve look at your site, at the same thing happened. The first time it showed the waveforms and then after each refresh the waveform were disappearing.

I think it might be related to some javascript interference (like animation). if you right click on a player (in the grey) and select ‘reload frame’, the waveform will appears.

So I think it could be a bug with soudcloud, or mixing animation with their player. If you can disable the animation and see what happens.

Cheers

A simple way to test actually is to paste the html5 iframe straight into your page. Click ‘share’ on one of your tracks, then ’embed code’ and paste that in.

ps: Soundcloud reported that they’re having issues with IE and working on it.

Hey reatm,
Thanks for your answer I just disabled the animation of the content page and indeed the iframes loaded with the waveform, so you are right.

I will make an “if” script in your plugin to delay the iframe loading until the animation is done or to reload the iframes after a some seconds.
I’ll see what fits the best and then I’ll write here the changes.

If anyone else have a problem with this consider making a troubleshooting option with iframe reloading in seconds for your plugin.

Anyway thanks again,
CTCaer

I think you should at something in your theme javascript. The plugin isn’t using any javascript on the Front End. If you edit the plugin you could break it and your changes will be erased when the plugin gets updated. Anyways this is a javascript issue not php.

you could use something like see in your animation callback (I’m assuming you’re using jquery):

$(‘. soundcloudIsGold iframe’).contentWindow.location.reload(true);

Hello again,
I tried many things to reload the iframe like the classic one document.getElementById(‘iFrame2’).contentDocument.location.reload(true);
and id=”iframe2″ to your iframe code.
And I saw your post and decided not change your plugin and use the theme’s js which I will not update in the near future.

I used as you said $j(‘. soundcloudIsGold iframe’).contentWindow.location.reload(true);
Notice the $j, its needed in my theme js.

Well all things I tried and the above does not reload the iframe and i get the error Uncaught TypeError: Cannot read property ‘location’ of undefined at chrome’s dev tools.
(by the way your class id is “soundcloudIsGold “, with a space at the end. I don’t know if this is the problem)

What I must do to get the location?

Thanks again for your precious time

This will reload all iframes:

$j(‘iframe’).attr(‘src’, $j(‘iframe’).attr(‘src’));

in $j(‘. soundcloudIsGold iframe’).contentWindow.location.reload(true); there’s a space between the dot and the class. That’s might be why it breaks. (the space at the end in class=”soundcloudIsGold ” doesn’t matter).

I don’t know how you coded your thing but remember that those iframes have to be loaded once into the DOM for you to be able to reload them. So remember to do it in the callback of your animation so it reloads when the animation has ended.

I am sure you will find a way to reload the iframes. Good luck.

Well I used it at callback. I used it through chrome’s console without modifying any file.
Well with your last post I have all the information I need and I’ll try to find the solution.
When its done I’ll post here so we can have the thread resolved.

Thanks for your time

I found some time and worked on it.

So the only one that worked was $j(‘iframe’).attr(‘src’, $j(‘iframe’).attr(‘src’));

But it reloaded all iframes to the source of the 1st one and I found a function that will work.
The end result is:

function reload_iframes()
{
    var f_list = document.getElementsByTagName('iframe');
    for (var i = 0, f; f = f_list[i]; i++) {
        f.src = f.src;
    }
}
function reload_delay()
{
setTimeout("reload_iframes()", 5000);
}

which I code it at the end of my theme’s main js file where the animation are and I added a 5s delay to execution so it will surely run after the main site animation ended.

And I added this at my page template so it executes the javascript:

<?php
if($post->ID="46")
{
echo '<script type="text/javascript">reload_delay()</script>';
}
?>

the if($post->ID=”46″) is there so it will only run in the page I have the soundcloud iframes.

So the problem is resolved CTCaer – Music.
Thanks again for your help,
CTCaer

Cool I’m glad I could help. With Jquery I think you could have done this:

$j('iframe').each(function(){
$j(this).attr('src', $j(this).attr('src'));
});

But if it works with your function, that’s what all counts at the end. If you’re using jQuery for the animation, your should use your function in the callback to be sure that the animation is finished. Otherwise if the animation is finished before the 5s and the user press play, the song will play for a second or 2 and stop because the iframe reloaded. But it’s probably unlikely, I’m just being picky :p

this is just an example,

$j('.myClass').animate({
    top: 0
  }, 2000, function() {
      // Animation complete.
      $j('iframe').each(function(){
           $j(this).attr('src', $j(this).attr('src'));
       });
  });

Anyways, thank you for using my plugin and giving feedback on the html5 player and also sharing your solution! It’s nice to know that there are people who take the time to do it. My next release will enable sets in the plugin as lots of people hace requested it.

Cheers

I didn’t want to break the animation and also I wanted to have the reloading done only on this certain page, that’s why I tried to find another method.

But I’m also picky and I noticed that at an already cached page there’s
2-3s delay in reloading as you said and well I didn’t liked it ??

So I used your code in my animation like that

var calScreenHeight = $j(window).height()-108;
	$j('#page_content_wrapper').css('top', calScreenHeight+'px');

	setTimeout(function() {
		$j('#menu_wrapper').fadeIn();
		$j('.social_wrapper').fadeIn();
		$j('#tray-button').fadeIn();
		$j('#jp_interface_1').fadeIn();
		$j('#controls').fadeIn();
		$j('#page_content_wrapper').fadeIn();
		$j('#page_maximize').trigger('click');
		$j('.soundcloudIsGold iframe').each(function(){
		$j(this).attr('src', $j(this).attr('src'));
		});
	}, 1000);

Here the .soundcloudIsGold iframe you proposed for reloading only the souncloud iframes worked.
It now behaves better.

I’m looking forward too for the sets update.
So again thanks

Technical PS: It seems that the original problem is indeed at the animation above with a time out 1000. I tried your code at a separate function with 0<= delay <900 and it loaded 1 to 3 waveforms. So anything that is >=1000 loads all the waveforms in my case.
And because the iframe is in the main body the fault here is from $j(‘#page_content_wrapper’).fadeIn(); but if your remove it you’ll have an instant showing content and you cant show off ??