Capítulo 3

Controles de som com JavaScript e botões personalizados

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 >

CSS

	<style>
	#fundo-controles {
		width:163px; 
		height:43px;
		display:table-cell;
		vertical-align:middle;
		text-align:center;
		background:url(fundo-controles.png) no-repeat;
		}
	</style>

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=image src="play.png" alt=Play id="play">
		<input type=image src="pause.png" alt=Pause id="pause">
		<input type=image src="vmais.png" alt=Volume(+) id="vmais">
		<input type=image src="vmenos.png" alt=Volume(-) id="vmenos">
	</div>