HTML,js自制音频播放器
示意图
演示效果
MP3音频播放器
文件结构
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音频播放器</title>
<style type="text/css">
a{text-decoration: none;display: block;width: 50px;height: 30px;background-color: powderblue;float: left;text-align: center;border-radius: 5px;margin: 0px 5px;line-height: 30px;color: white;font-size: 12px;}
a:hover{color: cornflowerblue;background-color: aliceblue;}
#box{position: relative;margin: 50px 500px;}
#imgBox time{position: absolute;bottom: 75px;left: 225px;}
#imgBox h4{position: absolute;top: 20px;left: 180px;}
#but{position: absolute;bottom: 15px;left: 135px;}
</style>
</head>
<body>
<audio id="music" loop="loop" src="music/谢春花 - 借我.mp3">
您的浏览器不支持audio标签
</audio>
<div id="box">
<div id="imgBox">
<h4 id="name">谢春花 - 借我</h4>
<img src="img/yy.jpg" />
<time id="time">00:00</time>
</div>
<div id="but">
<a href="###" id="prev">上一曲</a>
<a href="###" id="paly">播放</a>
<a href="###" id="next">下一曲</a>
<a href="###" id="mute">静音</a>
</div>
</div>
</body>
</html>
js代码
var PREV=document.getElementById("prev")
var PALY=document.getElementById("paly")
var NEXT=document.getElementById("next")
var MUTE=document.getElementById("mute")
var MUSIC=document.getElementById("music")
var TIME=document.getElementById("time")
var SRC=document.getElementById("src")
PALY.onclick=function(){
if (music.paused) {
music.play();
this.innerText="暂停"
} else{
music.pause();
this.innerText="播放"
}
}
MUSIC.addEventListener("timeupdate",function(){
var tt=Math.floor(MUSIC.duration);
var s=00;
var m=00;
m=parseInt(tt/60);
s=tt-m*60;
TIME.innerText=Math.floor(MUSIC.currentTime)+"/"+m+":"+s;
})
var musicArr = new Array();
musicArr = ["谢春花 - 借我","戚薇 - 雨天","何洁 - 你是我的风景"]; //歌单
var num = 0;
var musicname = document.getElementById("name"); //歌名根据播放歌曲变化
// 上一首
PREV.onclick = function(){
num = (num +2)%3;
MUSIC.src ="music/"+musicArr[num]+".mp3";
musicname.innerHTML = musicArr[num];
MUSIC.play();
}
// 下一首
NEXT.onclick = function(){
num = (num +1)%3;
MUSIC.src = "music/"+musicArr[num]+".mp3";
musicname.innerHTML = musicArr[num];
MUSIC.play();
}
// 自动播放下一首
MUSIC.addEventListener('ended', function () {
NEXT.onclick();
}, false);
MUTE.onclick=function(){
if (MUSIC.muted) {
MUSIC.muted=false;
this.innerText="静音";
} else{
MUSIC.muted=true;
this.innerText="取消静音";
}
}