Capítulo 3

Controles de som com JavaScript e botões padrão

JavaScript

<script type="text/javascript">
function id(id) {
	return document.getElementById(id)
}
function init() {	
	var container = id('fundo-controles');
	var ctr = id('som');
	var play = id('play');
	var pause = document.getElementById('pause');
	var vmais = document.getElementById('vmais');
	var vmenos = document.getElementById('vmenos');

	if (!Modernizr.audio) {
		container.style.display = 'none';	
		} else {	
	
	play.addEventListener('click', function(){
		ctr.play();
		ctr.volume = 1;
	}, false);

	pause.addEventListener('click', function(){
		ctr.pause();
	}, false);

	vmais.addEventListener('click', function(){
		ctr.play();
		ctr.volume += 0.25;
	
	}, false);

	vmenos.addEventListener('click', function(){
		ctr.play();
		ctr.volume -= 0.25;
	}, false);
	};
}
window.onload = init;
</script >

HTML

	<audio id="som">
		<source src="som.ogg" type="audio/ogg">
		<source src="som.mp3" type="audio/mpeg">
		<source src="som.wav" type="audio/wave">
		<p>Seu navegador não suporta o elemento audio da HTML5.<br>Faça <a href="som.zip">download de som.zip</a></p>
	</audio>
	
	<div id="fundo-controles">
		<input type=button src="play.png" value="Play" id="play">
		<input type=button src="pause.png" value="Pause" id="pause">
		<input type=button src="vmais.png" value="Volume(+)" id="vmais">
		<input type=button src="vmenos.png" value="Volume(-)" id="vmenos">
	</div>