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

Я хотел бы также подчеркнуть, что причина, по которой Вы не можете сделать это, - это бизнес-решение, которое приняла 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.пауза () команды по всему Javascript и управлять аудио без сенсорных событий. Если вы можете точно рассчитать время, просто сделайте паузу сразу после окончания звука. Затем в следующий раз, когда вы играете его снова, он будет циклически возвращаться к началу. Это не решит весь беспорядок, который Apple сделала здесь, но это одно решение.

начиная с iOS 4.2.1, ни поддельный щелчок, ни.load () trick будет работать для автозапуска звука на любом устройстве 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();
    }); 
}

не самое лучшее решение, но оно может помочь, особенно зная, что виновником является функция загрузки в событии, не вызванном пользователем.

Edit: я нашел объяснение Apple, и это влияет на iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

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

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

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

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

Это, кажется, работает отлично.

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

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

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

Если вы создаете звуковой элемент с помощью:

var a = new Audio("my_audio_file.wav");

и добавить suspend прослушивателя событий через:

a.addEventListener("suspend", function () {console.log('suspended')}, false);

а затем загрузите файл в mobile Safari (iPad или iPhone), вы увидите, что "приостановлено" войти в консоль разработчика. Согласно спецификации HTML5, это означает, что " агент пользователя в настоящее время намеренно не извлекает мультимедийные данные, но не загружает весь медиа-ресурс."

вызов последующего a. load (), тестирование для событие "canplay", а затем использование.play() кажется подходящим методом для автоматического запуска звука.

работает с jQuery, проверено на iPad В. 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 это больше не работает. Извиняюсь.