音频标签入门基础
```<!DOCTYPE html>
<html lang="en">
<body>
<!-- controls 默认控制台 -->
<!-- loop 循环播放 -->
<!-- muted 静音属性 -->
<!-- autoplay 自动播放，谷歌浏览器不支持 -->
<audio controls muted autoplay id="myaudio">
<source src="旺仔小乔 - 春泥 (Live).mp3"></audio>
</audio>
<button id="bt1">播放</button>
<span id="current">0:00</span>/
<span id="duration"></span>
<div class="progress">
<div class="innerProgress"></div>
</div>
<button id="bt2">下一首</button>
<button>上一首</button>
<script>
window.onload=function(){
var arr=["旺仔小乔 - 春泥 (Live).mp3","邓超 _ 庾澄庆 - 让我一次爱个够.mp3"];
var bt2=document.getElementById("bt2");
var index=0;
var source=document.getElementsByTagName("source")[0];
bt2.onclick=function(){
if(index==1){
index=0;
}else{
index++;
}
source.src=arr[index];
// 重新加载音频
myaudio.load();
bt1.innerHTML="暂停";
// 音频加载完成触发的事件
myaudio.oncanplay=function(){
time=myaudio.duration;
duration.innerHTML=changetime(time);
}
}
var myaudio=document.getElementById("myaudio");
// onended 监听音频是否完成播放
// 音频播放完成是触发
myaudio.onended=function(){
if(index==1){
index=0;
}else{
index++;
}
source.src=arr[index];
// 重新加载音频
myaudio.load();
bt1.innerHTML="暂停";
// 音频加载完成触发的事件
myaudio.oncanplay=function(){
time=myaudio.duration;
duration.innerHTML=changetime(time);
}
}
var bt1=document.getElementById("bt1");
// 当前播放器的时间
var time=myaudio.duration;
var duration=document.getElementById("duration");
var current=document.getElementById("current");
var innerProgress=document.getElementsByClassName("innerProgress")[0];
var progress=document.getElementsByClassName("progress")[0];
function changetime(x){
var min=parseInt(x/60);
var s=Math.round(x%60);
if(s<10){
s="0"+s;
}else{
s=s;
}
var str=min+":"+s;
return str;
}
duration.innerHTML=changetime(time);
var t;
bt1.onclick=function(){
// 如果播放器为暂停状态
// myaudio.paused 自带属性，判断播放器是否为暂停状态
if(myaudio.paused){
// 改为播放状态
myaudio.play();
this.innerHTML="暂停";
t=setInterval(function(){
current.innerHTML=changetime(Math.ceil(myaudio.currentTime));
var currenttime=myaudio.currentTime;
innerProgress.style.width=(currenttime/time)*100+"%";
},1000)
}else{
// 改为暂停状态
myaudio.pause();
this.innerHTML="播放";
clearInterval(t);
}
}
progress.onmousedown=function(event){
var e=event||window.event;
var width=e.clientX-progress.offsetLeft;
innerProgress.style.width=width+"px";
current.innerHTML=changetime(width/300*time);
myaudio.currentTime=width/300*time;
progress.onmousemove=function(event){
var e=event||window.event;
var width=e.clientX-progress.offsetLeft;
innerProgress.style.width=width+"px";
current.innerHTML=changetime(width/300*time);
myaudio.currentTime=width/300*time;
}
progress.onmouseup=function(){
progress.onmousemove=null;
}
}
}
</script>
</body>
</html>
