En esta parte veremos como crear un simple reproductor de audio con la API HTML5 para audio/video.
Más információn sobre HTML5 audio/video: http://www.w3schools.com/tags/ref_av_dom.asp
Código de ejemplo del capítulo. audio.html ...
<!DOCTYPE html>
<html>
<head>
<title>Api HTML5 audio/video</title>
<meta charset="utf-8">
<script>
window.onload = function()
{
var audio = document.getElementById("audio");
audio.volume = document.getElementById("volume").value;
//Eventos
document.getElementById("play").onclick = function(){audio.play()}
document.getElementById("pause").onclick = function(){audio.pause()}
document.getElementById("stop").onclick = function(){audio.load()}
document.getElementById("volume").onchange = function(e){audio.volume = e.target.value}
audio.ontimeupdate = function(){
document.getElementById("time").max = audio.duration;
document.getElementById("time").value = audio.currentTime;
}
document.getElementById("cancion").innerHTML = audio.currentSrc;
}
</script>
</head>
<body>
<div id="reproductor">
<button type="button" id="play">Play</button>
<button type="button" id="pause">Pause</button>
<button type="button" id="stop">Stop</button>
<p>Volumen: <input type="range" id="volume" step=".1" min="0" max="1" value="1"></p>
<p>Tiempo: <input type="range" id="time" step=".1" min="0" max="0" value="0"></p>
<p>Canción: <strong id="cancion"></strong></p>
</div>
<audio id="audio">
<source src="musica/Barricada-EnBlancoYNegro.mp3" type="audio/mpeg">
Tu navegador no es compatible
</audio>
</body>
</html>
Vídeo tutorial de Javascript en Youtube
No hay comentarios:
Publicar un comentario