jueves, 15 de enero de 2015

Tutorial Javascript parte 34 - Crear un reproductor de audio con la API HTML5 audio/video




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