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:
[ajaxian.com]
E documentação sobre html 5 vc encontra aqui:
[www.w3schools.com]
A tag video segue a mesma idéia, mas será assunto para um próximo post.