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 了吧),还有鹿先森乐队的两首。
歌曲自己喜欢什么就加什么吧!
好的,这就是一个完整的播放器了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:JavaScript实现简单音乐播放器是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。