(Cela est apparu à l'origine sur le blog Stuff… And Things… de Spike)
Les balises HTML5 <audio> sont assez simples. Étant donné:
<audio id="player"></audio>
Ce morceau de JavaScript:
player = document.getElementById('player');
player.src = 'some-audio-file-url';
player.play()
commencera à jouer tout ce que la src pointe. (Astuce: Si vous utilisez jQuery, vous devez obtenir l'élément HTML réel avec player = $('#player')[0] ou player = $('#player').get(0))
Cependant, si l'utilisateur est sur un appareil mobile iOS ou Android, le code ci-dessus ne jouera en fait rien. Aucun de ces systèmes d'exploitation ne permet le streaming audio (ou vidéo) sans interaction de l'utilisateur. La raison est que le streaming de données sur le réseau cellulaire peut coûter de l'argent et ne devrait pas se produire sans que l'utilisateur n'appuie réellement sur un bouton.
Tout va bien, mais que faire si vous souhaitez jouer un son en réponse à un événement, par exemple faire biper le navigateur une fois par minute:
player = document.getElementById('player');
player.src = 'beep-url';
beeper = setInterval(function() { player.play(); } ,1000 * 60);
Cela fonctionnera parfaitement dans les navigateurs de bureau, mais sur mobile, l'appel à play() ne fera rien.
Heureusement, il y a trois choses qui rendent le contournement simple:
- L'utilisateur n'a besoin d'appuyer sur play qu'une seule fois par élément audio.
- «Appuyer sur play» peut également signifier déclencher
play()via un événement de clic. - Jouer un élément audio sans source est une opération légale sans opération.
En bref, tout ce dont nous avons besoin, c'est que l'utilisateur clique sur un bouton qui joue un élément audio vide pour prendre le contrôle:
<audio id="player"></audio>
<button id="ok">OK pour biper</button>
// Présume jQuery
$("#ok").click(function() {
player = document.getElementById('player');
$( this ).slideUp();
player.play(); // Jouer l'élément vide pour prendre le contrôle
player.src = 'beep-url'; // Définir la véritable source audio
beeper = setInterval(function() { player.play(); } ,1000 * 60);
});
Le clic peut être n'importe quoi, une version plus subtile consisterait à l'attacher au bouton de fermeture d'un modal d'instructions au début d'un jeu.
Cette technique brouille probablement un peu la frontière entre l'esprit et la lettre de la loi, mais elle permet de faire le travail et permet de créer une expérience cohérente pour les utilisateurs de bureau et mobile.