Мобильные браузеры требуют действий пользователя, чтобы начать воспроизведение аудиоэлементов. Событие click удовлетворяет требованиям, но похоже, что touchstart не является приемлемым инициирующим событием в Chrome на Android или iOS. (Увидеть ниже)
Кто-нибудь знает, где найти точное определение контекста события, необходимого для начала игры.
(Я пытался решить проблему UX, используя идеи из Как чтобы предотвратить масштабирование двойным касанием в iOS и Android. С момента публикации моего исходного вопроса я нашел решение, которое решает проблему UX без использования touchstart, но я думаю, что основной вопрос о том, какие события считаются действиями пользователя.)
Дополнение:
Было высказано предположение, что я ошибаюсь насчет событий touchstart, поэтому для записи я предлагаю тривиальную тестовую программу. Поскольку для этого требуется настоящий музыкальный файл и мобильное устройство, JSFiddle не является подходящей платформой (если кто-то не знает, как имитировать событие touchstart в скрипке). Чтобы воспроизвести мои наблюдения, отредактируйте javascript, чтобы загрузить свой собственный аудиофайл.
<!DOCTYPE html>
<html>
<body>
<br>
<button type="button" id="but1">click</button>
<button type="button" id="but2">touch</button>
<br>
<br>
<span id="message"></span>
<script>
var e;
e = document.getElementById('but1');
e.onclick = click;
e = document.getElementById('but2');
e.ontouchstart = touchstart;
function click() {
alert('caught click');
play();
event.preventDefault();
}
function touchstart() {
alert('caught touchstart');
play();
event.preventDefault();
}
var p;
var t;
function play() {
p = new Audio();
p.src = '/k487.mp3'; // CHANGE THIS
p.preload = 'auto';
p.play();
t = setInterval(report,1000);
}
function report() {
var s = 'Player readyState='+p.readyState+', currentTime='+p.currentTime;
var e = document.getElementById('message');
e.innerHTML = s;
}
</script>
</body>
</html>
Когда я загружаю эту страницу в Chrome 58 на Android 6.0.1, кнопка Click работает должным образом, выдает всплывающее окно, воспроизводит музыку и обновляет время воспроизведения.
Если я перезагружу страницу и вместо этого коснусь сенсорной кнопки, появится всплывающее окно, но музыка не будет воспроизводиться. На дисплее состояния отображается состояние готовности 4 и значение currentTime 0. Другими словами, событию touchstart разрешено загружать звук, но не начинать воспроизведение.
Поскольку я не могу найти документации о том, какие события должны работать, я не знаю, считать ли это ошибкой Chrome или предполагаемым поведением.
