Html5 аудио «преднагрузка =» никто»не портит паузы() и CURRENTTIME()</p> <p>Если установить преднагрузку =

Question

У меня действительно странные проблемы, приостановка и сброс прогресса html5 аудио.„Ни один“, а затем «pause();» и «currentTime = 0;» не будут выполняться. В момент, когда я удаляю preload = «none», все работает.

Это мой код. Я затушевываю пару страниц, каждый страницы имеет аудио элемент HTML 5 в том же положении (предназначены), так что пользователь может воспроизводить музыку этой страницы при посещении этой страницы.

$('.link').on('click', function(e){ 
    $('.pagecontainer>div').fadeOut(); 
    $(this.getAttribute("href")).fadeIn(); 
    stopAudio(); 
}); 

function stopAudio() { //fade out and stop any current audio 
    $('audio').animate({volume: 0}, 1000); 
    setTimeout(function(){ 
     $.each($('audio'), function() { 
      this.currentTime=0; 
      this.pause(); 
          alert('audio has been stopped and reset'); 
     }); 
    },1000) 
} 

$('.sound').on('play', function() { //since volume was faded out, reset volume when click play button 
    $('audio').animate({volume: 1}, 100); 
}); 

.... 
.... 

<a href="#page1" class="link">Audio 1</a> 
<a href="#page2" class="link">Audio 2</a> 
<a href="#page3" class="link">Audio 3</a> 

<div class="pagecontainer"> 

    <div id="page1"> //all three audio elements are in exact same spot 
        //clicking page link fades in current audio and fades in new one 
     <audio controls loop class="sound" preload="none"> 
      <source src="../../site/music/music1.mp3"/> 
      <source src="../../site/music/music1.ogg"/> 
     </audio> 
    </div> 

    <div id="page2"> 
     <audio controls loop class="sound" preload="none"> 
      <source src="../../site/music/music2.mp3"/> 
      <source src="../../site/music/music2.ogg"/> 
     </audio> 
    </div> 

    <div id="page3"> 
     <audio controls loop class="sound" preload="none"> 
      <source src="../../site/music/music3.mp3"/> 
      <source src="../../site/music/music3.ogg"/> 
     </audio> 
    </div> 

</div> 

Когда я нажимаю ссылку на другую страницу, мне нужно остановить и сбросить все три аудиоэлемента. В настоящее время, так как он не останавливается, в тот момент, когда я нажимаю кнопку воспроизведения звукового элемента, который затухает, я слышу одновременно два аудиофайла. Хотя интересно, звук постепенно исчезает.

Как уже упоминалось, если я удалю preload = "none", тогда будет срабатывать предупреждение («звук был остановлен и сброшен»), и все будет хорошо.

Кто-нибудь знает, как я могу загрузить аудио только при необходимости (если я выберу preload = "none"), то мой сайт не будет работать в Chrome, около 20 музыкальных файлов будут одновременно загружаться заставляя Chrome зависеть), но заставить мой скрипт работать?

Срочно ~ спасибо!

Answer 1

Установка текущего времени на звуковой тег, который еще не загружен, вызывает исключение DOM. Следовательно, убедитесь, что звук загружен. Только тогда попробуйте установить его currentTime.

$("audio").one("loadeddata", function() 
{ 
    $(this).data("dataLoaded", true); 
}); 


$.each($('audio'), function() { 
    if($(this).data("dataLoaded")) 
    { 
     this.currentTime=0; 
     this.pause(); 
    } 
    alert('audio has been stopped and reset'); 
});