HTML+纯JS制作音乐播放器

该篇文章会教你通过JavaScript制作一个简单的音乐播放器。包括播放、暂停、上一曲和下一曲。

阅读本文章你需要对HTML、CSS和Javascript有基本的了解。

话不多说，先上图。

emmm。。。这样看起来有点单调。

我们把它加在网页上试试。

具体效果可以去我的个人网站查看http://tcxqq.top http://www.youngam.cn/hi/music.html

好了，成品已经展示了接下来，开干吧！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link 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 onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
  </div>
</div>
</body>
<script src="js/music.js"></script>
</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 onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="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;
}

至于图片资源的话，博主是在站长素材下载的

链接