html5模仿手机音乐播放器(添加音乐进度条和时长)

今天用html+js+cs写了一个类似手机音乐播放器的小东东，代码规范性不是很好，高手切勿喷，新手可以看看，其中歌词同步js代码参考了一个老师的代码。自己添加的是点击按钮页面滑动，和上一曲下一曲播放，和歌曲列表点击播放，还有进度条的同步，实时音乐时间和音乐总时长。高手勿喷，本人小白。原谅原谅。

以下是部分截图

下面是部分代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zzk的音乐播放器</title>
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"></head>
</head><body>
<div id="box"><div class="header"><img src="data:images/1.png" width="320" height="23"><div id="nav"><div id="page_up"></div><p id="name"></p><!-- <p  style="display:none">hhhhhh</p><p style="display:none">jgggggg</p>--><div id="page_under"></div></div></div><div id="content"><div id="contentbox"><div id="page1" ><p id="songone">天造地设-胖胖胖</p><p id="songtwo">光辉岁月-Beyond</p><p id="songthree">小幸运-谭嘉仪</p></div><div id="page2"><h3 id="singer">胖胖胖</h3><div id="im" class="im" ></div></div><div id="page3"></div></div></div><div class="pro"><P id="str">00:00</P><div class="tiao"><img src="data:images/进度条.png" width="300" height="20" id="jdt"></div><P id="end">00:00</P></div><div class="control"><div id="up"><img src="data:images/上一曲.png" width="50" height="50"></div><div id="play"></div><div id="next"><img src="data:images/下一曲.png" width="50" height="50"></div></div><audio src="" id="myMusic"></audio><textarea id="text" style="display:none"></textarea><textarea id="onesongtxt" style="display:none">[00:00.22]天造地设 - 胖胖胖[00:01.95]词：芮英杰[00:02.98]曲：芮英杰[00:04.03]编曲：尹一鸣[00:05.27]制作人：郑来君[00:21.84]曾几何时我们还不断计较着是非[00:26.31]也没想过最后谁会成为谁的谁[00:30.36]一个人睡[00:32.06]又一个人醉[00:34.01]彼此在单行道上慢慢枯萎[00:37.96]后来我成为了你命中的那个另类[00:42.29]你也成为了我心中的最珍贵[00:45.98]互相依偎[00:47.96]那四目相对[00:50.00]只为这一瞬间的美[00:52.59]就无悔[00:54.01]我愿意化作为你遮风挡雨的衣被[00:58.20]因为我们是那天造地设的一对[01:02.13]人生不完美[01:04.15]陪你去体会[01:06.13]用时间熬出幸福的滋味[01:10.03]我愿意化一颗树让你安稳的依偎[01:14.10]因为我们是要白头到老的一对[01:18.17]依着我的背[01:20.10]守着你的美[01:22.31]余生所有时间里[01:24.63]相知相随[01:43.66]回想当初我们总是会跟自己作对[01:48.21]也习惯了夜深时候不需要人陪[01:52.40]独自流泪[01:54.05]又各自后悔[01:55.98]去品尝爱情那孤单的滋味[02:00.11]后来的我们也总算是慢慢的学会[02:04.16]在余生的日子里互相定了那称谓[02:08.17]不再后退[02:09.96]去伴你入睡[02:11.89]只为那一辈子的美[02:14.49]就无悔[02:16.00]我愿意化作为你遮风挡雨的衣被[02:20.15]因为我们是那天造地设的一对[02:24.16]人生不完美[02:26.15]陪你去体会[02:28.16]用时间熬出幸福的滋味[02:31.96]我愿意化一颗树让你安稳的依偎[02:36.05]因为我们是要白头到老的一对[02:40.16]依着我的背[02:42.16]守着你的美[02:44.18]余生所有时间里[02:46.68]相知相随[02:51.40]我愿意化作为你遮风挡雨的衣被[02:55.60]因为我们是那天造地设的一对[02:59.76]人生不完美[03:01.69]陪你去体会[03:03.64]用时间熬出幸福的滋味[03:07.38]我愿意化一颗树让你安稳的依偎[03:11.62]因为我们是要白头到老的一对[03:15.59]依着我的背[03:17.54]守着你的美[03:19.65]余生所有时间里[03:22.47]相知相随[03:50.47]</textarea><textarea id="twosongtxt" style="display:none">[00:02.01]光辉岁月 - Beyond[00:28.96]钟声响起归家的讯号[00:33.28]在他生命里仿佛带点唏嘘[00:41.96]黑色肌肤给他的意义[00:46.44]是一生奉献肤色斗争中[00:55.05]年月把拥有变做逝去[01:01.41]疲倦的双眼带着期望[01:07.88]今天只有残留的躯壳[01:11.50]迎接光辉岁月[01:14.71]风雨中抱紧自由[01:20.84]一生经过彷徨的挣扎[01:24.49]自信可改变未来[01:27.73]问谁又能做到[01:43.51]可否不分肤色的界限[01:47.96]在这土地里 不分你我高低[01:56.55]缤纷色彩显出的美丽[02:00.97]是因它没有分开每种色彩[02:09.45]年月把拥有变做失去[02:15.77]疲倦的双眼带着期望[02:22.43]今天只有残留的躯壳 [02:26.02]迎接光辉岁月[02:29.34]风雨中抱紧自由[02:35.16]一生经过彷徨的挣扎[02:39.05]自信可改变未来[02:42.25]问谁又能做到[03:23.99]今天只有残留的躯壳 [03:27.65]迎接光辉岁月[03:30.86]风雨中抱紧自由[03:36.83]一生经过彷徨的挣扎[03:40.60]自信可改变未来[03:43.90]问谁又能做到[03:59.69]今天只有残留的躯壳 [04:03.21]迎接光辉岁月[04:06.60]风雨中抱紧自由[04:12.67]一生经过彷徨的挣扎[04:16.24]自信可改变未来[04:19.56]问谁又能做到[04:35.31]今天只有残留的躯壳 [04:38.89]迎接光辉岁月[04:42.11]风雨中抱紧自由[04:48.10]一生经过彷徨的挣扎[04:52.02]自信可改变未来[04:56.02]</textarea><textarea id="threesongtxt" style="display:none">[00:00.64]小幸运 - 谭嘉仪[00:02.15]词：徐世珍&吴辉福[00:03.70]曲：JerryC[00:04.14]编曲：JerryC[00:13.77]我听见雨滴落在青青草地[00:19.89]我听见远方下课钟声响起[00:25.74]可是我没有听见你的声音[00:30.74]认真 呼唤我姓名[00:37.92]爱上你的时候还不懂感情[00:44.12]离别了才觉得刻骨 铭心[00:50.09]为什么没有发现遇见了你[00:54.70]是生命最好的事情[01:00.30]也许当时忙着微笑和哭泣[01:06.36]忙着追逐天空中的流星[01:12.12]人理所当然的忘记[01:16.55]是谁风里雨里一直默默守护在原地[01:24.44]原来你是我最想留住的幸运[01:29.69]原来我们和爱情曾经靠得那么近[01:35.67]那为我对抗世界的决定[01:40.29]那陪我淋的雨[01:43.28]一幕幕都是你 一尘不染的真心[01:50.60]与你相遇 好幸运[01:53.96]可我已失去为你泪流满面的权利[01:59.98]但愿在我看不到的天际[02:04.63]你张开了双翼[02:07.68]遇见你的注定 她会有多幸运[02:27.28]青春是段跌跌撞撞的旅行[02:33.44]拥有着后知后觉的美丽[02:39.55]来不及感谢是你给我勇气[02:44.22]让我能做回我自己[02:49.72]也许当时忙着微笑和哭泣[02:55.55]忙着追逐天空中的流星[03:01.61]人理所当然的忘记[03:06.03]是谁风里雨里一直默默守护在原地[03:13.79]原来你是我最想留住的幸运[03:19.05]原来我们和爱情曾经靠得那么近[03:25.17]那为我对抗世界的决定[03:29.68]那陪我淋的雨[03:32.56]一幕幕都是你 一尘不染的真心[03:39.89]与你相遇 好幸运[03:43.40]可我已失去为你泪流满面的权利[03:49.32]但愿在我看不到的天际[03:53.97]你张开了双翼[03:56.98]遇见你的注定[04:00.47]Oh 她会有多幸运[04:18.00]</textarea>
</div>
</body>
<script type="text/javascript" src="js/index.js"></script>
</html>

上下曲按钮点击事件
// JavaScript Documentvar oPlay=document.getElementById("play");var oimg=document.getElementById("im");var myMusic=document.getElementById("myMusic");var onOff=true;//播放与暂停var up=document.getElementById("page_up");//上一级页面var under=document.getElementById("page_under");//下一级页面var con=document.getElementById("contentbox");var upnum=0;//判断页面索引值var num1=0;//判断页面索引值var text=document.getElementById("text");var songone=document.getElementById("songone");//获得songone的标签var songtwo=document.getElementById("songtwo");//获得songtwo的标签var songthree=document.getElementById("songthree");//获得songone的标签var onesongtxt=document.getElementById("onesongtxt").value;//获得文本内容var twosongtxt=document.getElementById("twosongtxt").value;var threesongtxt=document.getElementById("threesongtxt").value;//上一曲和下一曲事件var upindex=0;var underindex=0;var songnumup=document.getElementById("up");var songnumnext=document.getElementById("next");//按钮按住上一曲事件
songnumup.onclick=function(){upindex+=1;switch(upindex){case 1:songthree.onclick();break;case 2:songtwo.onclick();break;case 3:songone.onclick();break;default:upindex=1;songthree.onclick();break;}}//按钮按住下一曲事件
songnumnext.onclick=function(){underindex+=1;switch(underindex){case 1:songone.onclick();break;case 2:songtwo.onclick();break;case 3:songthree.onclick();break;default:underindex=1;songone.onclick();break;}}

//音乐列表点击事件
songone.onclick=function(){var name=document.getElementById("name");var singer=document.getElementById("singer");name.innerHTML="天造地设";singer.innerHTML="胖胖胖";oPage.style.top="0px";myMusic.src="music/胖胖胖-天造地设.mp3";//替换音乐text.innerHTML=onesongtxt;//替换文本oPlay.onclick();//调用播放按钮单击事件geci();//console.log(name);}songtwo.onclick=function(){var name=document.getElementById("name");var singer=document.getElementById("singer");name.innerHTML="光辉岁月";singer.innerHTML="Beyond";oPage.style.top="0px";myMusic.src="music/Beyond-光辉岁月.mp3";//替换音乐text.innerHTML=twosongtxt;//替换文本oPlay.onclick();//调用播放按钮单击事件geci();}
songthree.onclick=function(){var name=document.getElementById("name");var singer=document.getElementById("singer");name.innerHTML="小幸运";singer.innerHTML="谭嘉仪";oPage.style.top="0px";myMusic.src="music/谭嘉仪-小幸运.mp3";//替换音乐text.innerHTML=threesongtxt;//替换文本oPlay.onclick();//调用播放按钮单击事件geci();}

//播放和暂停
oPlay.onclick=function(){if(onOff){myMusic.play();onOff=false;oimg.className="im rotate";this.style.backgroundImage = "url('images/暂停.png')";}else{myMusic.pause();onOff=true;oimg.className="im";this.style.backgroundImage = "url('images/播放.png')";   }
}

/*按钮改变页面*///点击移到上一级页面
up.onclick=function(){num1+=1;switch(num1){case 1:con.style="margin-left:-640px;";break;case 2:con.style="margin-left:-320px;";break;case 3:con.style="margin-left:0px;";break;default:num1=1;con.style="margin-left:-640px;";break;}}//点击移到下一级页面
under.onclick=function(){upnum+=1;switch(upnum){case 1:con.style="margin-left:-320px;";break;case 2:con.style="margin-left:-640px;";break;case 3:con.style="margin-left:0px;";break;default:upnum=1;con.style="margin-left:-320px;";break;}}

这部分代码有些是参考一个网络老师的；
主要功能是获取音乐播放时间和歌词同步，监听音乐是否完成，音乐时长。
var aP;
var tiao=0;//存放音乐的总时长
var oPage=document.getElementById("page3");
function geci(){//歌词同步//1.获取歌词并添加到歌词盒子中var html='';var end=document.getElementById("end");//获取音乐播放总时间var arr=text.value.split("[");//让歌词从“[”开始切开//console.log(arr);var musictime=0;
for(var i=0;i<arr.length;i++){var lrc=arr[i].split("]");//从“]”处切开var times=lrc[0].split(".");//从"."处切开//console.log(lrc[0]);var time=times[0].split(":");//从“：”处切开//console.log(time);var cut=time[0]*60+time[1]*1;//把分钟化成秒钟并和秒钟加起来用于作为p标签的id名tiao=cut;//存放音乐的总时长musictime=time[0]+":"+time[1];//musictime="0"+(myMusic.duration)/60+":"+(myMusic.duration)%60;//console.log(musictime);if(lrc[1]){html+="<p id="+cut+">"+lrc[1]+"</p>";//给每个<p>标签添加id}}oPage.innerHTML=html;//console.log(html);aP=oPage.getElementsByTagName("p");end.innerHTML=musictime;
}//console.log(end);//console.log(aP);var n=0;//用来存放多少行//2.实现歌词同步//2.1监听歌曲播放的进度
myMusic.addEventListener("timeupdate",function(){//console.log(this.currentTime);var strat=document.getElementById("str");//获取音乐播放时间var jdt=document.getElementById("jdt");var curt=parseInt(this.currentTime); //获取歌曲的播放时间并取整数赋给curtstrat.innerHTML="0"+parseInt(curt/60)+":"+(curt%60);//console.log(strat.innerHTML);//console.log(this.currentTime);//console.log(jdt.style.marginLeft);if(document.getElementById(curt)){//把原先的歌词都变为原来的颜色和字号for(var i=0;i<aP.length;i++){aP[i].style.color="#ccc";aP[i].style.fontSize="12px";aP[i].style.fontWeight="none";}//再把当前的改为红色document.getElementById(curt).style.color="red";document.getElementById(curt).style.fontSize="16px";document.getElementById(curt).style.fontWeight="bold";if(aP[n+10] && aP[n+10].id==curt){oPage.style.top=-n*20+"px";n++;}}if(curt>=1){jdt.style.marginLeft=-293+curt*(270/tiao)+"px";}});/*监听歌曲是否播放完成*/
myMusic.addEventListener("ended",function(){var jdt=document.getElementById("jdt");jdt.style.marginLeft="-20px";oimg.className="im";onOff=true;oPage.style.top="0px";oPlay.style.backgroundImage = "url('images/播放.png')";
});

喜欢的点个赞，鼓励鼓励啊！哈哈。

下面是百度链接：

链接：https://pan.baidu.com/s/1nvKeXdf 密码：mzn7

html5模仿手机音乐播放器(添加音乐进度条和时长)相关推荐

php文件添加音乐播放器,window_win10系统自带Groove音乐播放器在哪？自带Groove音乐播放器添加音乐等功能的使用教程，　　播放器在哪？1 - phpStudy...
win10系统自带Groove音乐播放器在哪?自带Groove音乐播放器添加音乐等功能的使用教程播放器在哪? 1.点击桌面的左下端"开始菜单"符号,然后在右上角,找到" ...
php 在线调用音乐播放器,宅音乐播放器,HTML5网页播放器，带后台管理及API调用，使用thinkphp编写...
宅音乐播放器宅音乐播放器,HTML5网页播放器,集成后台管理及API调用,目前正在开发中,敬请关注技术栈后端:thinkphp 5.1 前端:layui 数据库:mysql 演示整合依赖安装包 ...
html中加入音乐播放器,HTML网页添加音乐播放器做背景音乐代码-标签audio
是 HTML 5 的一个新标签,定义声音,比如音乐或其他音频流. 调用格式: src="http://sc1.111ttt.com/2016/1/02/04/195040016323.mp3 ...
如何将免费的WordPress音乐播放器添加到您的网站
任何允许用户发现,购买,共享或下载音乐或其他声音效果的网站都应始终具有音频播放器. 每个用户都想预览音频或音乐,以确定是否要购买或共享. 为用户提供从网页本身播放此音频的选项,而无需下载任何内容,将带 ...
Python—实现本地音乐播放器(添加/播放/暂停/下一首/上一首/音量/打开超链接)
Python-实现本地音乐播放器(添加/播放/暂停/下一首/上一首/音量/打开超链接) 1.样例 2.分析 1.播放器界面 2.功能 2.1播放器界面 button:添加/播放/暂停/下一首/上一首 ...
将音乐播放器添加到WordPress网站
考虑向您的网站添加大量音频? 还是只是一首歌曲的剪辑? 使用WordPress时,有数十种不同的方法可将音乐或音频播放器添加到您的网站. 选择最适合您的选择可能很困难. 在本文中,我们将讨论一些解决方 ...
Android获取第三方音乐播放器的音乐信息
最近在做Android手机获取第三方音乐播放器的音乐信息.一开始头疼的很,采集第三方的信息太难了,后面看了一遍博文是关于怎么监听系统的音乐播放信息,发现在播放下一首音乐的时候会发送广播,广播会包含下一 ...
使用android studio时酷狗音乐,17 Android Studio开发实战：音乐播放器——浪花音乐...
手机上的多媒体内容讲究声情并茂.悦目且悦耳,这样才能让用户的感官得到最大享受.影视播放器由于存在视频自身的画面,反而限制了开发者的施展空间:而音乐播放器允许定制播放画面,开发者有足够空间施展拳脚.本节 ...
iOS开发之网络音乐播放器(SC音乐)（二）
iOS开发之网络音乐播放器(SC音乐)(二) 前言 iOS开发之网络音乐播放器(SC音乐)(一)已经介绍完播放控制.音乐数据获取解析.歌词显示等.本文在上文的基础上介绍锁屏播放设置,后台播放设置,手势 ...

html5模仿手机音乐播放器(添加音乐进度条和时长)

html5模仿手机音乐播放器(添加音乐进度条和时长)相关推荐

最新文章

热门文章