Play and pause so only one HTML5 audio element at a time plays on my website.

[jeffmic]

Gang,

I've got several HTML5 audio elements on a page. The play and pause functions work appropriately, but the tracks can all be played at the same time which is quite frustrating. The amount of audio elements varies with each search result. The audio elements run through a Function and access an additional field I created on my products_description table.

Can anyone help me find a way to have all my audio element stop (or pause and go back to time=0) EXCEPT the one that the client clicks on?
Do I need to add in javascript code directly within the function code below that will accomplished this? (or somewhere within another file...please direct me how to do that if that is the solution)

Here is the function code I use that populates the advanced search page that uses HTML5 audio with fallback to Flash:

 function mp3_sample($prid) {
   global $db;
   $firstdigit = substr($prid, 0,1); 
   if ( ($firstdigit == 3) || ($firstdigit == 4) ) { 
      return ''; 
   }
   $sample_query = "select products_description5 
                   from products_description 
                   where products_id = '" . (int)$prid. "'"; 

    $sample = $db->Execute($sample_query);

    if ($sample->RecordCount()) {
      if (trim($sample->fields['products_description5']) == '') return ''; 
      return '<object><audio controls preload="auto" height="25px" width="300" ontimeupdate="updateTime()">
  <source src="' . $sample->fields['products_description5'] . '.ogg" type="audio/ogg">
  <source src="' . $sample->fields['products_description5'] . '.mp3" type="audio/mpeg">
  <embed height="25" width="300" src="' . $sample->fields['products_description5'] . '.mp3">
  </audio>
<data="3523697345-audio-player.swf" type="application/x-shockwave-flash" width="300" height="27">
<param name="src" value="3523697345-audio-player.swf" />
<param name="FlashVars" value="audioUrl=' . $sample->fields['products_description5'] . '.mp3" />
</object>';
    } else {
      return '';
    }

} 

Here is a search result from my website that will demonstrate my problem:

http://store1.musicalcreations.com/i...thousand+years

thank you,

[DrByte]

1. Paste the following into a new file, and upload it to:
/includes/templates/YOUR_TEMPLATE/jscript/jscript_mc_player_playpause.js

var currentPlayer;
function pauseOthers(soundobj) {
  var thissound=document.getElementById(soundobj);
  if (currentPlayer && currentPlayer != thissound) {
    currentPlayer.pause(); 
  }
  if (thissound.paused) {
    thissound.play();
  } else {
    if (!thissound.play) thissound.pause();
    thissound.currentTime = 0;
    currentPlayer = thissound;
  }
}

2. Change your PHP code slightly:
This line:

      return '<object><audio controls preload="auto" height="25px" width="300" ontimeupdate="updateTime()">

becomes

      return '<object><audio controls preload="auto" height="25px" width="300" onplay="pauseOthers(\'audioclip' . $prid . '\');" id="audioclip' . $prid . '">

[jeffmic]

This looks like various code I've seen while searching the web for a solution but when I implemented it as you instructed, none of the other audio tracks that I'm playing stop when I start a new one.

:-(

[jeffmic]

I got it.

The updated code I received and copied from my email instead of this forum had 2 extra * in it... I took them out and PERFECTO!

NO GOOD CODE BELOW I COPIED FROM MY EMAIL BY MISTAKE:
return '<object><audio controls preload="auto" height="25px" width="300" *onplay="pauseOthers(\'audioclip' . $prid . '\');" id="audioclip' . $prid . '"*>

THIS IS THE GOOD CODE YOU ORIGINALLY WROTE ABOVE:
return '<object><audio controls preload="auto" height="25px" width="300" onplay="pauseOthers(\'audioclip' . $prid . '\');" id="audioclip' . $prid . '">

[DrByte]

Ya, the "bold" often gets denoted as * when translated into email notifications.

It worked for me when I set up a test of it, so I'm glad you were able to get it working on your live site.

[jeffmic]

Only problem I can find is this javascript will not work on the iPhone iPad. Multiple songs continue to play on that platform. 4 desktop browsers I've tested are good though.

[DrByte]

Hmmm, I didn't test iPad. Doh.

But it did occur to me, and to accommodate it I was gonna offer a jQuery solution, but you're using such an old version of jQuery that compatibility becomes a problem ... and upgrading your other scripts which utilize jQuery requires some careful attention because the very next version after your older one changed some core behavior, causing some compatibility issues.

I recall some articles suggesting that jPlayer was fairly reliable cross-platform and might be worth considering ... but again needs a more modern jQuery core to run against.

[jeffmic]

I'll dig around in the future and figure out what exactly is utilizing jQuery on my website. Most of it was the 'disable after search' code you recently wrote and also the ajax-style searching that I trashed months ago. Is there other code within 1.5.1 that uses it internally?

[DrByte]

Is there other code within 1.5.1 that uses it internally?

There is no jQuery built-in to v1.5.1

[DannyVarley]

Ive just taken a quick look and it seems that when the page loads so does all the music as well, isn't this just wasting bandwidth if people aren't going to listen to them?

Or am i wrong? im not sure