1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a> 9 <a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a> 10 <a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隐藏控制框</a> 11 <a href="javascript:void(0);" onclick="muted('firefox',this);">开启静音</a> 12 <input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/> 13 <audio src="media/yryjz.mp3" id="audio" controls="controls" ></audio> 14 当前音量：<span id = "nowVol"> - </span> 15 </body> 16 <script type="text/javascript"> 17 var audio ; 18 window.onload = function(){ 19 initAudio(); 20 } 21 var initAudio = function(){ 22 //audio = document.createElement("audio") 23 //audio.src='Never Say Good Bye.ogg' 24 audio = document.getElementById('audio'); 25 } 26 function getCurrentTime(id){ 27 alert(parseInt(audio.currentTime) + '：秒'); 28 } 29 function playOrPaused(id,obj){ 30 if(audio.paused){ 31 audio.play(); 32 obj.innerHTML='暂停'; 33 return; 34 } 35 audio.pause(); 36 obj.innerHTML='播放'; 37 } 38 function hideOrShowControls(id,obj){ 39 if(audio.controls){ 40 audio.removeAttribute('controls'); 41 obj.innerHTML = '显示控制框' 42 return; 43 } 44 audio.controls = 'controls'; 45 obj.innerHTML = '隐藏控制框' 46 return; 47 } 48 function vol(id,type , obj){ 49 if(type == 'up'){ 50 var volume = audio.volume + 0.1; 51 if(volume >=1 ){ 52 volume = 1 ; 53 54 } 55 audio.volume = volume; 56 }else if(type == 'down'){ 57 var volume = audio.volume - 0.1; 58 if(volume <=0 ){ 59 volume = 0 ; 60 } 61 audio.volume = volume; 62 } 63 document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume); 64 } 65 function muted(id,obj){ 66 if(audio.muted){ 67 audio.muted = false; 68 obj.innerHTML = '开启静音'; 69 }else{ 70 audio.muted = true; 71 obj.innerHTML = '关闭静音'; 72 } 73 } 74 //保留一位小数点 75 function returnFloat1(value) { 76 value = Math.round(parseFloat(value) * 10) / 10; 77 if (value.toString().indexOf(".") < 0){ 78 value = value.toString() + ".0"; 79 } 80 return value; 81 } 82 </script> 83 </html>
