Mobile Safari 和 UIWebView 中的多个 HTML5 音频标签答案

【问题标题】：Multiple HTML5 audio tags in Mobile Safari and UIWebViewMobile Safari 和 UIWebView 中的多个 HTML5 音频标签
【发布时间】：2010-09-14 16:42:24
【问题描述】：

当我使用默认控件时，我在处理具有多个 <audio> 的页面时遇到了困难。我还没有深入测试过创建自定义控件。

自定义控件有一个“开始”按钮，该按钮变为“暂停”。好的，可以很好地暂停音频。但是，当您转到页面上的第二个音频控件时，它永远不会播放，而第一个是暂停。如果您一直播放第一个，则单击“播放”按钮时将播放第二个。

任何地方都有“停止”功能吗？如果是这样，那意味着我需要创建一个自定义控件，我可以这样做，但我还没有找到用于实际“停止”第一个事件的事件玩。此外，在播放第二个音频之前，必须暂停然后知道他们还需要按下停止按钮可能真的会让用户感到困惑。

希望我可以使用一个脚本来检查以前的音频是否暂停，然后停止第一个音频或重置它，然后继续播放第二个音频。

有什么想法吗？谢谢，琳达附言我不擅长 JavaScript，所以如果有人帮助编写脚本，我将不胜感激。

【问题讨论】：

我已经确认 HTML5 中没有针对音频标签的“停止”功能。任何熟悉 JavaScript 和 HTML5 的人都可以帮助编写一个脚本，当用户尝试在页面上播放第二个、第三个或第 n 个音频时，该脚本会导致正在播放的音频结束？

标签： uiwebview mobile-safari html5-audio

【解决方案1】：

最后。这行得通。

<script type="text/javascript">
setTimeout(function() {
    var myAudio = document.getElementsByTagName('audio')[0];
    var myAudio1 = document.getElementsByTagName('audio')[1];
    myAudio1.addEventListener('play', function(){
        myAudio.pause();
    }, false);

    myAudio.addEventListener('play', function(){
        myAudio1.pause();
    }, false);
},1000);

【讨论】：

【解决方案2】：

我在移动 Safari 上收到以下代码错误： INVALID_STATE_ERR：DOM 异常 11 INDEX_SIZE_ERR：DOM 异常 1



setTimeout(function() {
document.getElementById('audio_3').addEventListener('play', function(){
document.getElementById('audio_4').currentTime = 0;
document.getElementById('audio_4').pause();
}, false);

document.getElementById('audio_4').addEventListener('play', function(){
document.getElementById('audio_3').currentTime = 0;
document.getElementById('audio_3').pause();
}, false);
},1000);

【讨论】：