Hola a todos, bueno una de las novedades que trajo consigo html5 fue la posibilidad de poder cargar archivos de música con una nueva etiqueta llamada audio.
Aclaro que, a continuación mostraré un ejemplo que no funcionará en todos los navegadores, como todo lo que es html5. Por eso les recomiendo que si no tienen un navegador medianamente nuevo lo descarguen porque tal vez no funcione el ejemplo. En mi caso yo usaré una de las últimas versiones de Google Chrome.
Bueno para cargar una pista de audio simplemente debemos usar, como dije antes, la etiqueta audio de esta forma:
<audio src="pista.mp3" controls> Su navegador no soporta la etiqueta audio. </audio>
Con eso ya está todo!
Paso a explicarlo. En primer lugar la propiedad src es donde tendremos que indicar la ruta a la pista de audio que queremos cargar, igual que en la etiqueta img le indicamos la ruta de la imagen. Por otro parte habrán notado que agregué una propiedad controls, esto nos permitirá ver los botones de para reproducir, pausar o subir el volumen. Y por último dentro de la etiqueta tendremos que mostrar una leyenda que se visualizará si el navegador que usa el usuario no soporta la etiqueta audio.
Ahora si por ejemplo quisiéramos que la pista de audio se reproduzca en forma automática deberíamos agregarle la propiedad autoplay, de esta forma:
<audio src="pista.mp3" controls autoplay> Su navegador no soporta la etiqueta audio. </audio>
Bueno, como dije antes la propiedad controls permite mostrar los botones para reproducir, pausar y cambiar el volumen, pero ¿cómo haríamos si quisiéramos crear nuestra propia interfaz de controles?
Bueno los elementos audio tienen un método .play() y .pause() para reproducir y pausar respectivamente, y una propiedad volume que va desde el 0.0 (volumen más bajo) al 1.0 (volumen más alto) Sabiendo esto voy crear dos funciones una para reproducir y pausar que se dispará al presionar un botón y otra para cambiar el volumen con un select:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function playPause(){
var reproduciendo = true;
var pista = document.getElementById('pista');
var boton_play_pause = document.getElementById('boton_play_pause');
boton_play_pause.onclick = function(){
if(reproduciendo){
reproduciendo = false;
pista.pause();
this.value = 'Play';
}else{
reproduciendo = true;
pista.play();
this.value = 'Pause';
}
}
}
function cambiarVolumen(){
var pista = document.getElementById('pista');
var combo_volumen = document.getElementById('combo_volumen');
combo_volumen.onchange = function(){
var volumen = this.value;
pista.volume = volumen;
}
}
window.onload = function(){
playPause();
cambiarVolumen();
}
</script>
</head>
<body>
<form>
<audio id="pista" src="pista.mp3" autoplay> Su navegador no soporta la etiqueta audio. </audio>
<input type="button" id="boton_play_pause" value="Pause" />
<select id="combo_volumen">
<option value="1.0"> Volumen 100 </option>
<option value="0.9"> Volumen 90 </option>
<option value="0.8"> Volumen 80 </option>
<option value="0.7"> Volumen 70 </option>
<option value="0.6"> Volumen 60 </option>
<option value="0.5"> Volumen 50 </option>
<option value="0.4"> Volumen 40 </option>
<option value="0.3"> Volumen 30 </option>
<option value="0.2"> Volumen 20 </option>
<option value="0.1"> Volumen 10 </option>
<option value="0.0"> Volumen 0 </option>
</select>
</form>
</body>
</html>
(Acuérdense de cambiar el src por una pista de audio real)