Sample Audio Events

Samples for the article http://www.adictosaltrabajo.com/tutoriales/manejando-audio-y-video-con-html5/

by Juan Antonio Jiménez Torres

HTML

<p>Click on <strong>"play"</strong> button </p>
<audio id="audio" src="https://app.box.com/shared/static/j9jix5nhuddqfiw4zq7390ob7y9asl7f.mp3"></audio>
<input type="button" value="play" onclick="play()">
<input type="button" value="pause" onclick="pause()">
<input type="button" value="stop" onclick="stop()">
<input type="button" value="+" onclick="subirVolumen()">
<input type="button" value="-" onclick="bajarVolumen()">
<textarea id="consola">Se han disparado los eventos: </textarea>

CSS

textarea {
  margin-top: 5px;
  width: 100%;
  height: 150px;
  border: 1px outset buttonface;
  box-sizing: border-box;
}

p {
  font-family: sans-serif;
  font-size: 11px;
}

JavaScript

var audio = document.getElementById('audio');



function play() {
  audio.play();
}

function pause() {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
}

function stop() {
  audio.pause();
  audio.currentTime = 0;
}

function turnUpVolume() {
  if (audio.volume < 0.9) {
    audio.volume += 0.1;
  }
}

function turnDownVolume() {
  if (audio.volume > 0.1) {
    audio.volume -= 0.1;
  }
}


var consola = document.getElementById('consola');
var events = "abort,canplay,canplaythrough,durationchange,emptied,ended,error,loadeddata,loadedmetadata,loadstart,pause,play,playing,progress,ratechange,seeked,seeking,stalled,suspend,timeupdate,volumechange,waiting".split(",");

var onEvent = function(e) {
  consola.innerHTML += e.type + ", ";
}

for (var i = 0, len = events.length; i < len; i++) {
  audio.addEventListener(events[i], onEvent, false);
}