HTML5 Audio не может воспроизводиться через Javascript, если только вручную его не запускать вручную
Я пытаюсь получить небольшой звуковой файл, чтобы играть автоматически, используя тег и javascript, чтобы инициировать его.
<audio id="denied" preload="auto" controls="false">
<source src="sound/denied.wav" />
</audio>
И затем через javascript, в соответствующее время:
$('#denied')[0].play()
Прекрасно работает на Chrome на моем рабочем столе. В Android 4.1.1 звук не будет воспроизводиться, если только я не нажму "воспроизведение" на аудиоустройствах HTML5 до того, как javascript попытается воспроизвести его.
Таким образом, в основном браузер Android (фондовый или Dolphin) не будет воспроизводить аудио, если пользователь не инициирует его в какой-то момент перед javascript. Это предназначено? Есть ли способ обойти это?
Ответы
Ответ 1
Ну, для моих целей, вот что я сделал:
К счастью, прежде чем пользователь сможет инициировать поведение для запуска звука, ему нужно нажать кнопку. Я устанавливаю объем элемента равным 0.0, и он "играет", когда нажимает эту кнопку.
После того, как звук будет воспроизводиться беззвучно, я просто установил свойство volume обратно в 1.0, и он воспроизводится без вмешательства пользователя просто.
Ответ 2
В моем случае это было простое решение:
fooobar.com/questions/217103/...
Скопируйте и вставьте это в свой хром:
chrome://flags/#autoplay-policy
В моем веб-приложении много страниц, поэтому я не могу заставить пользователя каждый раз нажимать кнопку; но это для внутреннего использования, поэтому я могу заставить пользователей использовать Chrome и настроить эту опцию.
Ответ 3
Я знаю, что в мобильном сафари любой вызов javascript для воспроизведения() должен находиться в том же стеке вызовов, что и событие с инициативой пользователя. Подмена клика с помощью триггера javascript также не будет работать.
В моей связи 7 я могу подтвердить, что, если javascript не был вызван щелчком пользователя, он не воспроизводится.
Ответ 4
Основная проблема заключается в том, что звук (на iOS и Android) должен запускаться щелчком пользователя. Мой обходной путь был очень простым. Свяжите audio.play()
со слушателем события щелчка и затем немедленно приостановите его. С этого момента и звук работает идеально.
var myAudio = new Audio('assets/myAudio.mp3');
...
button.addEventListener("click", function() {
myAudio.play();
myAudio.pause();
...
});
Ответ 5
К счастью для меня приложение html5, над которым я работаю, нужно работать только в Android 4.1, но если вы пытаетесь сделать что-то кросс-платформенное, вам нужно немного адаптировать его. Для меня не работало ни настройка громкости 0.0, ни назад, либо автовоспроизведение на элементе управления. Я также пытался приглушить, и это тоже не сработало. Тогда я подумал, что, если я установил продолжительность и только сыграю минимальную сумму файла? Здесь еще один взломанный script, который действительно работал:
function myAjaxFunction() {
clearTimeout(rstTimer); //timer that resets the page to defaults
var snd=document.getElementById('snd');
snd.currentTime=snd.duration-.01; //set seek position of audio near end
snd.play(); //play the last bit of the audio file
snd.load(); //reload file
document.getElementById('myDisplay').innerHTML=defaultDisplay;
var AJAX=new XMLHttpRequest(); //won't work in old versions of IE
sendValue=document.getElementById('myInput').value;
AJAX.open('GET', encodeURI('action.php?val='+sendValue+'&fn=find'), true);
AJAX.send();
AJAX.onreadystatechange=function() {
if (AJAX.readyState==4 && AJAX.status==200) {
document.getElementById('myDisplay').innerHTML=AJAX.responseText;
if (document.getElementById('err')) { //php returns <div id="err"> if fail
rstTimer = setTimeout('reset()', 5000); //due to error reset page in 5 seconds
snd.play(); //play error sound
document.getElementById('myInput').value=''; //clear the input
}
}
}
}
Ответ 6
Вам не нужен JavaScript для автоматического запуска, и я вижу несколько проблем в вашем коде:
<audio id="denied" preload="auto" controls="false">
<source src="sound/denied.wav" />
</audio>
Я бы изменил его на (в HTML5 вам не нужен синтаксис атрибута = "значение" в некоторых случаях, что для XHTML):
<audio id="denied" autobuffer controls autoplay>
<source src="sound/denied.wav" />
</audio>
<a href="#" id="play-button">play!</a>
В iOS автовоспроизведение отключено, вам нужно нажать кнопку воспроизведения или поместить событие пользователя на пользовательские элементы управления, подобные этому, с помощью JavaScript:
var audio = document.getElementById('denied');
var button = document.getElementById('play-button');
button.addEventListener('click',function(){
audio.play();
});
или с помощью jQuery:
$('#play-button').click(function(){ audio.play(); });}
Изменить
Имейте в виду, что HTML5 - это довольно недавняя технология (по крайней мере, некоторые функции), поэтому совместимость браузера и функциональность меняются каждый раз.
Я призываю всех постоянно информировать о текущем статусе, поскольку иногда вещи становятся менее зависимыми от взлома или наоборот.
Хорошая отправная точка: http://caniuse.com/#feat=audio (проверьте вкладки внизу).
Также для глобального аудио решения я рекомендую использовать SoundManager2 JS library
Ответ 7
Вот блог-сообщение о причине и о том, как его преодолеть, загружая все аудиофайлы при первом взаимодействии с пользователем и воспроизводя их позже запрограммированным образом: https://blog.foolip.org/2014/02/10/media-playback-restrictions-in-blink/ Приняв этот подход, небольшой модуль javascript доступен на GitHub https://github.com/MauriceButler/simple-audio
Я пробовал этот простой подход самостоятельно - работал легко и просто!
Ответ 8
Это случилось со мной. Вот как я взломал это:
Я установил звук в autoplay
и установил vol в 0
.
Когда мне это нужно, я использую метод load()
, и он будет автоматически запускаться.
Это легкий mp3 файл, и он воспроизводится каждый час/два часа, так что это отлично работает для меня.
Ответ 9
Я встретил ту же проблему в своем приложении. Мой сценарий использования приложений был следующим:
- нажмите кнопку, чтобы отобразить таблицу с информацией (действие пользователя)
- показать таблицу и обновить данные в ней с помощью AJAX
- воспроизведение звука при изменении данных
К счастью, у меня было действие пользователя (шаг 1), поэтому я смог "инициировать" его звук, а затем воспроизвести его с помощью javascript без необходимых действий пользователя. См. Код.
HTML
<audio id="kohoutAudio">
<source src="views/images/kohout.mp3">
</audio>
<button id="btnShow">Show table</button>
Javascript
$("#btnShow").click(function () {
//some code to show the table
//initialize the sound
document.getElementById('kohoutAudio').play();
document.getElementById('kohoutAudio').pause();
});
function announceChange(){
document.getElementById('kohoutAudio').play();
};
Ответ 10
попробуйте это
<audio id="denied" preload="auto" controls="false" autoplay="autoplay">
<source src="sound/denied.wav" />
</audio>