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

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

ОТВЕТЫ

Ответ 1

ОБНОВЛЕНИЕ: Это взлом, и он больше не работает на IOS 4.X и выше. Это работало на IOS 3.2.X.

Это неправда. Apple не хочет автовоспроизводить видео и аудио на IPad из-за высокого трафика, который вы можете использовать в мобильных сетях. Я бы не использовал автозапуск для онлайн-контента. Для автономных HTML-сайтов это отличная функция, и для этого я использовал ее.

Вот решение "javascript fake click": 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.

Ответ 2

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

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

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

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

Ответ 4

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

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

Ответ 5

Я подтверждаю, что звук не работает, как описано (по крайней мере, на 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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

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

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

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

Ответ 9

Подумайте над этим, разработав быстрое прототип веб-приложения под 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, чтобы скрыть его/положение за его пределами.

Это работает отлично.

Ответ 10

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

Звук

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

Это работает:

<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 это больше не работает. К сожалению.

Ответ 14

Работает с jQuery, протестированным на Ipad v.5.1.1

$('video').get(0).play();

Вам нужно добавить/удалить элемент видео со страницы.

Ответ 15

Я обработал это, связав обработчик событий для всех событий, для которых вам разрешено запускать звук в элемент 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');
            });
    });
}