JavaScript + HTML5: аудио воспроизводится только один раз при определенных обстоятельствах.

Question

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

HTML (Django шаблон)

<audio id="audio" src="{% if key %}streams/{{key}}.wav{% else %}{% endif %}" controls> 
    <p>Your user agent does not support the HTML5 Audio element.</p> 
</audio> 

JavaScript (с JQuery)

function sendText() { 
    var textfield = $("#textfield"), 
     text = textfield.val(); 

    $.ajax({ 
     url: '/rec/', 
     type: "POST", 
     data: JSON.stringify({text: text}), 
     success: function(response) { 
      var baseUrl = window.location.href.split("?")[0]; 
      $(location).attr('href', baseUrl + "?s=" + response.key); 
     }, 
     complete: function() {}, 
     error: function(xhr, textStatus, thrownError) { 
      console.log("error"); 
     } 
    }); 
} 

Так я посылаю запрос Ajax на сервер, получить ключ обратно, а затем перезагрузите страницу (с помощью JavaScript) с ключом как параметром. Затем этот ключ будет именем wav-файла, который загружается в звуковой тег.

Как только страница перезагружается, я могу воспроизводить аудио, но только один раз. Нажатие на игру во второй раз, ничего не делает.

Однако, когда я нажимаю кнопку перезагрузки браузера и загружаю страницу еще раз, все работает нормально.

Есть ли объяснения для этого?

Answer 1

Основываясь на некоторых моих собственных пробных ошибках, я предлагаю попробовать сбросить свойство currentTime до 0 после его повторного запуска и повторить попытку.

Я нашел несколько случаев (и ваш может быть одним из них), где звук застревает, а конец и не сбрасывается сам по себе.

Фактическое «объяснение», которое я не могу предложить ... но если это похоже на те, которые я видел, это может быть жизнеспособным решением.

<audio id="foo"><source url="myaudio.mp3"></audio> 
... 
var soundFoo = document.getElementById('foo'); 
soundFoo.play(); 
soundFoo.onended = function() { 
    soundFoo.currentTime = 0; 
    soundFoo.play(); // assuming you want it to repeat right away. 
}