今天用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="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="images/进度条.png" width="300" height="20" id="jdt">
</div>
<P id="end">00:00</P>
</div>
<div class="control">
<div id="up"><img src="images/上一曲.png" width="50" height="50"></div>
<div id="play"></div>
<div id="next"><img src="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 Document
var 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); //获取歌曲的播放时间并取整数赋给curt
strat.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
1908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
