Автозапуск аудио файлов на iPad с HTML5
Я пытаюсь получить аудиофайл для автозапуска в Safari на iPad. Если я захожу на страницу с помощью Safari на моем Mac, это нормально. На iPad автозапуск не работает.
16 ответов
ОБНОВЛЕНИЕ: Это взлом, и он больше не работает на IOS 4.X и выше. Этот работал на IOS 3.2.X.
Это неправда. Apple не хочет автоматически воспроизводить видео и аудио на IPad из-за большого объема трафика, который вы можете использовать в мобильных сетях. Я бы не использовал автозапуск для онлайн-контента. Для автономных HTML-сайтов это отличная функция, вот для чего я ее использовал.
Вот решение для "поддельного клика по javascript": http://www.roblaplaca.com/examples/html5AutoPlay/
Скопируйте и вставьте код с сайта:
<script type="text/javascript">
function fakeClick(fn) {
var $a = $('<a href="#" id="fakeClick"></a>');
$a.bind("click", function(e) {
e.preventDefault();
fn();
});
$("body").append($a);
var evt,
el = $("#fakeClick").get(0);
if (document.createEvent) {
evt = document.createEvent("MouseEvents");
if (evt.initMouseEvent) {
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
}
$(el).remove();
}
$(function() {
var video = $("#someVideo").get(0);
fakeClick(function() {
video.play();
});
});
</script>
Это не мой источник. Я нашел это некоторое время назад и проверил код на IPad и IPhone с IOS 3.2.X.
Я также хотел бы подчеркнуть, что причина, по которой вы не можете сделать это, - это деловое решение, принятое Apple, а не техническое решение. Очевидно, что у Apple не было рационального технического обоснования для отключения звука в веб-приложениях на iPod Touch. Это только устройство WiFi, а не телефон, который может потребовать дорогостоящей платы за пропускную способность, поэтому этот аргумент не имеет смысла для этого устройства. Они могут сказать, что помогают с управлением сетью WiFi, но любые проблемы с пропускной способностью в моей сети WiFi - моя забота, а не Apple.
Кроме того, если бы они действительно заботились о предотвращении нежелательного, чрезмерного потребления полосы пропускания, они предоставили бы настройку, позволяющую пользователям выбирать звуки веб-приложений. Кроме того, они будут делать что-то, чтобы ограничить использование веб-сайтов эквивалентной полосы пропускания другими способами. Но таких ограничений нет. Веб-сайт может загружать огромные файлы в фоновом режиме снова и снова, и Apple может не заботиться об этом. И, наконец, я верю, что звуки могут быть загружены в любом случае, поэтому НИКАКИЕ ДАННЫЕ НЕ РЕАЛЬНО СОХРАНЕНЫ! Apple просто не позволяет им играть автоматически без взаимодействия с пользователем, что делает их непригодными для игр, что, конечно, является их настоящим намерением.
Apple заблокировала звук, потому что они начали замечать, что приложения HTML5 могут быть такими же способными, как и нативные приложения, если не больше. Если вам нужен звук в веб-приложениях, вам нужно лоббировать Apple, чтобы перестать быть антиконкурентной, как Microsoft. Там нет технической проблемы, которая может быть решена здесь.
Apple досадно отвергает многие веб-стандарты HTML5 на своих устройствах iOS по ряду деловых причин. В конечном счете, вы не можете предварительно загрузить или автоматически воспроизвести звуковые файлы до сенсорного события, он воспроизводит только один звук за раз и не поддерживает Ogg/Vorbis. Тем не менее, я нашел один изящный обходной путь, который позволил бы вам немного лучше контролировать звук.
<audio id="soundHandle" style="display:none;"></audio>
<script type="text/javascript">
var soundHandle = document.getElementById('soundHandle');
$(document).ready(function() {
addEventListener('touchstart', function (e) {
soundHandle.src = 'audio.mp3';
soundHandle.loop = true;
soundHandle.play();
soundHandle.pause();
});
});
</script>
По сути, вы начинаете воспроизведение аудиофайла с самого первого сенсорного события, а затем немедленно приостанавливаете его. Теперь вы можете использовать команды soundHandle.play() и soundHandle.pause() во всем вашем Javascript и управлять звуком без сенсорных событий. Если вы можете точно рассчитать время, просто включите паузу сразу после окончания звука. Затем в следующий раз, когда вы воспроизведете его снова, он вернется к началу. Это не решит все проблемы, которые Apple устроила здесь, но это одно из решений.
Начиная с iOS 4.2.1, ни фальшивый щелчок, ни трюк.load() не будут работать для автоматического воспроизведения звука на любом устройстве iOS. Единственная известная мне опция состоит в том, чтобы пользователь фактически выполнил действие щелчка и начал воспроизведение в обработчике события щелчка, не заключая вызов.play() во что-либо асинхронное (ajax, setTimeout и т. Д.).
Кто-нибудь, пожалуйста, скажите мне, если я ошибаюсь. До последнего обновления у меня были рабочие лазейки для iPad и iPhone, и все они выглядят так, как будто они закрыты.
Я подтверждаю, что звук не работает, как описано (по крайней мере, на iPad с 4.3.5). Особая проблема заключается в том, что аудио не загружается в асинхронном методе (ajax, timer timer и т. Д.), Но воспроизводится, если оно было предварительно загружено. Проблема в том, что нагрузка должна быть вызвана событием, инициируемым пользователем. Поэтому, если у вас есть кнопка, позволяющая пользователю начать воспроизведение, вы можете сделать что-то вроде:
function initSounds() {
window.sounds = new Object();
var sound = new Audio('assets/sounds/clap.mp3');
sound.load();
window.sounds['clap.mp3'] = sound;
}
Затем, чтобы воспроизвести его, например, в запросе AJAX, вы можете сделать
function doSomething() {
$.post('testReply.php',function(data){
window.sounds['clap.mp3'].play();
});
}
Не самое лучшее решение, но оно может помочь, особенно зная, что виновником является функция загрузки в событии, не инициированном пользователем.
Изменить: я нашел объяснение Apple, и оно влияет на iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
Попробуйте вызвать метод.load() перед методом.play() для тега audio или video... который будет HTMLAudioElement или HTMLVideoElement соответственно. Это был единственный способ, которым он будет работать на iPad для меня!
Автозапуск не работает на iPad или iPhone для видео или аудио тегов. Это ограничение установлено Apple для экономии пропускной способности пользователей.
Мне кажется, что ответ на этот вопрос (по крайней мере сейчас) четко задокументирован в документах Safari HTML5:
Пользовательский контроль загрузок через сотовые сети
В Safari на iOS (для всех устройств, включая iPad), где пользователь может находиться в сотовой сети и получать плату за единицу данных, предварительная загрузка и автозапуск отключены. Данные не загружаются, пока пользователь не инициирует их. Это означает, что методы JavaScript play () и load () также неактивны до тех пор, пока пользователь не начнет воспроизведение, если только методы play () или load () не запускаются действием пользователя. Другими словами, кнопка Play, инициированная пользователем, работает, а событие onLoad="play()" - нет.
Это играет фильм: <input type="button" value="Play" onClick="document.myMovie.play()">
Это ничего не делает на iOS: <body onLoad="document.myMovie.play()">
Обдумайте это, разрабатывая быстрое прототипное веб-приложение под iOS4.2 (dev build). Решение на самом деле довольно просто. Обратите внимание, что вы, похоже, уже не имеете тега на своей HTML-странице, вам действительно нужно динамически вставить тег в документ (обратите внимание, что в этом примере используется Prototype 1.7 для некоторой дополнительной привлекательности Javascript):
this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""});
document.body.appendChild(this.soundFile);
this.soundFile.load();
this.soundFile.play();
Поскольку вы не установили контроллер, не должно быть необходимости делать какие-то хитрые действия с CSS, чтобы скрыть его / расположить за пределами экрана.
Кажется, это работает отлично.
Если вы создаете аудио элемент, используя:
var a = new Audio("my_audio_file.wav");
И добавить suspend прослушиватель событий через:
a.addEventListener("suspend", function () {console.log('suspended')}, false);
А затем загрузите файл в мобильный Safari (iPad или iPhone), вы увидите, что "приостановлено" будет зарегистрировано в консоли разработчика. В соответствии со спецификацией HTML5 это означает: "Пользовательский агент намеренно не извлекает медиа-данные, но не загружает весь медиа-ресурс".
Вызов последующего a.load(), тестирование события canplay и затем использование a.play() кажется подходящим методом для автоматического запуска звука.
Apple не поддерживает стандарт полностью, но есть обходной путь. Их оправдание - перегрузка сотовой сети, возможно, потому что вы попадете на страницы, которые воспроизводят случайный звук. Это поведение не меняется, когда устройство выходит на Wi-Fi, возможно, для согласованности. Кстати, эти страницы обычно плохая идея в любом случае. Вы не должны пытаться поместить саундтрек на каждую веб-страницу. Это просто неправильно.:)
Звук html5 будет воспроизводиться, если он запускается в результате действий пользователя. Загрузка страницы не считается. Таким образом, вам нужно реструктурировать свое веб-приложение, чтобы оно стало приложением "все в одном". Вместо ссылки, которая открывает страницу, на которой воспроизводится звук, эта ссылка необходима для воспроизведения на текущей странице без изменения страницы. Это правило "взаимодействия с пользователем" применяется к методам html5, которые вы можете вызывать для аудио или видеоэлемента. Вызовы возвращаются без какого-либо эффекта, если они запускаются автоматически при загрузке страницы, но они работают при вызове из обработчиков событий.
Мое решение - запуск из реального сенсорного события в предыдущем меню. Конечно, они не заставляют вас использовать интерфейс конкретного игрока. Для моих целей это работает хорошо. Если у вас нет существующего интерфейса, вы можете ошибаться. Может быть, вы могли бы попробовать события наклона или что-то...
Вы можете использовать HowlerJS с параметром html5, установленным в true
Работает с jQuery, протестировано на Ipad v.5.1.1
$('video').get(0).play();
Вы должны добавить / удалить элемент видео со страницы.
Я справился с этим, прикрепив обработчик событий для всех событий, для которых вам разрешено запускать звук к элементу body, который запускает любые html-аудио элементы с автовоспроизведением для однократного воспроизведения.
var mobile = /iPad|iPhone|iPod|android/.test(navigator.userAgent) && !window.MSStream;
if (mobile) {
$('body').on('touchstart click doubleclick keydown', function() {
$("audio[autoplay='autoplay']").each(
function(){
this.play();
this.removeAttribute('autoplay');
});
});
}
Это похоже на работу:
<html>
<title>
iPad Sound Test - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript">
window.onload = function() {
var audioPlayer = document.getElementById("audio");
audioPlayer.load();
audioPlayer.play();
};
</script>
</body>
</html>
Смотрите это в действии здесь: https://web.archive.org/web/20101108095801/http://www.johncoles.co.uk/ipad/test/1.html
Начиная с iOS 4.2 это больше не работает. Сожалею.