JavaScript实现简单音乐播放器
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript实现简单⾳乐播放器
该篇⽂章会教你通过JavaScript制作⼀个简单的⾳乐播放器。
包括播放、暂停、上⼀曲和下⼀曲。
阅读本⽂章你需要对HTML、CSS和Javascript有基本的了解。
话不多说，先上图。
这样看起来有点单调。
我们把它加在⽹页上试试。
好了，成品已经展⽰了接下来，开⼲吧！
<!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;
}
⾄于图⽚资源的话，博主是在站长素材下载的
接下来是最重要的Js部分！
// JavaScript 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.onload=function(){
getMusic();
}
这次博主接受批评，对代码进⾏了⼤量的注释，⽅便⼤家阅读。
So 这⾥就不过多介绍了，这⾥⽤的三⾸歌都是博主喜欢的。
由于博主的⽹站不⽀持中⽂！所以改成拼⾳了。
第⼀⾸是SHE的我曾是少年（喜欢SHE的基本都20+了吧），还有⿅先森乐队的两⾸。
歌曲⾃⼰喜欢什么就加什么吧！
OK，这就是⼀个完整的播放器了。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。