(Esto apareció originalmente en el blog de Spike’s Cosas… Y Otras Cosas…)
Las etiquetas HTML5 <audio> son bastante directas. Dado:
<audio id="player"></audio>
este fragmento de JavaScript:
player = document.getElementById('player');
player.src = 'some-audio-file-url';
player.play()
comenzará a reproducir lo que apunte la fuente. (Consejo profesional: Si está utilizando jQuery, debe obtener el elemento HTML real con player = $('#player')[0] o player = $('#player').get(0))
Sin embargo, si el usuario está en un dispositivo móvil iOS o Android, lo anterior no reproducirá nada. Ninguno de esos sistemas operativos permite que el audio web (o video) comience a transmitirse sin la interacción del usuario. La razón es que la transmisión de datos a través de la red celular puede costar dinero y no debe ocurrir sin que el usuario realmente presione un botón.
Todo bien, pero ¿qué pasa si desea reproducir un sonido en respuesta a un evento, por ejemplo, hacer que el navegador emita un pitido una vez por minuto:
player = document.getElementById('player');
player.src = 'beep-url';
beeper = setInterval(function() { player.play(); } ,1000 * 60);
Esto funcionará bien en navegadores de escritorio, pero en dispositivos móviles la llamada a play() no hará nada.
Afortunadamente, hay tres cosas que hacen que la solución alternativa sea sencilla:
- El usuario solo tiene que presionar reproducir una vez por elemento de audio.
- “Presionar reproducir” también puede significar activar
play()a través de un evento de clic. - Reproducir un elemento de audio sin fuente es una operación legal sin efecto.
En resumen, solo necesitamos que el usuario haga clic en un botón que reproduzca un elemento de audio vacío para obtener el control:
<audio id="player"></audio>
<button id="ok">OK para pitar</button>
// Supone jQuery
$("#ok").click(function() {
player = document.getElementById('player');
$( this ).slideUp();
player.play(); // Reproducir el elemento vacío para obtener el control
player.src = 'beep-url'; // Establecer la fuente de audio real
beeper = setInterval(function() { player.play(); } ,1000 * 60);
});
El clic puede ser cualquier cosa, una versión más sutil sería adjuntarlo al botón cerrar de un modal de instrucciones al inicio de un juego.
Esta técnica probablemente borra un poco la línea entre el espíritu y la letra de la ley, pero cumple con el trabajo y le permite crear una experiencia consistente para los usuarios de escritorio y móviles.