JavaScript实现简单音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器。包括播放、暂停、上一曲和下一曲。
阅读本文章你需要对HTML、CSS和Javascript有基本的了解。
话不多说，先上图。
这样看起来有点单调。
我们把它加在网页上试试。
具体效果可以去我的个人网站查看http://tcxqq.top
好了，成品已经展示了接下来，开干吧！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | @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; } |
至于图片资源的话，博主是在站长素材下载的
链接
上一篇：个人出租用于居住房屋的税收负担率
下一篇：js实现搜索栏效果
