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

【问题标题】：Multiple <audio> tags are played simultaneously on same HTML page in iPhone多个 <audio> 标签在 iPhone 的同一个 HTML 页面上同时播放
【发布时间】：2014-04-30 07:54:54
【问题描述】：

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

我尝试了几个解决方案，但没有一个对我有用。我需要解决使用 java 脚本或 jquery 以允许用户一次只播放一个音频文件。

下面是我实际在做的代码sn-p。

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

请提供一些解决方案。

【问题讨论】：

标签： javascript jquery iphone html audio

【解决方案1】：

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

【讨论】：

不，我没有在 java 脚本或任何其他 java 脚本文件中的任何位置调用 play 方法。文件没有自动播放。我点击每个音频标签的播放按钮，然后它们开始播放。
啊，好吧，我想我误解了这个问题。那你不能做什么呢？
我想一次播放一个
我搜索了很多类似的帖子，也在谷歌上寻找解决方案，但没有成功。我在不同的设备和操作系统上尝试了相同的代码，发现了一些有趣的东西。
您能否发布一些您尝试使用但不起作用的代码？处理多个音频文件的默认行为可能在操作系统版本之间有所不同，但鉴于您能够以编程方式播放和暂停/停止每个单独的音频文件，您应该能够完成您想要做的事情。跨度>

【解决方案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();
}

【讨论】：