HTML5 音频重新开始答案

【问题标题】：HTML5 audio start overHTML5 音频重新开始
【发布时间】：2012-10-11 18:16:16
【问题描述】：

有

var audio = new Audio("click.ogg")

我会在需要时播放点击声

audio.play()

但是，有时用户速度太快以至于浏览器根本不播放音频（可能还在播放之前的play 请求时）。此问题是否与预加载有关？

如何强制浏览器停止播放并重新开始？ HTML5 音频组件中没有stop，只有pause，对吗？这里可以使用什么解决方法？

更新 - 补充说明：

我有多个类似复选框的 div 元素和 touchend 事件。当此类事件被触发时，元素会在视觉上发生变化，会播放声音并相应地设置内部变量。如果用户慢慢点击这些元素，一切都会很好。如果快速点击，声音通常会被完全跳过...

【问题讨论】：

标签： javascript jquery html audio browser

【解决方案1】：

你可以试试这个代码：

audio.currentTime = 0;
audio.play();

看起来这是最简单的解决方案。

【讨论】：

很好的解决方案。比例外答案更快。泰
@MaciejBukowski Chrome 71。

【解决方案2】：

这是我一直在使用的代码，它对我有用：

            if(audioSupport.duration > 0 && !audioSupport.paused){

                //already playing
                audioSupport.pause();
                audioSupport.currentTime = 0;
                audioSupport.play();

            }else{

                //not playing

                audioSupport.play();    

            }

【讨论】：

我认为甚至没有必要检查它是否已经在播放。只需这样做... audioSupport.pause();音频支持.currentTime = 0; audioSupport.play();
而且我也认为没有必要暂停。

【解决方案3】：

我注意到在 Firefox 上，一次又一次地快速播放声音（如短促的滴答声）会经常跳过节拍。我得到的最佳解决方案是简单地调用cloneNode 并以这种方式播放每个声音。它并不完美（与听起来完美无瑕的 Chrome 相比）：

var audio = document.getElementById('myaudio');
setInterval(function() {
    audio.cloneNode().play();
}, 100);

【讨论】：

【解决方案4】：

我发现如何快速播放短声音的唯一方法（如此之快以至于第二个声音在第一个结束之前开始）是实际加载 5 或 10，如果您必须再次播放但已经在播放，那就去吧到下一个，没有播放：

    var soundEls = [];//load 10 audios instead of 1
    for(var i=0;i<10;i++){
        var soundEl = document.createElement('audio');
        soundEl.src = url;
        soundEl.preload = 'auto';
        $(this._soundEl).append(soundEl);
        soundEls.push(soundEl);
    }

    var soundElIndex = 0;

    return {play:function(){
        var soundEl = soundEls[soundElIndex];

        if(soundEl.duration > 0 && !soundEl.paused){

            //already playing, switch to next soundEl
            soundElIndex++;
            if(!soundEls[soundElIndex]) soundElIndex=0;
            soundEls[soundElIndex].play();

        }else{

            //not playing
            soundEl.play();    

        }

    }};

这样做的结果是您实际上可以在自身上播放相同的声音。

但可能不是正确的方法。

【讨论】：