Почему не JavaScript не воспроизводит audio?

Question

[sundrey]

Добрый день!
Не могу разобраться в некоторых нюансах воспроизведения аудиозаписи.
Защита браузера, позволяет воспроизвести трек из тэга audio только по нажатию кнопки.
В браузере на компьютере, все работает в обоих вариантах, а на Google Chrome на Android нет.
Такая структура работает хорошо:

function startPlay(){
	  document.getElementById('button_play').click();
  }

<div id="sound_player" style="display:none;">
<audio id="player" src="SonnetteHaute.mp3"></audio>
<button id='button_play' onclick="document.getElementById('player').play()">Воспроизведение</button>

А если запускать подобным образом, то оказывается воспроизводить:

function startPlay(){
	  document.getElementById('button_play').click();
  }
function tiktak(seconds){
	document.getElementById('timer_sec').innerHTML=seconds;
	if(document.getElementById('timer').style.display=="none"){timer();}
	document.getElementById('timer').style.display="block";
}
function timer(){
	var second = document.getElementById('timer_sec').innerHTML;
    if(second==1){//document.getElementById('button_play').click();
		document.getElementById('timer').style.display="none";
		startPlay();
	}
    second--;
	timer_sec.innerHTML=second;
	if(second>=0){setTimeout("timer()", 1000);}
}

<div id="sound_player" style="display:none;">
<audio id="player" preload="auto">
<source src="SonnetteHaute.mp3" type="audio/mpeg" />
<source src="SonnetteHaute.ogg" type="audio/ogg" />
<source src="SonnetteHaute.wav" type="audio/wav" />
<embed hidden="true" autostart="true" loop="false" src="/SonnetteHaute.mp3" />
 
Если вы читаете это, значит ваш браузер не
поддерживает теги HTML5 аудио.
</audio>
<audio id="pre_player" preload="auto">
<source src="pre_audio.mp3" type="audio/mpeg" />
<source src="pre_audio.ogg" type="audio/ogg" />
<source src="pre_audio.wav" type="audio/wav" />
<embed hidden="true" autostart="true" loop="false" src="/pre_audio.mp3" />
 
Если вы читаете это, значит ваш браузер не
поддерживает теги HTML5 аудио.
</audio></div>

Так же пробовал запускать первый вариант через timeout, как во втором, и он нормально срабатывает.
В чем может быть причина, или есть другие варианты реализации?

UPD
Если, предварительно до выполнении функции, нажать 1 раз на кнопку, то скрипт нормально все воспроизводит...
При том, в стандартном браузере Android все нормально работает

Comments

[OVK2015]

Попробуйте поместить JS код в функцию windows.onload = function(){...}

[sundrey]

OVK2015: При onload на телефоне не срабатывает.
Но если, предварительно до выполнении функции, нажать 1 раз на кнопку, то скрипт нормально все воспроизводит...

[OVK2015]

https://developer.chrome.com/devtools/docs/remote-...
Поглядите чего ему не хватает. Компа нет под рукой

[sundrey]

Проблему решил следующим путем. В Google Chrome на андройде, для того, чтобы выполнять .play() для аудиозаписи, необходимо хоть раз нажать на эту кнопку.
Обмануть его можно следующим образом:
В одну из кнопок, которую обязательно нажмет пользователь, добавляется onclick(document.getElementById('button_play').click())
И после этого, если программно вызывать document.getElementById('button_play').click() - скрипт будет работать
Так как у меня все работает через ajax, то такой вариант подходит, а у кого страницы перезагружаются, придется придумывать другой велосипед...

Answer 1

[sundrey]

Проблему решил следующим путем. В Google Chrome на андройде, для того, чтобы выполнять .play() для аудиозаписи, необходимо хоть раз нажать на эту кнопку.
Обмануть его можно следующим образом:
В одну из кнопок, которую обязательно нажмет пользователь, добавляется onclick(document.getElementById('button_play').click())
И после этого, если программно вызывать document.getElementById('button_play').click() - скрипт будет работать
Так как у меня все работает через ajax, то такой вариант подходит, а у кого страницы перезагружаются, придется придумывать другой велосипед...

В общем, на каждую кнопку повесил onclick выполняющий следующий код

function ActivePlayButton(){
	document.getElementById('player').volume=0;
	document.getElementById('pre_player').volume=0;
	endPlay_button = document.getElementById('button_play');
	endPlay_button.click();
	prePlay_button = document.getElementById('button_pre_play');
	prePlay_button.click();
};

Так как у меня 2 разных звука, нужно было проводить операции для двух кнопок.
А при вызове функции с воспроизведением, задается параметр volume = 1