Google Chrome, аудио, 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);