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,