Question

使用HTML5标签，我为iPhone和iPad创建了一个包含多个文件的网页。所有这些标签都是使用java脚本动态创建的。我们可以同时播放多个音频文件，音频重叠。

我尝试了几种解决方案，但它们都没有为我工作。我需要使用java脚本或jquery来允许用户一次只播放一个音频文件。

以下是我实际在做的代码片段。

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>");

请提供一些解决方案。

Answer 1

所以你要问的是当你开始播放新的音频文件时，如何阻止其他正在播放的音频文件。可能最简单的方法是在开始播放时在JavaScript中保存对音频元素的引用。然后，当你去播放另一个文件时，可以在对当前正在播放的文件的引用上调用stop，开始播放新文件，并更新对它的引用。

Answer 2

我做了以下工作来解决播放多个音频笔记的问题。现在使用以下代码，一次只播放一个音频。此外，如果您暂停一个音频并播放另一个音频然后播放暂停的音频，那么它将从暂停的点开始播放。

下面是HTML代码

<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>

以下是javascript代码

/*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();
}

多个<audio>标签在iPhone </audio>的同一HTML页面上同时播放

2 个答案: