Multiple <audio> tags are played simultaneously on same HTML page in iPhone

Question

Using HTML5 tag, I created a web page for iPhone and iPad with multiple files. All these tags are created dynamically using java script. We can play multiple audio files at the same time and the audio gets overlapped.

I have tried a couple of solutions but none of them worked for me. I need a work around using java script or jquery to allow user to only play one audio file at a time.

Below is the code snippet of what i am actually doing.

callDetailItems.push("<div class='notes' id='"+ notes.note_id +"'><div class='existingnote'><span class='existingnotetoedit' id='notedId"+ notes.note_id +"'>" + note_text + "</span><div><audio class=audioNote id='"+ notes.note_id +"' src='"+ audioNotePath +"' type=audio/mpeg preload=auto></audio><span class='timeduration'>" + timeDuration + "</span></div><span><p class=createdBy>-" +  noteCreatedBy + "," + noteCreatedDateTimeAMPM + "</p></span></div><div class='notemenu'><div class='deletcallenote'>Delete Note</div></div><div class='editaddednote edtaddnote'><textarea class='editnt' id='editnt'></textarea><p class='formbtadd'><input type='button' value='Cancel' class='canceleditnote editnotebt' style='background: none repeat scroll 0 0 #848484;border: 1px solid #CCCCCC;color: #FFFFFF;font-size: 1em;padding: 5px; vertical-align:top;' data-role='none' /><input type='button' value='Save' class='saveeditnote editnotebt' style='background: none repeat scroll 0 0 #848484;border: 1px solid #CCCCCC;color: #FFFFFF;font-size: 1em;padding: 5px;' data-role='none' /> </p></div></div>");

Please provide with some solution.

Answer 1

I did the following to solve the problem of multiple audio notes playing. Now using the following code only one audio is played at one time. Also, if you pause one audio and play another one and then play the paused audio then it will play from the point it was paused.

Below this is the HTML code

<div class='audiowithduration' id='"+ notes.note_id +"'>
  <div id='"+ notes.note_id +"' class='detailrecording'>
   <img src='../images/playrecord.png' class='detailplay' onclick='playAudio(this);'/>
   <img src='../images/pauserecord.png' class='detailpause' onclick='pauseAudio(this);' hidden/>    
    <input class='seekbar' type='range' step='any' min='0' value='0' disabled />
  </div>
  <span class='timeduration'>" + timeDuration + "</span>
  <audio class='audioNote' id='"+ notes.note_id +"' src='"+ audioNotePath +"' type=audio/mpeg preload='metadata'>
  </audio>
</div>

Below is the javascript code

/*Function to play an audio note*/
function playAudio(parentElement)
{
var audioNoteId = parentElement.parentNode.id;
//Get the audio id and tag value to play
        var song = $('#'+audioNoteId).find('.audioNote')[0];

        //Pause any audio that is already playing
        if (curPlaying)
        {
            $("audio", "#" + curPlaying)[0].pause();
        }

        if (song.paused)
        {
            song.play();
            curPlaying = $('#'+audioNoteId).find('.audioNote')[0].id;
        }
        else
        {
            song.pause();
        }
}

/*Function to pause an audio note*/
function pauseAudio(parentElement)
{
var audioNoteId = parentElement.parentNode.id;
//Get the audio id and tag value to pause
    var song = $('#'+audioNoteId).find('.audioNote')[0];
    song.pause();
}

Answer 2

So what you're asking is how to stop any other currently playing audio files when you start playing a new one. Likely the easiest way would be to hold a reference to your audio element in JavaScript as soon as you start playing it. Then, when you go to play another file, you can call stop on your reference to the currently playing file, start playing the new one, and update the reference to it.