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);