Anteriormente vimos como descobrir que uma musica parou de tocar em ActionScript 3. Hoje em dia temos uma quantidade interessante de browsers que suportam alguma coisa de html 5 (safari, chrome, firefox…), portanto nada mais justo que analisar também esta solução.

Vejamos como tocar o nosso jazz.mp3

<audio id="mp3" src="jazz.mp3" type="audio/mpeg" controls/>

Apenas esta tag vai gerar um pequeno player com controles customizados pelo browser. E como saber que a musica parou? Basta escutar pelo evento ended

var mp3 = document.getElementById('mp3');
 
mp3.addEventListener('ended', function(){ 
	alert("fim"); 
});

Para customizar os controles basta omitir o atributo controls na tag audio e usar os métodos play e pause, por exemplo.

Um bom exemplo pode ser encontrado aqui:
http://ajaxian.com/archives/html5-media-support-video-and-audio-tags-and-scriptability

E documentação sobre html 5 vc encontra aqui:
http://www.w3schools.com/html5/html5_reference.asp

A tag video segue a mesma idéia, mas será assunto para um próximo post.