今天小编跟大家讲解下有关HTML5 audio标签使用js进行播放控制实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 audio标签使用js进行播放控制实例 的相关资料，希望小伙伴们看了有所帮助。
<audio>标签可以在HTML5浏览器中播放音频文件。
<audio>默认提供一个控制面板 但是有些时候我们只需要播放声音 控制面板由我们自己来定义其显示的状态。
这里我们可以使用JS来进行控制 代码如下：复制代码代码如下:var audio ;window.onload = function(){ initAudio();}var initAudio = function(){ //audio = document.createElement("audio") //audio.src='https://www.jb51.net//html5/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;}调用方式如下：
复制代码代码如下:<a href=""onclick="getCurrentTime('firefox');">获取播放时间</a><a href=""onclick="playOrPaused('firefox',this);">播放</a><a href=""onclick="hideOrShowControls('firefox',this);">隐藏控制框</a><a href=""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="https://www.jb51.net/images/audio/Never Say Good Bye.ogg"id="audio"controls="controls"></audio> 当前音量：<span id ="nowVol"> - </span>
来源：爱蒂网
