javascript HTML5 音频重新开始

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13002935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 17:36:10  来源:igfitidea点击:

HTML5 audio start over

javascriptjqueryhtmlaudiobrowser

提问by ?mega

Having

拥有

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

I play the click sound when needed by

我在需要时播放点击声音

audio.play()

However, sometimes user is so fast that a browser does not play the audio at all (probably when still playing a previous playrequest). Is this issue related to preload?

但是,有时用户速度太快以至于浏览器根本不播放音频(可能还在播放之前的play请求时)。这个问题与预加载有关吗?

How can I force a browser to stop playing and start over? There is no stop, just pausein HTML5 audio component, correct? What workaround can be used here?

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



Update- Additional note:

更新- 附加说明:

I have multiple checkbox-like divelements with a touchendevent. When such event is triggered, the elements visually change, a sound is played and an internal variable is set accordingly. If user tap on these elements slowly, everything works nicely. If tap fast, the sound is often completely skipped...

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

回答by Maciej Bukowski

You can try this code:

你可以试试这个代码:

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

It looks like this is the simplest solution.

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

回答by Drew

This is the code I've been using and it's working for me:

这是我一直在使用的代码,它对我有用:

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

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

            }else{

                //not playing

                audioSupport.play();    

            }

回答by Flame

I noticed that on Firefox, playing a sound again and again really fast (like a short ticking sound) will skip beats often. The best solution I got was to simply call cloneNodeand play each sound that way. Its not perfect (compared to Chrome where it sounds flawless):

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

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

回答by lipsumar

The only way i found how to play a short sound very quickly (so quick that the 2nd sound starts before the first ends) is to actually load 5 or 10 and if you have to play again but are already playing, just go to the next, which is not playing:

我发现如何非常快速地播放短声音(如此之快以至于第二个声音在第一个结束之前开始)的唯一方法是实际加载 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();    

        }

    }};

Result of this is you can actually play the same sound over itself.

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

Probably not the right way to do it though.

虽然可能不是正确的方法。