(Det här dök först upp på Spikes Saker… Och Grejer… blogg)
HTML5 <audio> taggar är ganska rakt på sak. Given:
<audio id="player"></audio>
den här biten av Javascript:
player = document.getElementById('player');
player.src = 'some-audio-file-url';
player.play()
kommer att börja spela upp vad helst som src pekar på. (Pro-tip: Om du använder jQuery, måste du få den faktiska HTML-elementet med player = $('#player')[0] eller player = $('#player').get(0))
Dock, om användaren är på en iOS eller Android mobil enhet, kommer ovanstående inte att spela upp något. Ingen av dessa operativsystem tillåter webbaudio (eller video) att börja strömma utan användarinteraktion. Rationalen är att strömning av data över mobilnätet kan kosta pengar och inte bör ske utan att användaren faktiskt trycker på en knapp.
Allt väl och bra, men vad om du vill spela ett ljud som svar på en händelse, säg pipa webbläsaren en gång per minut:
player = document.getElementById('player');
player.src = 'beep-url';
beeper = setInterval(function() { player.play(); } ,1000 * 60);
Det här kommer att fungera bra i skrivbordswebbläsare, men på mobil kommer anropet till play() att göra ingenting.
Lyckligtvis finns det tre saker som gör omgående enkelt:
- Användaren behöver bara trycka på play en gång per audioelement.
- “Att trycka på play” kan också betyda att trigga
play()genom ett klickhändelse. - Att spela upp ett audioelement utan källa är ett lagligt no-op.
Kort sagt, allt vi behöver är att användaren ska klicka på en knapp som spelar ett tomt audioelement för att få kontroll över det:
<audio id="player"></audio>
<button id="ok">OK att pip</button>
// Förutsätter jQuery
$("#ok").click(function() {
player = document.getElementById('player');
$( this ).slideUp();
player.play(); // Spela upp det tomma elementet för att få kontroll
player.src = 'beep-url'; // Ange den riktiga ljudkällan
beeper = setInterval(function() { player.play(); } ,1000 * 60);
});
Klicken kan vara något, en mer subtil version skulle vara att koppla den till den stäng knappen i en instruktionsmodal i början av ett spel.
Den här tekniken försvårar kanske lite gränsen mellan andan och bokstaven i lagen, men den gör jobbet och låter dig skapa en konsistent upplevelse för både skrivbords- och mobilanvändare.