Toggling between instances of NiftyPlayer on a page - won't stop playing when hidden on IE

Question

Hi, i've got a page with links to MP3s, when the link is clicked I use javascript to show a small Flash player (NiftyPlayer) under the link. When a different link is clicked, the old player is hidden and the new player is revealed.

The player auto-starts when the element is shown, and auto-stops when hidden - in Firefox.

In IE it will only auto-start and NOT auto-stop. This is what I would like to solve.

This is an example HTML with link and player

<a href="Beat The Radar - Misunderstood What You Said.mp3" onclick="toggle_visibility('player662431');return false;" class="mp3caption">Misunderstood What You Said</a>

<div id="player662431" class="playerhide"><embed src="http://www.xxx.com/shop/flash/player.swf?file=/mp3/Beat The Radar - Misunderstood What You Said.mp3&as=1" quality="high" bgcolor="#000000" width="161" height="13" name="niftyPlayer662431" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;&lt;/embed&gt;

Here is the javascript (i've got jquery installed to let me hide all the open players on this page apart from the new one)

function toggle_visibility(id) {
 $('.playerhide').hide();
 var e = document.getElementById(id);
 e.style.display = 'block';
}

I think what I need to do is start the player manually with javascript (rather than using the autostart as=1 function in the URL string)

There is some javascript that comes with NiftyPlayer to allow this EG

niftyplayer('niftyPlayer1').play()

there is also a stop method.

I need some help with javascript - how do I add this call to play into my toggle_visibility function (it has the same unique ID number added to the name of the player as the ID of the div that's being shown, but I don't know how to pull this ID number out of one thing and put it in another)

I also would like to be able to do

niftyplayer('niftyPlayer1').stop()

to stop the audio of the previously running player. Is it possible to store the current ID number somewhere and call it back when needed?

Thanks for the help, i'm a PHP programmer who needs some support with Javascript - I know what I want to achieve, just don't know the commands to do it!

Thanks

Answer 1

If you assigned each niftyplayer object a classname, f.x. ".players", then you could loop through each player, like this:

function toggle_visibility(id) {

    $(".players").each(function(){

        playerId = $(this).attr('id');

        if(niftyplayer(playerId).getState() == 'playing') {

            //Stop the currently playing player
            niftyplayer(playerId).stop();

            //Hide the div that was playing
            $("#" + playerId).hide();

        }

    });

    //Start the new player
    niftyplayer(id).play();
    $("#" + id).show();        

}

So what this actually does, is it loops through all the players on the website. It checks if the status of each player is equal to "playing", if it is, then it stops it and hides the div tags. Then it starts the new player and shows that div tag.

I think this does it. Try it out.

Answer 2

Just realised that the HTML didn't include the object element for the player (and no ID)

I've amended it to

<div class="mp3info">
 <a href="http://www.xxx.com/mp3/The Boy Least Likely To - Saddle Up.mp3" onclick="toggle_visibility('niftyPlayer612391');return false;" class="mp3caption" title="Saddle Up"><img src="http://www.xxx.com/shop/Global_images/play_info_or.png" border="0"></a>
</div>
<div class="playerhide">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="161" height="13" id="niftyPlayer612391" align="">
  <param name=movie value="http://www.xxx.com/mp3/The Boy Least Likely To - Saddle Up.mp3&as=1">

  <param name=quality value=high>
  <param name=bgcolor value=#FFFFFF>
  <embed src="http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/mp3/The Boy Least Likely To - Saddle Up.mp3&as=1" quality="high" bgcolor="#000000" width="161" height="13" name="niftyPlayer612391" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;&lt;/embed&gt;
 </object>
</div>

the javascript is

function toggle_visibility(id) { $(".players").each(function(){ playerId = $(this).attr('id'); if(niftyplayer(playerId).getState() == 'playing') { //Stop the currently playing player niftyplayer(playerId).stop(); //Hide the div that was playing $("#" + playerId).hide(); } });

//Start the new player niftyplayer(id).play(); $("#" + id).show();
}

And it is still getting stuck on

     if(niftyplayer(playerId).getState() == 'playing') {

If I make a very simple page with 2 players on it EG

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="37" id="niftyPlayer1" align="">
   <param name=movie value="http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/shop/mp3/betty.mp3&amp;as=0"&gt;

   <param name=quality value=high>
   <param name=bgcolor value=#FFFFFF>
   <embed src="http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/shop/mp3/betty.mp3&amp;as=0" quality=high bgcolor=#FFFFFF width="165" height="37" name="niftyPlayer1" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;
  </embed>
  </object>

  <p>...and it is controllable with JavaScript:</p>

  <a href="javascript:niftyplayer('niftyPlayer1').play()">play</a>



<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="37" id="niftyPlayer2" align="">
   <param name=movie value="http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/shop/mp3/betty.mp3&amp;as=0"&gt;
   <param name=quality value=high>
   <param name=bgcolor value=#FFFFFF>
   <embed src="http://www.xxx.com?&gt;/shop/flash/player.swf?file=http://www.xxx.com?&gt;/shop/mp3/betty.mp3&amp;as=0" quality=high bgcolor=#FFFFFF width="165" height="37" name="niftyPlayer2" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;
  </embed>
  </object></p>


  <p><a href="javascript:niftyplayer('niftyPlayer2').play()">play</a></p>

The second player doesn't show up and I get the following in Firebug when I click the link

niftyplayer('niftyPlayer2') is undefined

Maybe the problem is that you can only have one instance of niftyplayer on the page at one time? If so, why am I struggling to turn them off!? :P

Answer 3

Hi, I have a much better solution after I noticed a very nasty bug / 'feature' when using Internet Explorer in conjunction.

I had noticed that in IE the pages were taking a very long time to load when I had a lot of hidden Nifty Players, I looked closer using Fiddler and found that each instance of NiftyPlayer was preloading the MP3 in full, rather than loading on demand as with Firefox and Chrome etc.

This meant that a page with 100 items (each item having up to 4 MP3s) took several minutes to load at times with obvious data transfer implications.

My solution which is rather simpler (but maybe clunkier) than Indyber's is to just use

function toggle_visibility(id,mp3location) {
    // hide all players
    $(".playerarea").html('');

    // show clicked player
    $('#' + id).html('<embed src=\"http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/mp3/' + decodeURIComponent(mp3location) + '.mp3&as=1\" quality=high bgcolor=#000000 WMODE=transparent width=\"161\" height=\"13\"  align=\"\" type=\"application/x-shockwave-flash\" swLiveConnect=\"true\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" class=\"playerNew\">');


}

which works fine with IE, and also solves the problem of not being able to stop the players from playing in IE