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.