谷歌浏览器，音频，setTimeout，替换音频 src，重新启动 mid-audio

Question

这只是 Chrome 中的一个问题，在其他浏览器中运行良好。

我点击播放欢迎消息的扬声器，如果欢迎消息没有完成，我会一直检查直到完成，然后我将源更改为另一条消息。

如果我然后再次单击扬声器以收听新消息，则该消息开始并在几秒钟后停止并再次开始，然后停止（我的估计是当该消息的持续时间过去时它会停止）

在我的 html 中：

<audio id="shop_audio" preload="auto" type="audio/mpeg" src="/audios/helper/shop/en/welcome.mp3"></audio>
<p id="shop_speaker">
    <i class="fa fa-volume-up"></i>
</p>

在我的 javascript 中：

文档准备就绪：

$("#shop_speaker").click(function(){
    document.getElementById("shop_audio").play();
});

然后：

$(window).load(function(){
    sl.utils.t_shopInstructions = setTimeout(sl.shop.audio.setAudio, 5000, 0);
});

还有：

sl.shop.audio={
    setAudio: function(which){
        clearTimeout(sl.utils.t_shopInstructions);
        var audio = document.getElementById("shop_audio");
        if(audio.paused==true){
            sl.shop.audio.newSrc(which);
        }else{
            sl.utils.t_shopAudioPlaying = setInterval(sl.shop.audio.waitForPaused, 500, which);
        }
    },
    waitForPaused: function(which){
        if(document.getElementById("shop_audio").paused==true){
            clearInterval(sl.utils.t_shopAudioPlaying);
            sl.shop.audio.newSrc(which);
        }
    },
    newSrc: function(which){
        document.getElementById("shop_audio").src = '/audios/helper/shop/en/help_instruction_'+which+'.mp3';
    }
}

还有一个在任何地方都可以使用的变体，除了 chrome： （我认为 setInterval 造成了麻烦，和/或其清除）

sl.shop.audio={
    setAudio: function(which){
        clearTimeout(sl.utils.t_shopInstructions);
        var audio = document.getElementById("shop_audio");
        if(audio.paused==true){
            sl.shop.audio.newSrc(which);
        }else{
            (function looping(){
                clearTimeout(sl.utils.t_shopAudioPlaying);
                if(audio.paused==false){
                    sl.utils.t_shopAudioPlaying=setTimeout(looping, 500);
                }else{
                    sl.shop.audio.newSrc(which);
                }
            })()
        }
    },
    newSrc: function(which){
        document.getElementById("shop_audio").src = '/audios/helper/shop/en/help_instruction_'+which+'.mp3';
    }
}

将clearTimeout()放在不同的地方会有所不同，所以我追求了，但结果并不一致。

我现在已经删除了所有的 clearTimeouts - 它们没有任何区别。问题依旧。

感谢您的建议！

Answer 1

我单击播放欢迎消息的扬声器，如果欢迎 消息没有完成，我一直检查直到它完成，然后我 将来源更改为另一条消息。

您可以将ended 事件替换为setTimeout。由于您使用的是 jQuery，因此请使用 .one() 而不是 .click()。

var audio = $("#shop_audio")[0];
var speaker = $("#shop_speaker");

function resetAudio() {
    audio.play();
    audio.onended = function() {
      this.onended = null;
      this.src = "/path/to/a/different/src";
      speaker.one("click", resetAudio);
    }
}

speaker.one("click", resetAudio);