Capítulo 3

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

JavaScript

01<script type="text/javascript">
02function id(id) {
03    return document.getElementById(id)
04}
05function init() {   
06    var container = id('fundo-controles');
07    var ctr = id('som');
08    var play = id('play');
09    var pause = document.getElementById('pause');
10    var vmais = document.getElementById('vmais');
11    var vmenos = document.getElementById('vmenos');
12 
13    if (!Modernizr.audio) {
14        container.style.display = 'none';   
15        } else {    
16     
17    play.addEventListener('click', function(){
18        ctr.play();
19        ctr.volume = 1;
20    }, false);
21 
22    pause.addEventListener('click', function(){
23        ctr.pause();
24    }, false);
25 
26    vmais.addEventListener('click', function(){
27        ctr.play();
28        ctr.volume += 0.25;
29     
30    }, false);
31 
32    vmenos.addEventListener('click', function(){
33        ctr.play();
34        ctr.volume -= 0.25;
35    }, false);
36    };
37}
38window.onload = init;
39</script >        
40        

HTML

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