Автозапуск аудио файлов на iPad с HTML5

Question

Я пытаюсь получить аудиофайл для автозапуска в Safari на iPad. Если я захожу на страницу с помощью Safari на моем Mac, это нормально. На iPad автозапуск не работает.

Answer 1

Я также хотел бы подчеркнуть, что причина, по которой вы не можете сделать это, - это деловое решение, принятое Apple, а не техническое решение. То есть Apple не имела разумного технического обоснования для отключения звука в веб-приложениях на iPod Touch. Это только устройство WiFi, а не телефон, который может потребовать дорогой платы за пропускную способность, так что этот аргумент имеет нулевую ценность для этого устройства. Они могут сказать, что помогают с управлением сетью Wi-Fi, но любые проблемы с пропускной способностью в моей сети Wi-Fi являются моей заботой, а не Apple.

Кроме того, если они действительно заботятся о предотвращении нежелательного, чрезмерного потребления полосы пропускания, они предоставят настройку, позволяющую пользователям подключаться к звукам веб-приложений. Кроме того, они будут делать что-то, чтобы ограничить использование веб-сайтов эквивалентной полосы пропускания другими способами. Но таких ограничений нет. Веб-сайт может загружать огромные файлы в фоновом режиме снова и снова, и Apple может не заботиться об этом. И, наконец, я верю, что звуки могут быть загружены в любом случае, так что НИКАКИЕ ДАННЫЕ НЕ РЕАЛЬНО СОХРАНЕНЫ! Apple просто не позволяет им играть автоматически без взаимодействия с пользователем, что делает их непригодными для игр, что, конечно, является их настоящим намерением.

Apple заблокировала звук, потому что они начали замечать, что приложения HTML5 могут быть такими же способными, как и нативные приложения, если не больше. Если вам нужен звук в веб-приложениях, вам нужно лоббировать Apple, чтобы перестать быть антиконкурентной, как Microsoft. Здесь нет технической проблемы, которую можно исправить.

Answer 2

ОБНОВЛЕНИЕ: Это хак, и он больше не работает на 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.

Answer 3

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 устроила здесь, но это одно из решений.

Answer 4

Начиная с iOS 4.2.1, ни фальшивый щелчок, ни трюк .load () не будут работать для автоматического воспроизведения звука на любом устройстве iOS. Единственный известный мне вариант - заставить пользователя фактически выполнить действие щелчка и начать воспроизведение в обработчике события нажатия без , оборачивая вызов .play () во что-либо асинхронное (ajax, setTimeout и т. Д.). 1003 *

Кто-нибудь, пожалуйста, скажите мне, если я ошибаюсь. До самого последнего обновления у меня были рабочие лазейки для iPad и iPhone, и все они выглядят так, как будто они закрыты.

Answer 5

Я подтверждаю, что звук не работает, как описано (по крайней мере, на iPad с 4.3.5). Особая проблема заключается в том, что звук не загружается в асинхронном методе (ajax, 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

Answer 6

Попробуйте вызвать метод .load () перед методом .play () для тега audio или video ... который будет HTMLAudioElement или HTMLVideoElement соответственно. Это был единственный способ, которым он будет работать на iPad для меня!

Answer 7

Мне кажется, что ответ на этот вопрос (по крайней мере, сейчас) четко задокументирован в документах 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()">

Answer 8

Автозапуск не работает на iPad или iPhone для видео или аудио тегов.Это ограничение установлено Apple для экономии пропускной способности пользователей.

Answer 9

Apple не поддерживает стандарт полностью, но есть обходной путь.Их оправдание - перегрузка сотовой сети, возможно, потому, что вы попадете на страницы, которые воспроизводят случайный звук.Это поведение не меняется, когда устройство выходит на Wi-Fi, возможно, для согласованности.Кстати, эти страницы, как правило, плохая идея.Вы не должны пытаться поместить саундтрек на каждую веб-страницу.Это просто неправильно.:)

html5 аудио будет воспроизводиться, если оно запускается в результате действия пользователя.Загрузка страницы не считается.Таким образом, вам нужно реструктурировать свое веб-приложение, чтобы оно стало приложением «все в одном».Вместо ссылки, которая открывает страницу, на которой воспроизводится звук, эта ссылка необходима для воспроизведения на текущей странице без изменения страницы.Это правило «взаимодействия с пользователем» применяется к методам html5, которые вы можете вызывать для аудио или видеоэлемента.Вызовы возвращаются без какого-либо эффекта, если они запускаются автоматически при загрузке страницы, но они работают при вызове из обработчиков событий.

Answer 10

Обдумал это, разрабатывая быстрое прототипное веб-приложение под iOS4.2 (сборка для разработчиков).Решение на самом деле довольно просто.Обратите внимание, что у вас, кажется, уже нет тега на HTML-странице, вам действительно нужно динамически вставить тег в документ (обратите внимание, что в этом примере используется прототип 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, чтобы скрыть / расположить его вне экрана.

Кажется, это работает отлично.