H5音乐播放器
前段时间无聊用JavaScript基于H5的audio写一个音乐播放器。误喷，技术有限，文笔不好之处希望各位大神海涵。
1、HTML代码：
<div id="music" class="music"> <div id="lyric_div"> <div id="lyric_tit"></div> <div id="lyric_con"> <div id="lyric_txt"> <p>演唱者：xxx</p> <p>编辑：果果</p> <p>qq：123456789</p> </div> </div> </div> <div id="progress"> <div id="time_update"> <time>00:00</time> </div> <div id="progress_bar"> <div id="progress_cube"></div> </div> <div id="time_all"> <time>00:00</time> </div> </div> <div id="bt_div"> <input type="button" value="上一首" id="up_song"> <input type="button" value="播放" id="play_stop"> <input type="button" value="下一首" id="next_song"> <audio id="audio" src="song/赵照-你就是我最想要的丫头.mp3"></audio> </div> </div> <p id="p"></p>
2、JavaScprit代码 附上 带时间轴的歌曲的歌词的查找地址 http://www.cnlyric.com ，至于音频去QQ音乐下载就好了！！：
//http://www.cnlyric.com 带时间轴的歌曲的歌词的查找地址 var lyric = [{\'name\':\'你就是我最想要的丫头\',\'img\':\'\',\'audio_src\':\'song/赵照-你就是我最想要的丫头.mp3\',\'content\':\'[00:00.00] 你就是我最想要的丫头[00:04.00] 演唱：赵照[00:08.00] 歌词编辑：果果[00:12.00] QQ:190567797[00:16.00] zhangxiang[00:22.38] 微风轻轻吹着你散开的发[00:26.55] 忍不住想对你说心里的话[00:30.81] 多少次鼓起勇气话又难开口[00:35.38] 想想你的温柔总是低着头[00:39.72] 多希望天边晚霞一直燃烧[00:44.33] 永远灿烂别落下[00:48.50] 你浅笑的脸微闭的双眼[00:53.18] 我陷入了深深的迷恋[00:59.82] 有没有最纯真的童[01:04.17] 你就是我快乐的源头[01:08.81] 为你伤心 为你忧愁[01:13.26] 你就是我最想要的丫头[01:17.51] 有没有最幸福的生活[01:21.87] 你就是我甜蜜的拥有[01:26.59] 为你祈祷 为你逗留[01:30.95] 你就是我最想要的丫头[01:53.69] 微风轻轻吹着你散开的发[01:57.78] 忍不住想对你说心里的话[02:01.96] 多少次鼓起勇气话又难开口[02:06.59] 想想你的温柔总是低着头[02:10.93] 多希望天边晚霞一直燃烧[02:15.51] 永远灿烂别落下[02:19.80] 你浅笑的脸微闭的双眼[02:24.49] 我陷入了深深的迷恋[02:31.06] 有没有最纯真的童话[02:35.33] 你就是我快乐的源头[02:39.88] 为你伤心 为你忧愁[02:44.58] 你就是我最想要的丫头[02:48.62] 有没有最幸福的生活[02:53.22] 你就是我甜蜜的拥有[02:57.86] 为你祈祷 为你逗留[03:02.34] 你就是我最想要的丫头[03:06.88] 有没有最美丽的图画[03:11.06] 你站在夕阳下面挥着手[03:15.68] 为你伤心 为你忧愁[03:19.90] 你就是我最想要的丫头[03:24.12] 有没有最美好的生活[03:28.65] 我愿这样陪你到永久[03:33.42] 你的善良 你的温柔[03:37.74] 你就是我最想要的丫头[03:42.78] 你就是我最想要的丫头[03:46.84] 你就是我最想要的丫头\'} ,{\'name\':"笑忘书",\'img\':\'img/photo1.jpg\',\'audio_src\':\'song/王菲-笑忘书.mp3\',\'content\':\'[00:00.00][00:01.00]笑忘书(国)[00:03.00]王菲[00:05.00][00:12.00]没 没有蜡烛 就不用勉强庆祝[00:17.00]没 没想到答案 就不用寻找题目[00:23.00]没 没有退路 问我也不要思路[00:29.00]没 没人去仰慕 那我就继续忙碌[00:34.00]lalala 思前想后[00:37.00]差一点忘记了怎么投诉[00:40.00]lalala 从此以后 不要犯同一个错误[00:46.00]将这样的感触 写一封情书送给我自己[00:51.00]感动得要哭 很久没哭[00:54.00]不失为天大的幸福 将这一份礼物[00:59.00]这一封情书 给自己祝福[01:02.00]可以不在乎 才能对别人在乎[01:20.00]有 一点帮助 就可以对谁倾诉[01:26.00]有 一个人保护 就不用自我保护[01:32.00]有 一点满足 就准备如何结束[01:37.00]有 一点点领悟 就可以往后回顾01:43.00]lalala 思前想后[01:46.00]差一点忘记了怎么投诉[01:49.00]lalala 从此以后 不要犯同一个错误[01:54.00]将这样的感触 写一封情书送给我自己[01:59.00]感动得要哭 很久没哭[02:03.00]不失为天大的幸福 将这一份礼物[02:08.00]这一封情书 给自己祝福[02:11.00]可以不在乎 才能对别人在乎[02:43.00]Lalalala....... Lalalala.......[02:55.00]从开始哭着忌妒 变成了笑着羡慕[03:00.00]时间是怎么样把握了我皮肤[03:03.00]只有我自己最清楚[03:06.00]将这样的感触 写一封情书送给我自己[03:11.00]感动得要哭 很久没哭[03:15.00]不失为天大的幸福 将这一份礼物[03:19.00]这一封情书 给自己祝福[03:22.00]可以不在乎 才能对别人在乎[03:28.00]让我亲手 将这样的感触[03:31.00]写一封情书送给我自己[03:34.00]感动得要哭 很久没哭[03:37.00]不失为天大的幸福[03:39.00]就好好将这一份礼物[03:42.00]这一封情书 给自己祝福[03:45.00]可以不在乎 才能对别人在乎\'}]; function $(id){ return document.getElementById(id); } function init(){ //歌曲名 lyric_tit = $(\'lyric_tit\'); //歌词外围div lyric_con = $(\'lyric_con\'); //包裹歌词的div lyric_txt = $(\'lyric_txt\'); //放置实时获取播放时间的容器 time_update = $(\'time_update\').getElementsByTagName(\'time\')[0]; //放置歌曲总时间/剩余多少时间的容器 time_all = $(\'time_all\').getElementsByTagName(\'time\')[0]; //进度条 白色 progress_bar = $(\'progress_bar\'); //实时变化的进度条 红色 progress_cube = $(\'progress_cube\'); //上一首 up_song = $(\'up_song\'); //播放、暂停 play_stop = $(\'play_stop\'); //下一首 next_song = $(\'next_song\'); //音频 audio = $(\'audio\'); //测试的p节点 p = $(\'p\'); //初始化 取数组第一个 audioIndex = 0; //音频初始化 audioInit(); //歌词初始化 lyric_str(); //播放 暂停 play_stop.addEventListener(\'click\',play_stop_lick,false); //上一首 up_song.addEventListener(\'click\',up_song_lick,false); //下一首 next_song.addEventListener(\'click\',next_song_lick,false) //歌曲时间每变化就触发 audio.addEventListener(\'timeupdate\',audio_timeupdate,false); //进度条单击事件 根据点击进度条的位置设置歌曲的播放时间，同时改变歌词。 progress_bar.addEventListener(\'click\',progress_bar_click,false); } /* * 点击进度条某一位置触发事件，并根据进度条的位置改变歌曲的播放时间 和 歌词的样式变化 */ function progress_bar_click(e){ var e = e ? e : event; //获取坐标 var pageX = e.pageX; //获取白色进度条的left值 var progress_bar_Left = progress_bar.offsetLeft; //计算进度条的百分比 var n = (pageX - progress_bar_Left)/progress_bar.offsetWidth; //获取歌曲的总时间 var audio_duration = audio.duration; /* *根据进度条的百分比改变音频的播放时间 *公式 = 鼠标点击的位置到div最左边的位置宽度/div的总宽度*音频的总时间 */ audio.currentTime = n*audio_duration; //获取音频播放的时间 var audio_currentTime = audio.currentTime //获取到音频播放的秒数 var num = parseInt(audio_currentTime); //获取到当前的 歌词节点 var objElem_p = elem_p(num) //歌词的切换 样式调整 lyric_txt_p(objElem_p); } /* * 点击进度条时寻找指定的歌曲词的节点。 * 递归去找直到找到为止。 */ function elem_p(num){ var boj_p = $(\'lyric\'+num); if(!boj_p){ return elem_p(num-1); }else{ return boj_p; } return \'\'; } /** *根据音频播放时间实时的改变进度条 */ function audio_timeupdate(){ //获取音频的总时间 以秒为单位 var audio_duration = audio.duration; //获取音频的播放时间 以秒为单位 var audio_currentTime = audio.currentTime //歌曲自动播放完就切换下一首 if(audio_duration == audio_currentTime){ next_song_lick(); } //计算视频播放的百分比 var n = audio_currentTime/audio_duration; //根据视频播放的百分比改变进度条 公式 = 播放时间/总时间*进度条的宽度 progress_cube.style.width = n*progress_bar.offsetWidth + \'px\'; //获取到音频播放的秒数 var num = parseInt(audio_currentTime); //将播放的事件显示到页面 format()转换为分秒格式 time_update.innerHTML = format(num); //剩余多少事件 并且显示到页面 var sum_num = parseInt(audio_duration)-parseInt(audio_currentTime); if(!isNaN(sum_num)){ time_all.innerHTML = format(sum_num); }else{ time_all.innerHTML = \'00:00\'; } //获取到当前唱到的这一句歌词 var boj_p = $(\'lyric\'+num); //改变样式 lyric_txt_p(boj_p); } /** *歌词的切换 样式调整 */ function lyric_txt_p(obj){ //获取所有的歌词节点 var lyric_p = lyric_txt.getElementsByTagName(\'p\'); //循环所有的节点并且为节点index赋值 注意不给index赋值的情况下index为undefined; for(var i = 0; i < lyric_p.length;i++){ lyric_p[i].index = i; } //当前节点不为空的情况下，就改变样式 if(obj){ //给当前节点之前已经唱过的歌词赋值样式。 for(var j = 0;j < obj.index; j++){ lyric_p[j].className = \'played\'; } //防止进度条往回点 所以index大于当前歌词节点的节点样式全部赋值为空 for(var j = obj.index;j < lyric_p.length; j++){ lyric_p[j].className = \'\'; } //给当前歌词赋值样式 obj.className = \'played2\' //改变歌词的样式 歌词外围div的宽度/2-当前歌词节点的top值 lyric_txt.style.top = lyric_con.offsetWidth/2 - obj.offsetTop +\'px\'; } } //上一首 function up_song_lick(){ //audioIndex 默认为0 audioIndex --; //当歌曲已经是第一条的时候 把歌曲切换到最后一条 if(audioIndex < 0){ audioIndex = lyric.length-1; } //初始化音频 audioInit(); //播放 暂停 play_stop_lick(); } // 下一首 function next_song_lick(){ audioIndex ++; //当歌曲已经是最后一条的时候 切换到第一条歌曲 if(audioIndex > lyric.length-1){ audioIndex = 0; } audioInit(); play_stop_lick(); } //播放 function play_stop_lick(){ //audio.paused 暂停时就为true if(audio.paused){ //播放 audio.play(); play_stop.value = \'暂停\'; }else{ //暂停 audio.pause(); play_stop.value = \'播放\'; } } //解析歌词 function lyric_str(){ //获取当前歌曲的歌词 var str = lyric[audioIndex].content; //alert(str); var html = \'\'; var arr = str.split(\'[\'); for(var i = 0 ; i < arr.length; i++ ){ var arr2 = arr[i].split(\']\'); //歌词 var text = arr2[1]; //歌词对应的时间 var time = arr2[0].split(\'.\'); //毫秒 var ms = time[1]; //获取分 秒 var time2 = time[0].split(\':\'); //分 var m = time2[0]; //秒 var s = time2[1]; var num_s = (parseInt(m)*60)+parseInt(s); //拼接歌词 if(text){ html += \'<p id="lyric\'+ num_s +\'">\'+ text +\'</p>\' } } lyric_txt.innerHTML = html; } //初始化 function audioInit(){ //将进度条的宽度初始化为0 红色的 progress_cube.style.width = 0 + \'px\'; //获取歌曲的一个总时间 if(!isNaN(audio.duration)){ time_all.innerHTML = format(audio.duration); }else{ time_all.innerHTML = \'00:00\' } //获取当前歌曲的名称 lyric_tit.innerHTML = lyric[audioIndex].name; //获取当前歌曲的路径 audio.src = lyric[audioIndex].audio_src; //歌词解析 lyric_str(); } function format(num){ var num = parseInt(num); //得到的是分钟 var m = parseInt(num/60); //得到的是秒 var s = parseInt(num%60); //返回拼接的时间 return format_s(m)+\':\'+ format_s(s) } //修改歌曲时间格式 function format_s(num){ if(num < 10){ return \'0\'+num; } return num; } window.addEventListener(\'load\',init,false);
3、CSS代码：
#music{ width:400px; height:600px; margin:auto; text-align:center; background-color:#999; } #lyric_div{ width:400px; height:500px; } #lyric_tit{ color:#F00; font:bold; height:30px; line-height:30px; } #lyric_con{ overflow:hidden; height:470px; position:relative; } #lyric_txt{ position:absolute; width:400px; top:0px; left:0px; } #bt_div{ width:400px; height:50px; line-height:50px; } #progress{ width:400px; height:50px; line-height:50px; } #time_update{ float:left; } #time_all{ float:left; } #time_update,#time_all{ width:54px; } #progress_bar{ float:left; width:290px; height:3px; background-color:#FFF; margin-top:24px; cursor:pointer; } #progress_cube{ height:3px; background-color:#F00; } #lyric_txt p.played{ color:#FF0; } #lyric_txt p.played2{ color:#FF0; font-weight:700; font-size:20px; }
至此 以上是完整的代码，由于MP3文件没有办法上传，所以请自己到QQ音乐下载。
版权声明：本文为Faith-zhang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。