JavaScript实现简单音乐播放器

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

阅读本文章你需要对HTML、CSS和爪哇岛描述语言有基本的了解。

话不多说，先上图。

这样看起来有点单调。

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

具体效果可以去我的个人网站查看http://tcxqq.top

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

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title document/title link rel='样式表href=' CSS/music。CSS '/headdyaudio src=' http : ' id=' my music '/audiovi class=' music ' div class=' pic _ div ' img src=' http : images/music/pictures/disc。png ' alt=' class=' disc ' img src=' http : images/disc '先建好基本的超文本标记语言框架。

audio src=' http : ' id='我的音乐'/audio为我们的音频' div class='音乐'./div里面的部分为音乐的控件以及进度条，图片等img src=' http :图像/音乐/图片/光盘。png ' alt=' class=' disc '为旋转的碟片img src=' http :图像/音乐/图片/默认。jpg ' alt=' id=' music _ pic '为音乐专辑图片span class='dot'/span为碟片中间的小圆点div class=' music _ program ' div id=' prograss '/div/div我们通过差异嵌套一个差异来作为音乐的进度条（图片红色部分),第一个差异固定宽度，第二个差异用%来设置宽度pspan id='当前时间' 0:00/span span//span span id='持续时间' 0:00/span/p为时间显示播放时长和总时长div class=' music _ menu ' span onClick=' back music()'/span onClick=' playPause()' id=' playn '/span span onClick=' next music()'/span/div控制菜单按钮上一曲播放/暂停下一曲

下面是具体的钢性铸铁代码

@ charset“utf-8”；/* CSS文档*/。音乐{高： 150像素宽度： 150像素；背景：rgba(98，91，91，0.9)；}.pic_div {位置：相对；}.点{ width: 15px高度： 15px背景： # 464545;绝对位置：border: 2px纯白色；边界半径： 50%;top: 40pxleft: 85px}。磁盘{宽度： 100像素绝对位置：右： 5px变压器： 旋转(30度);} # music _ pic { width: 100px绝对位置：}.音乐_节目{ height: 2px宽度： 100像素；背景： # 555;相对位置：top: 100px}。music _ program div {高度： 100%；宽度： 0%;背景：红色；}.时间{宽度： 100像素重量： 20像素相对位置：top: 85px飞越：隐藏；}.时间p { padding-left : 33px；}.第(2)类时间p span :n { padd : 0 5px}.音乐_菜单{ width: 150px高度： 25px相对位置：top: 85px}。music _ menu span { width: 30px高度： 25px显示器：内联块；光标：指针；}.music _ menu span : of-type(1){ margin-left : 8px；背景：网址(./图像/音乐/图片/背面。png)无重复7px}.music _ menu span : of-type(2){ margin-left : 14px；背景：网址(./图像/音乐/图片/播放。png)不重复10px}.music _ menu span : of-type(3){ margin-left : 14px；背景：网址(./图像/音乐/图片/转发。png)无重复7px}至于图片资源的话，博主是在站长素材下载的

链接http://sc.chinaz.com/psd/130622574580.htm

接下来是最重要的射流研究…部分！

//JavaScript文档var music=document。getelementbyid('我的音乐')；var prograss=文档。getelementbyid(' prograss ')；var curt XT=文档。getelementbyid('当前时间')；var duration=文档。getelementbyid(' duration ')；var music _ pic=document。getelementbyid(' music _ pic ')；var deg=0；//旋转角度var disctimer，prograstimer//碟片计时器，进度条计时器var音乐索引=0；//音乐索引var musics=new Array(' niceongshisonian。MP3 '，' huanian.mp3 '，'春风十里。MP3’)；//音乐数组var music_pics=new Array('000002 '，' 000001 '，' 000001 ')；//旋转碟片var disc=文档。getelementsbyclassname(' disc ')；//音乐时间显示函数curtime(txt，misic){ if(音乐。current time 10){ txt。innerhtml=' 0:0 '数学。地板(音乐。current time)；} else if(音乐。current time 60){ txt。innerhtml=' 0: '数学。地板(音乐。current time)；} else { var minet=parsent(音乐。当前时间/60)；var sec=音乐。当前时间-minet * 60；if(第10节){ txt。innerhtml=' 0 ' minet ' : ' 0 ' Parseint(秒);} else { txt。innerHTMl=' 0 ' minet ' : ' ParSeint(秒);} } } //播放暂停函数playPause(){ var BTN=document。getelementbyid(' playn ')；if(音乐。暂停){音乐。play()；clearInterval(光盘定时器)；//清除碟片的定时器btn.style.background='url(图像/音乐/图片/暂停。png)不重复10px '；//改变播放暂停键的图标光盘计时器=setInterval(函数(){光盘[0])。风格。transform=' rotate '(' deg ' deg ')'；deg=5；//每秒设置进度条长度},100);prograstimer=SetInterval(function(){ prograss }。风格。width=(音乐。当前时间)* 100/(音乐。持续时间)' % '；curtime(curtxt，音乐);if(音乐。当前时间=音乐。持续时间-1)//片尾跳转下一曲{ musicindex//音乐索引加一if(musicindex=musics.length)//如果音乐索引超过长度，将音乐索引清零{音乐索引=0；} GetMusic()；音乐。play()；//重载音乐后进行播放} },1000);} else {音乐。pause()；//停止音乐btn.style.background='url(图像/音乐/图片/play。png)不重复10px '；clearInterval(光盘定时器)；//清除碟片滚动的定时器clearInterval(prograstimer)；//清除进度条的定时器} } //下一曲函数nextMusic(){音乐索引；//音乐索引加一if(musicindex=musics.length)//如果音乐索引超过长度，将音乐索引清零{音乐索引=0；} GetMusic()；音乐。play()；} //上一曲函数back music(){ music index-；if(musicindex0)//如果索引小于0,将索引变为最大值{音乐索引=musics。长度-1；} GetMusic()；音乐。play()；} //读取音乐函数GetMusic(){ music。src=' http : images/music/' music[music index]；//改变音乐的SRC音乐_ pic。SRC=' http : images/music/pics/' music _ pics[music index]' .jpg '；if(音乐。ready state=' complete '){ setTimeout(函数(){ duration。innerhtml=parseInt(音乐。duration/60)' : ' parsent(音乐。持续时间`)；},1000);//一秒后读取音乐的总时长} }窗口。onload=function(){ GetMusic()；}这次博主接受批评，对代码进行了大量的注释，方便大家阅读。

因此这里就不过多介绍了，这里用的三首歌都是博主喜欢的。

由于博主的网站不支持中文！所以改成拼音了。

第一首是她的我曾是少年（喜欢她的基本都20 了吧),还有鹿先森乐队的两首。

歌曲自己喜欢什么就加什么吧！

好的，这就是一个完整的播放器了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。