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

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

ОБНОВЛЕНИЕ: это взлом, и он больше не работает на 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. Это только устройство Wi-Fi, а не телефон, который может нести дорогостоящую плату за пропускную способность, так что этот аргумент не имеет смысла для этого устройства. Они могут сказать, что помогают с управлением сетью Wi-Fi, но любые проблемы с пропускной способностью в моей сети 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, событие таймера и т.д.), но он будет воспроизводиться, если он был предварительно загружен. Проблема в том, что нагрузка должна быть связана с событием, инициированным пользователем. Итак, если у вас есть кнопка для запуска игры пользователем, вы можете сделать что-то вроде:

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 () для тега аудио или видео ... который будет соответственно HTMLAudioElement или HTMLVideoElement. Для меня это был единственный способ работать на iPad!

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

Мне кажется, что ответ на этот вопрос (по крайней мере, сейчас) четко задокументирован в документации Safari HTML5 :

Пользовательский контроль загрузок по сотовой сети

В Safari на iOS (для всех устройств, включая iPad), где пользователь может быть в сотовой сети и платить за единицу данных, предварительная загрузка и автовоспроизведение отключены. Никакие данные не загружаются, пока пользователь не инициирует их. Это означает, что методы play () и load () JavaScript также неактивны, пока пользователь не инициирует воспроизведение, если только метод play () или load () не запускается действием пользователя. Другими словами, инициированная пользователем кнопка воспроизведения работает, а событие onLoad = "play ()" - нет.

Это воспроизводит фильм: <input type="button" value="Play" onClick="document.myMovie.play()">

На iOS это ничего не делает: <body onLoad="document.myMovie.play()">

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

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

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

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

Мое решение - запуск из реального события касания в предыдущем меню. Конечно, они не заставляют вас использовать определенный интерфейс плеера. Для моих целей это хорошо работает. Если у вас нет существующего интерфейса, скорее всего, вы ошиблись. Может, вы могли бы попробовать тильт-события или что-то в этом роде ...

Если вы создаете элемент Audio, используя:

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 () кажется подходящим методом для автоматического запуска звука.

Работает с 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>

Посмотрите, как это работает здесь: http://www.johncoles.co.uk/ipad/test/1.html (в архиве)

Начиная с iOS 4.2 это больше не работает. Сожалею.