该篇文章会教你通过 制作一个简单的音乐播放器。包括播放、暂停、上一曲和下一曲。
阅读本文章你需要对HTML、CSS和 有基本的了解。
话不多说，先上图。
![\"\"](\"/images/51jb/154235148815gX42351p48d8.png\")
![\"\"](\"/images/51jb/154235148915423561Kk4O89.png\")
![\"\"](\"/images/51jb/15423514891542235148mxl9.png\")
这样看起来有点单调。
我们把它加在网页上试试。
![\"\"](\"/images/51jb/154235148915423651C4s8q9.jpg\")
具体效果可以去我的个人网站查看http://tcxqq.top
好了，成品已经展示了接下来，开干吧！
<!DOCTYPE html> <html lang=\"en\"> <head> < charset=\"UTF-8\"> < >Document</ > < rel=\"stylesheet\" href=\"css/music.css\"> </head> <body> <audio src=\"\" id=\"mymusic\"></audio> <div class=\"music\"> <div class=\"pic_div\"> <img src=\"images/music/pictures/disc.png\" alt=\"\" class=\"disc\"> <img src=\"images/music/pictures/default.jpg\" alt=\"\" id=\"music_pic\"> <span class=\"dot\"></span> <div class=\"music_program\"> <div id=\"prograss\"></div> </div> <div class=\"time\"> <p><span id=\"currenttime\">0:00</span><span>/</span><span id=\"duration\">0:00</span></p> </div> <div class=\"music_menu\"> <span =\"backMusic()\"></span> <span =\"playPause()\" id=\"playbtn\"></span> <span =\"nextMusic()\"></span> </div> </div> </div> </body> < src=\"js/music.js\"></ > </html>
先建好基本的HTML框架。
<audio src=\"\" id=\"mymusic\"></audio>为我们的音频
<div class=\"music\">...</div>里面的部分为音乐的控件以及进度条，图片等。
<img src=\"images/music/pictures/disc.png\" alt=\"\" class=\"disc\">为旋转的碟片
<img src=\"images/music/pictures/default.jpg\" alt=\"\" id=\"music_pic\">为音乐专辑图片
<span class=\"dot\"></span>为 碟片中间的小圆点
<div class=\"music_program\"><div id=\"prograss\"></div></div>
我们通过DIV嵌套一个div来作为音乐的进度条（图片红色部分），第一个div固定宽度，第二个div用%来设置宽度。
<p><span id=\"currenttime\">0:00</span><span>/</span><span id=\"duration\">0:00</span></p> 为时间显示 播放时长和总时长
<div class=\"music_menu\"> <span =\"backMusic()\"></span> <span =\"playPause()\" id=\"playbtn\"></span> <span =\"nextMusic()\"></span> </div>
控制菜单按钮 上一曲 播放/暂停 下一曲
下面是具体的css代码
@charset \"utf-8\";
/* CSS Document */
.music {
height: 150px;
width: 150px;
background:rgba(98,91,91,0.9);
}
.pic_div {
position: relative;
}
.dot {
width: 15px;
height: 15px;
background: #464545;
position: absolute;
border: 2px solid white;
border-radius: 50%;
top: 40px;
left: 85px;
}
.disc {
width: 100px;
position: absolute;
right: 5px;
transform: rotate(30deg);
}
#music_pic {
width: 100px;
position: absolute;
}
.music_program {
height: 2px;
width: 100px;
background: #555;
position: relative;
top: 100px;
}
.music_program div {
height: 100%;
width: 0%;
background: red;
}
.time {
width: 100px;
height: 20px;
position: relative;
top: 85px;
overflow: hide;
}
.time p {
padding-left: 33px;
}
.time p span:nth-of-type(2) {
padding: 0 5px;
}
.music_menu {
width: 150px;
height: 25px;
position: relative;
top: 85px;
}
.music_menu span {
width: 30px;
height: 25px;
display: inline-block;
cursor: pointer;
}
.music_menu span:nth-of-type(1) {
margin-left: 8px;
background: url(../images/music/pictures/back.png) no-repeat 7px;
}
.music_menu span:nth-of-type(2) {
margin-left: 14px;
background: url(../images/music/pictures/play.png) no-repeat 10px;
}
.music_menu span:nth-of-type(3) {
margin-left: 14px;
background: url(../images/music/pictures/forward.png) no-repeat 7px;
}
至于图片资源的话，博主是在站长素材下载的
链接🔗http://sc.chinaz.com/psd/130622574580.htm
接下来是最重要的Js部分！
// Document
var music=document.getElementById(\"mymusic\");
var prograss=document.getElementById(\"prograss\");
var curtxt=document.getElementById(\"currenttime\");
var duration=document.getElementById(\"duration\");
var music_pic=document.getElementById(\"music_pic\");
var deg=0;//旋转角度
var disctimer,prograsstimer;//碟片计时器,进度条计时器
var musicindex=0;//音乐索引
var musics=new Array(\"nicengshishaonian.mp3\",\"huanian.mp3\",\"chunfengshili.mp3\");//音乐数组
var music_pics=new Array(\"000002\",\"000001\",\"000001\");
//旋转碟片
var disc=document.getElementsByClassName(\'disc\');
//音乐时间显示
function curtime(txt,misic)
{
if(music.currentTime<10)
{
txt.innerHTML=\"0:0\"+Math.floor(music.currentTime);
}else
if(music.currentTime<60)
{
txt.innerHTML=\"0:\"+Math.floor(music.currentTime);
}
else
{
var minet=parseInt(music.currentTime/60);
var sec=music.currentTime-minet*60;
if(sec<10)
{
txt.innerHTML=\"0\"+minet+\":\"+\"0\"+parseInt(sec);
}
else
{
txt.innerHTML=\"0\"+minet+\":\"+parseInt(sec);
}
}
}
//播放暂停
function playPause()
{
var btn=document.getElementById(\"playbtn\");
if(music.paused)
{
music.play();
clearInterval(disctimer);//清除碟片的定时器
btn.style.background=\"url(images/music/pictures/pause.png) no-repeat 10px\";//改变播放暂停键的图标
disctimer=setInterval(function(){
disc[0].style.transform=\"rotate(\"+deg+\"deg)\";
deg+=5;
//每秒设置进度条长度
},100);
prograsstimer=setInterval(function(){
prograss.style.width=(music.currentTime)*100 / (music.duration)+\"%\";
curtime(curtxt,music);
if(music.currentTime>=music.duration-1)//片尾跳转下一曲
{
musicindex++;//音乐索引加一
if(musicindex>=musics.length)//如果音乐索引超过长度，将音乐索引清零
{
musicindex=0;
}
getMusic();
music.play();//重载音乐后进行播放
}
},1000);
}
else
{
music.pause();//停止音乐
btn.style.background=\"url(images/music/pictures/play.png) no-repeat 10px\";
clearInterval(disctimer);//清除碟片滚动的定时器
clearInterval(prograsstimer);//清除进度条的定时器
}
}
//下一曲
function nextMusic()
{
musicindex++;//音乐索引加一
if(musicindex>=musics.length)//如果音乐索引超过长度，将音乐索引清零
{
musicindex=0;
}
getMusic();
music.play();
}
//上一曲
function backMusic()
{
musicindex--;
if(musicindex<0)//如果索引小于0，将索引变为最大值
{
musicindex=musics.length-1;
}
getMusic();
music.play();
}
//读取音乐
function getMusic()
{
music.src=\"images/music/\"+musics[musicindex];//改变音乐的SRC
music_pic.src=\"images/music/pictures/\"+music_pics[musicindex]+\".jpg\";
if(music.readyState=\"complete\")
{
setTimeout(function(){
duration.innerHTML=parseInt(music.duration/60)+\":\"+parseInt(music.duration%60);
},1000);//一秒后读取音乐的总时长
}
}
window. =function(){
getMusic();
}
这次博主接受批评，对代码进行了大量的注释，方便大家阅读。
So 这里就不过多介绍了，这里用的三首歌都是博主喜欢的。
由于博主的网站不支持中文？！所以改成拼音了。
第一首是SHE的我曾是少年（喜欢SHE的基本都20+了吧），还有鹿先森乐队的两首。
emmm歌曲自己喜欢什么就加什么吧！
OK，这就是一个完整的播放器了。
继续阅读与本文标签相同的文章
-
阿里云注册域名使用教程
2026-05-19栏目： 教程
-
Docker容器实战(四) - 纷纷扰扰,终归尘土
2026-05-19栏目： 教程
-
阿里云自助注册申请的详细介绍
2026-05-19栏目： 教程
-
阿里云/万网CNAME配置的详细图文流程 新手必看教程
2026-05-19栏目： 教程
-
阿里云如何添加邮箱解析来实现收发邮件服务
2026-05-19栏目： 教程