Google Chrome，audio，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'; 
    } 
} 

而一个变种，也适用无处不在，除了铬： （我认为的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);