JavaScript如何实现简单音乐播放器 - 行业资讯 - 肥雀云

　　介绍

小编这次要给大家分享的是JavaScript如何实现简单音乐播放器,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

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

话不多说,先上图。

这样看起来有点单调。

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

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

好了,成品已经展示了接下来,开干吧!

& lt; !DOCTYPE html> 　　& lt; html lang=癳n"祝辞　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞　　& lt; title> Document 　　& lt;链接rel=皊tylesheet"href=https://www.yisu.com/zixun/癱ss/music.css”> 　　头　　<身体> 　　<音频src=" id="而myspace "> 　　

%20 <跨类="点"> 　　

0:00 / 0:00

@charset“utf-8";/* */CSS文档　　音乐的{ 　　身高:150 px; 　　宽度:150 px; 　　背景:rgba (98、91、91、0.9); 　　} 　　.pic_div { 　　位置:相对; 　　} 　　. dot { 　　宽度:15 px; 　　高度:15 px; 　　背景:# 464545; 　　位置:绝对的; 　　边界:2 px白色固体; 　　这个特性:50%; 　　上图:40像素; 　　左:85 px; 　　} 　　.disc { 　　宽度:100 px; 　　位置:绝对的; 　　右:5 px; 　　变换:旋转(30度); 　　} 　　# music_pic { 　　宽度:100 px; 　　位置:绝对的; 　　} 　　.music_program { 　　高度:2 px; 　　宽度:100 px; 　　背景:# 555; 　　位置:相对; 　　前:100像素; 　　} 　　.music_program div { 　　高度:100%; 　　宽度:0%; 　　背景:红色; 　　} 　　.time { 　　宽度:100 px; 　　高度:20 px; 　　位置:相对; 　　前:85像素; 　　溢出:隐藏; 　　} 　　.time p { 　　padding-left: 33 px; 　　} 　　.time p跨度:nth-of-type (2) { 　　填充:0 5 px; 　　} 　　.music_menu { 　　宽度:150 px; 　　高度:25 px; 　　位置:相对; 　　前:85像素; 　　} 　　.music_menu跨度{ 　　宽度:30 px; 　　高度:25 px; 　　显示:inline-block; 　　光标:指针; 　　} 　　.music_menu跨度:nth-of-type (1) { 　　margin-left: 8 px; 　　背景:url(. ./图片/音乐/图片/back.png)没有重演7 px; 　　} 　　.music_menu跨度:nth-of-type (2) { 　　margin-left: 14 px; 　　背景:url(. ./图片/音乐/图片/play.png)没有重演10 px; 　　} 　　.music_menu跨度:nth-of-type (3) { 　　margin-left: 14 px; 　　背景:url(. ./图片/音乐/图片/forward.png)没有重演7 px; 　　}

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

链接,# 128279;http://sc.chinaz.com/psd/130622574580.htm

接下来是最重要的Js部分!

//JavaScript文件
　　var音乐=. getelementbyid (“mymusic");
　　var prograss=. getelementbyid (“prograss");
　　var curtxt=. getelementbyid (“currenttime");
　　var时间=. getelementbyid (“duration");
　　var music_pic=. getelementbyid (“music_pic");
　　var度=0;//旋转角度
　　var disctimer prograsstimer;//碟片计时器,进度条计时器
　　var musicindex=0;//音乐索引
　　var音乐=new Array (“nicengshishaonian.mp3",“huanian.mp3",“chunfengshili.mp3");//音乐数组
　　var music_pics=new Array (“000002”,“000001”,“000001”);//旋转碟片
　　var盘=document.getElementsByClassName(& # 39;盘# 39;);//音乐时间显示
　　函数curtime (txt、阅读)
　　{
　　如果(music.currentTime<10)
　　{
　　txt.innerHTML=?:0" + Math.floor (music.currentTime);
　　其他}
　　如果(music.currentTime<60)
　　{
　　txt.innerHTML=?:“+ Math.floor (music.currentTime);
　　}
　　其他的
　　{
　　var minet=方法(music.currentTime/60);
　　var秒=music.currentTime-minet * 60;
　　如果(secJavaScript如何实现简单音乐播放器