HTML5/CSS3/Javascripts learning , notes , files, etc

audio.md

HTML 5 Audio API

---

Reprodução de aúdio nativo no navegador, sem a necessidades de como plugins como o Flash.

Os 5 atributos da tag audio são :

1 - src - uma URL válida especificando a origem do conteudo 2 - autoplay - Valor boleano indicando se o arquivo será reproduzido automaticamente.( assim que o browser puder reproduzir algo que já foi carregado) 3 - controls - Valor boleano indicando se o browser deve exibir os controles de audio (volume,etc) 4 - preload - Valores possiveis : (none,metadata ou auto) indicando se o browser deve começar a carregar o conteudo do audio em um buffer. Em alguns browsers esse atributo é chamado de autobuffer. 5 - loop - Valor boleano indicando se o arquivo deve ser reproduzido repetidamente em loops.

Marcação

<audio controls preload='auto' id='audio_player'>
	<source src="http://example.ogg" /> <!-- Chrome, Firefox, Opera -->
	<source src="http://example.mp3" /> <!-- Safari and IE -->
	<p>Fallback em flash</p>
</audio>

Codecs

1 - Firefox 3.6+ : OGG & WAV 2 - Safari 5+ : MP3 & WAV 3 - Chrome 6 : OGG & MP3 4 - Opera 10.5+ : OGG & WAV 5 - IE 9 Beta+ : MP3 e WAV

Javascript API

(function() {
	var audioPlayer = document.querySelector('#audio_player');

	audioPlayer.play(); 	// Play file ;
	audioPlayer.pause(); 	// Pause audio playback
	audioPlayer.canPlayType(audioMIMEType) // check if browser can play the given MIME type
	audioPlayer.buffered(); // Retorna o inicio e fim do que já foi 'buffered' pelo browser.
	audioPlauer.load();		// reload audio(in case of changes in `src` attribute for example)
	
	var audio = new Audio('[src]'); // HTMLAudioElement
})()

Atributos

currentTime - Posição atual da reprodução startTime - Posição inicial da reprodução [read-only] duration - Duração do áudio [read-only] paused - Indica se o vídeo esta pausado ou não [read-only] ended - Indica se a reprodução terminou. [read-only] volume - Volume de reprodução do áudio muted - Indica se o áudio está no mudo. seeking - Indica se o áudio está sendo carregado. readyState - Determina o estado de carregamento do áudio.

HAVE_NOTHING = 0; HAVE_METADATA = 1; HAVE_CURRENT_DATA = 2; HAVE_FUTURE_DATA = 3; HAVE_ENOUGH_DATA = 4;

Eventos

error - Algum erro ocorreu enquanto os dados do arquivo eram carregados. play - Disparado apos o metodo play() é invocado, ou quando o atributo autoplay força a reprodução automatica do audio. pause - Disparado quando o áudio é pausado, disparado após o metodo pause() ser invocado. waiting - Disparado quando os proximos frames ainda não estão disponiveis e o browser tenta reproduzir-los. playing - A reprodução foi iniciada. canplay - Disparado quando o browser detecta que pode reproduzir o MIME Type do áudio mas ainda não garante que poderá reproduzir o áudio todo sem pausas. canplaythrough - Disparando quando o browser detecta que pode reproduzir o MIME type do áudio e consegue reproduzir todo o arquivo sem pausas. seeking - O browser está carregando o arquivo e está levando tempo suficiente para que este evento seja disparado. seeked - O browser terminou de carregar alguma parte do áudio. timeupdate - Disparando quando o tempo de reprodução foi atualizado(ex: quando avaçamos o audio) ended - Disparando quando o recurso de áudio chega no fim. durationchange - Disparado quando a duração do áudio é alterada. volumechange - Disparado quando o atributo volume ou muted são modificados.

Cross-Browser

A forma mais pratica de ter um reproduto de audio cross-browser é determinar os sources dentro da tag audio e inserir um fallback em flash caso nenhum dos formatos sejam aceitos.

Referências

http://www.w3.org/wiki/HTML/Elements/audio http://html5doctor.com/native-audio-in-the-browser/