audio详细控制 

 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>

 

posted @ 2017-01-19 13:53  ghfjj  阅读(367)  评论(0)    收藏  举报