Автоматичне відтворення аудіофайлів на 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. Це лише пристрій 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.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), де користувач може знаходитись у стільниковій мережі та платити за одиницю даних, попереднє завантаження та автоматичне відтворення вимкнено. Дані не завантажуються, поки користувач їх не ініціює. Це означає, що методи відтворення JavaScript () та завантаження () також неактивні, поки користувач не ініціює відтворення, якщо метод відтворення () або навантаження () не ініційований дією користувача. Іншими словами, ініційована користувачем кнопка відтворення працює, але подія onLoad = "play ()" ні.

Це відтворює фільм: <input type="button" value="Play" onClick="document.myMovie.play()">

Це не робить нічого для iOS: <body onLoad="document.myMovie.play()">

Здивувались цим, розробляючи швидкий прототип веб-програми під 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, щоб приховати його / розташувати поза екраном.

Здається, це працює чудово.

Apple не підтримує стандарт повністю, але є обхідне рішення. Їх обгрунтування є затори стільникової мережі, можливо тому, що ви потрапите на сторінки, які відтворюють випадковий звук. Ця поведінка не змінюється, коли пристрій переходить на Wi-Fi, можливо, для послідовності. До речі, ці сторінки, як правило, погана ідея. Ви не повинні намагатися розмістити саундтрек на кожній веб-сторінці. Це просто неправильно. :)

Звук html5 відтворюватиметься, якщо його запустити в результаті дії користувача. Завантаження сторінки не враховується. Отже, вам потрібно реструктуризувати веб-програму так, щоб вона була цілою на одній сторінці. Замість посилання, яке відкриває сторінку, що відтворює звук, вам потрібно це посилання для відтворення на поточній сторінці без зміни сторінки. Це правило "взаємодії з користувачем" застосовується до методів html5, які ви можете викликати на аудіо- чи відеоелементі. Виклики повертаються без будь-якого ефекту, якщо вони запускаються автоматично при завантаженні сторінки, але вони працюють, коли їх викликають обробники подій.

Моє рішення - запустити реальну подію дотику в попередньому меню. Звичайно, вони не змушують вас користуватися певним інтерфейсом програвача. Для моїх цілей це добре працює. Якщо у вас немає існуючого інтерфейсу для використання, afaik ви зазнали помилок. Можливо, ви можете спробувати нахилити події чи щось інше ...

Якщо ви створюєте елемент 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 це вже не працює. Вибачте.