HTML5中使用js控制audio标签的方法

http://www.frontopen.com/3122.html

<audio>标签可以在HTML5浏览器中播放音频文件。

<audio>默认提供一个控制面板，但是有些时候我们只需要播放声音，控制面板由我们自己来定义其显示的状态。

这里我们可以使用JS来进行控制，代码如下：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

var audio ; window.onload = function(){     initAudio(); } var initAudio = function(){     //audio =  document.createElement("audio")     //audio.src='Never Say Good Bye.ogg'     audio = document.getElementById('audio'); } function getCurrentTime(id){                 alert(parseInt(audio.currentTime) + '：秒'); }   function playOrPaused(id,obj){     if(audio.paused){         audio.play();         obj.innerHTML='暂停';         return;     }     audio.pause();     obj.innerHTML='播放'; }   function hideOrShowControls(id,obj){     if(audio.controls){         audio.removeAttribute('controls');         obj.innerHTML = '显示控制框'         return;     }     audio.controls = 'controls';     obj.innerHTML = '隐藏控制框'     return; } function vol(id,type , obj){     if(type == 'up'){         var volume = audio.volume  + 0.1;         if(volume >=1 ){             volume = 1 ;                  }         audio.volume =  volume;     }else if(type == 'down'){         var volume = audio.volume  - 0.1;         if(volume <=0 ){             volume = 0 ;         }         audio.volume =  volume;     }     document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume); } function muted(id,obj){     if(audio.muted){         audio.muted = false;         obj.innerHTML = '开启静音';     }else{         audio.muted = true;         obj.innerHTML = '关闭静音';     } } //保留一位小数点   function returnFloat1(value) {         value = Math.round(parseFloat(value) * 10) / 10;     if (value.toString().indexOf(".") < 0){         value = value.toString() + ".0";     }     return value; }

调用方式如下：

 

1 2 3 4 5 6 7 8

<a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a> <a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a> <a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隐藏控制框</a> <a href="javascript:void(0);" onclick="muted('firefox',this);">开启静音</a> <input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/> <audio src="/images/audio/Never Say Good Bye.ogg" id="audio" controls="controls" ></audio>   当前音量：<span  id = "nowVol"> - </span>