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


88

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


1
Это не ответ, а просто наблюдение. Когда я подключил WireShark к iPad, я заметил, что он не запускается автоматически, но все равно загружает файл Wave. Первый HTTP Get просто запрашивает первые 2 байта файла, но затем iPad запрашивает оставшуюся часть Wave-файла в еще нескольких запросах Get. Что еще более странно, когда вы нажимаете кнопку «Воспроизвести» аудиокомпонента, iPad снова перезагружает файл Wave.
Javamann

Ответы:


34

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


1
Вот еще один обходной путь: codeblog.co/getting-autoplay-working-on-ios Я только что убедился, что это работает на iPad с iOS 3.2.
Ciryon

49
Не тратьте на это время, так как это больше не работает с iOS 4+
jcampbell1,

106

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

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

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


А для Android то же самое?
Rune Jeppesen

1
@Rune Jeppesen: Нет. У меня есть приложение PhoneGap / Cordova, в котором есть аудиоплеер, и оно отлично работает на Android. Единственная причина, по которой я затронул эту тему здесь, в StackOverflow, - это ограничения iOS в отношении воспроизведения звука.
Ulysses Alves

Теперь в Chrome для Android и для настольных компьютеров действует политика, аналогичная iOS
Ore4444

29

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, но это одно решение.


Я еще не пробовал это сделать, но если это действительно работает, это великолепно.
courtimas

3
Удивлен, что больше людей это не интересует.
aoeu256

Это все еще работает? Кажется, я могу заставить это работать ...
zillaofthegods

@MastaBaba Это должен быть принятый ответ. Зачем? Он не отвечает на вопрос, так как это то, что запрашивает OP: я пытаюсь получить аудиофайл для автовоспроизведения в Safari, и этот ответ не помогает с автовоспроизведением.
дебют

23

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

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


5
Я могу убедиться, что у меня есть код, работающий для автовоспроизведения звука без вмешательства пользователя как на iPad, так и на iPod touch, до 4.2.1. Я только что обновил свой iPad до версии 4.2.1 сегодня (как раз в середине тестирования моего аудио-прелоадера) и с ужасом наблюдал, как он просто перестал работать.
Джейсон Кестер

2
Что <video>касается версии 4.2.1, я убедился, что до тех пор, пока .load()затем .play()будет использоваться синхронный обработчик щелчков / касаний, он будет работать. В противном случае это не удается.
N Rohler

1
Кажется, что программное управление элементами мультимедиа (аудио и видео) включается после взаимодействия пользователя с каждым элементом мультимедиа . Т.е. если у вас есть аудиоэлементы A и B, и вы начинаете воспроизведение A через код в рамках обработчика события щелчка (или касания), он работает. Но это не означает, что позже вы можете начать воспроизведение B за пределами обработчика событий щелчка. Рассматривайте элементы мультимедиа в iOS как единичный элемент и меняйте источники в одном экземпляре, а не умножайте экземпляры на источники.
Тим Эриксон

10

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


Это золотой ответ. Вы можете заполнить звуковой объект несколькими звуками. И после вызова ajax в случаях успеха / ошибки воспроизводите все, что хотите. У меня работает на всех устройствах! Большое спасибо !!!
Андрис

7

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


Согласно документам разработчика Apple, ни .load, ни .play не будут работать, за исключением случаев, когда запускаются пользователем.
Джеффри Ван Альстин

5

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


5

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


2

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

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


2

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

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


1

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


1

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


Я пробовал это, но похоже, что это не работает. Есть обновления? sandbox.coolaj86.info/html5-audio-tag-ios4.html
coolaj86 05

0

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

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

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


3
Не работает на iPad 1 iOS 5.1.1 ... хотя работает на iPod 6.0 и iPhone
morgan_il

0

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

0

Кажется, это работает:

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


@ NisseEngström Кажется мне , что mp3 файл не в архиве , а также, так что это архив ссылка править довольно спорный вопрос.
Прощай, StackExchange

@FrankerZ: Есть ссылка на mp3? Я пропустил это. Спасибо.
Nisse Engström
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.