Я пытаюсь создать звук с аудио-тегом в веб-браузере, и в большинстве случаев он работает правильно.
Однако нечасто звук начинается с половины или не выводит звук. (Я не уверен, в каком состоянии это происходит).
Есть ли способ сделать звук всегда идеально?
Я использую Google Chrome ver. 74.0.3729.169 на ноутбуке с Windows 10 со встроенным динамиком.
Я пробовал следующие способы, но не смог решить эту проблему.
1) использование load () и помещение метода обратного вызова в событие canplay Хотя для вызова play ().
2) положить preload = "auto" в звуковую метку
3) поместите звуковые данные в звуковую метку с помощью base64 вместо URL.
например.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<audio id="audio-from-url" preload="auto" src="https://xxx/xxx/xxx.mp3">
</audio>
<button id="ringButton">ring</button>
<script>
button = window.document.getElementById('ringButton')
button.addEventListener("click", function(){
audioTag = document.getElementById("audio-from-url");
audioTag.load();
if (audioTag.readyState === 4) {
audioTag.play();
} else {
// call "play" after finished loading
audioTag.addEventListener('canplaythrough', function (e) {
audioTag.removeEventListener('canplaythrough', arguments.callee);
audioTag.play();
});
}
});
</script>
</body>
</html>
Я ожидаю, что пользователи могут слушать звук каждый раз без дефектов, а это значит, что они могут слышать всегда абсолютно одинаковый звук.