(Спочатку це з'явилося у блозі Spike's Різне… Та інше…)
Теги HTML5 <audio> досить прості. Дано:
<audio id="player"></audio>
цей шматок JavaScript:
player = document.getElementById('player');
player.src = 'some-audio-file-url';
player.play()
розпочне програвання того, на що вказує src. (Порада: Якщо ви використовуєте jQuery, вам потрібно отримати фактичний HTML-елемент із player = $('#player')[0] або player = $('#player').get(0))
Однак, якщо користувач перебуває на мобільному пристрої під керуванням iOS або Android, вищевказане не програє нічого. Жодна з цих операційних систем не дозволяє веб-аудіо (або відео) розпочинати трансляцію без взаємодії користувача. Логіка полягає в тому, що трансляція даних через мережу стільникового зв'язку може коштувати грошей і не повинна відбуватися без фактичного натискання користувачем кнопки.
Все це добре, але що, якщо ви хочете програти звук у відповідь на подію, наприклад, гудіти браузер один раз на хвилину:
player = document.getElementById('player');
player.src = 'beep-url';
beeper = setInterval(function() { player.play(); } ,1000 * 60);
Це буде працювати добре в настільних браузерах, але на мобільних пристроях виклик play() нічого не зробить.
На щастя, є три речі, які роблять обхід простим:
- Користувачеві потрібно натиснути play лише один раз на аудіоелемент.
- "Натискання play" також може означати спрацьовування
play()через подію кліку. - Програвання аудіоелемента без джерела є законною операцією, що нічого не робить.
Коротше кажучи, нам потрібно, щоб користувач натиснув кнопку, яка програє порожній аудіоелемент, щоб отримати контроль над ним:
<audio id="player"></audio>
<button id="ok">OK щоб гудіти</button>
// Припускається jQuery
$("#ok").click(function() {
player = document.getElementById('player');
$( this ).slideUp();
player.play(); // Програйте порожній елемент, щоб отримати контроль
player.src = 'beep-url'; // Встановіть реальне аудіоджерело
beeper = setInterval(function() { player.play(); } ,1000 * 60);
});
Клік може бути чим завгодно, більш тонка версія - це прикріплення її до кнопки закрити інструкційного модального вікна на початку гри.
Ця техніка, ймовірно, трохи розмиває межу між духом і буквою закону, але вона виконує роботу та дозволяє створити однорідний досвід як для настільних, так і для мобільних користувачів.