HTML5 javascript实现音乐播放器
准备毕业了，感觉好多东西都没学会，太多太多想学的知识，有种求知若渴的状态。
四年的大学就剩下一个多月了，无论将来多么困难，这条路是自己选的，走就要走的精彩！
自学了一点javascript、php，做了一个web app，我将其取名为Youlike随心听，就如我的信念一样，自己的人生自己掌控，做自己喜欢的事情，自由的生活！
使用javascript实现音乐播放操作，实现歌词解析，并动态放映歌词效果。
1 $(function(){ 2 //初始化测试 3 //alert(); 4 //开启歌词动态监听 5 scrollBar(); 6 //播放结束后监听 7 Player().addEventListener('ended', function () { 8 //alert('over'); 9 nextMusic(); 10 }); 11 $("#play").bind("click", function() { 12 // current_lyric = data.next_mid; 13 if(Player().paused){ 14 15 //修改按钮图标 16 //$("#play").attr("src","../images/on_play_but.png"); 17 $("#play").removeClass("play"); 18 $("#play").addClass("onplay"); 19 20 if(Player().src == ""){ 21 //获取歌曲文本信息 22 playMusic(); 23 }else{ 24 Player().play(); 25 } 26 //playMusic(); 27 //Player() 28 }else{ 29 30 $("#play").removeClass("onplay"); 31 $("#play").addClass("play"); 32 Player().pause(); 33 } 34 }); 35 36 $("#next").bind("click",function(){ 37 nextMusic(); 38 }); 39 $("#back").bind("click",function(){ 40 //nextMusic(); 41 if(play_history_position == 0){ 42 return ; 43 } 44 }); 45 46 47 $("#play").removeClass("play"); 48 $("#play").addClass("onplay"); 49 playMusic(); 50 //////////////非播放器脚本/////////////// 51 $(".nav ul li").bind("click",function(){ 52 location.href=$(this).find("a").attr("href"); 53 }); 54 55 }); 56 //var 全局 57 var played = 0; 58 var play_history_list = []; 59 var play_history_position = 0; 60 61 62 63 64 65 //获取播放器audio对象 66 function Player(){ 67 var player = document.getElementById("MyPlayer"); 68 return player; 69 } 70 /**************************** 音乐播放控制 start ****************************/ 71 function nextMusic(){ 72 73 $.post(root_url + "/index.php/Home/Index/find_music",{channel:current_play_music_channel},function(data){ 74 //更改当前曲目标识符 75 //alert(""); 76 current_play_music_mid = data.mid; 77 //加载歌词前进行清空 78 lyric_time = []; 79 lyric_text = []; 80 lyric_flag = 0; 81 loadLyric(); 82 //设置曲目信息 83 $("#channel_name").html(current_play_music_channel); 84 //专辑 85 //$("#album_image").attr("src",""+ root_url+"/download.php?type=image&mid="+data.mid +""); 86 var album_canvas = document.getElementById("album_canvas"); 87 var context = album_canvas.getContext("2d"); 88 var image = new Image(); 89 image.src = ""+ root_url+"/download.php?type=image&mid="+data.mid +""; 90 //image.src = public_url+"/images/205798.jpg"; 91 image.onload = function(){ 92 context.drawImage(image,0,0,300,150); 93 } 94 95 //曲目名称 96 $("#music_name").html("《"+data.real_name+"》"); 97 //演唱者 98 $("#music_singer").html(data.singer); 99 Player().src = root_url+"/download.php?type=music&mid="+data.mid; 100 //播放状态 101 Player().play(); 102 //alert(data); 103 },"json"); 104 } 105 function playMusic(){ 106 //alert(current_play_music_channel); 107 if(current_play_music_channel == null || current_play_music_channel == ""){ 108 current_play_music_channel = "随便听听"; 109 } 110 if(played == 0){ 111 mPlay(); 112 played = 1; 113 } 114 if (Player().src == "") { 115 $.post(root_url + "/index.php/Home/Index/find_music",{channel:current_play_music_channel},function(data){ 116 //更改当前曲目标识符 117 //alert(""); 118 current_play_music_mid = data.mid; 119 //加载歌词前进行清空 120 lyric_time = []; 121 lyric_text = []; 122 lyric_flag = 0; 123 loadLyric(); 124 //设置曲目信息 125 $("#channel_name").html(current_play_music_channel); 126 //专辑 127 //$("#album_image").attr("src",""+ root_url+"/download.php?type=image&mid="+data.mid +""); 128 var album_canvas = document.getElementById("album_canvas"); 129 var context = album_canvas.getContext("2d"); 130 var image = new Image(); 131 //image.src = ""+ root_url+"/download.php?type=image&mid="+data.mid +""; 132 image.src = public_url+"/images/205798.jpg"; 133 //context.drawImage(image,0,0); 134 image.onload = function(){ 135 context.drawImage(image,0,0,300,150); 136 } 137 //曲目名称 138 $("#music_name").html("《"+data.real_name+"》"); 139 //演唱者 140 $("#music_singer").html(data.singer); 141 Player().src = root_url+"/download.php?type=music&mid="+data.mid; 142 //播放状态 143 Player().addEventListener("canplay", function(){ 144 Player().play(); 145 }); 146 /*Player().play();*/ 147 //alert(data); 148 },"json"); 149 150 }else{ 151 Player().pause(); 152 } 153 } 154 155 /**************************** 音乐播放控制 end ****************************/ 156 157 /**************************** 歌词动态效果实现 start *****************************/ 158 //歌词播放进度标识 159 var scrollh = 0; 160 161 //每行的高度20px; 162 function display_lyric(time){ 163 164 //清空容器 165 /*if(){ 166 167 }*/ 168 $("#lyric_div").html(""); 169 //歌词有两种状态 170 //1.播放过程中，歌词不在最后一行 171 //2.播放过程中，歌词到最后一行 172 if(time < lyric_time[lyric_time.length-1]){ 173 for(var k=0 ; k<lyric_text.length ; k++){ 174 if(lyric_time[k] <= time && time < lyric_time[k+1]){ 175 scrollh = k*22; 176 $("#lyric_div").html($("#lyric_div").html() + "<font style='color:#eae211;font-size:22px;'>" + lyric_text[k] + "<font><br/>"); 177 }else{ 178 $("#lyric_div").html($("#lyric_div").html() + lyric_text[k] + "<br/>"); 179 } 180 } 181 }else{ 182 for(var j=0 ; j<lyric_text.length-1 ; j++) 183 $("#lyric_div").html($("#lyric_div").html() + lyric_text[j] + "<br/>"); 184 $("#lyric_div").html($("#lyric_div").html() + "<font style='color:red;'>" + lyric_text[lyric_text.length-1] + "<font><br/>"); 185 } 186 187 188 } 189 //根据歌词进度，，动态自动滚动行号 190 function scrollBar()//设置滚动条的滚动 191 { 192 //判断进度 193 if(document.getElementById("lyric_div").scrollTop<=scrollh-50) 194 //调整行号 195 document.getElementById("lyric_div").scrollTop+=1; 196 if(document.getElementById("lyric_div").scrollTop>=scrollh+50) 197 document.getElementById("lyric_div").scrollTop-=1; 198 //调整跨度 199 window.setTimeout("scrollBar()",50); 200 } 201 202 function mPlay()//开始播放 203 { 204 var ms_100 = parseInt(getSeconds()); 205 if (isNaN(ms_100)) 206 display_lyric(0); 207 else 208 display_lyric(ms_100); 209 window.setTimeout("mPlay()", 100) 210 } 211 function getSeconds()//得到当前播放器播放位置的时间 212 { 213 var t = Player().currentTime; 214 var s = parseFloat(t) * 100.0; 215 return parseInt(s); 216 } 217 /**************************** 歌词动态效果实现 end *****************************/ 218 219 220 /***************************歌词解析 start ***************************/ 221 var lyric_time = []; //保存歌词的时间整数 100ms级； 222 var lyric_text = []; //保存对应上述时间的歌词文本信息； 223 var lyric_flag = 0; //歌词保存位置标识 224 225 //ajax访问获取歌词 226 //url : 227 //参数 : mid 228 //响应函数 : 229 function loadLyric(){ 230 $.post(root_url+"/download.php",{type:"lyric",mid:current_play_music_mid},function(data){ 231 //alert(data); 232 parseLyric(data); 233 },"text"); 234 /*alert($.ajax({ 235 url: "__ROOT__/download.php", 236 async: false 237 }).responseText);*/ 238 } 239 240 //歌词分解 241 function parseLyric(lyric_string){ 242 //alert(lyric_string); 243 //按行进行划分 244 var row_string = lyric_string.split("\n"); 245 246 //正则表达式 247 var regular_context_start = /^.\d.+/; 248 249 //歌词内容开始下标 250 var lyric_context_index = 0; 251 252 //遍历寻找歌词内容开始部分 253 for(var i=0 ; i<row_string.length ; i++){ 254 if(regular_context_start.test(row_string[i])){ //匹配成功 255 lyric_context_index = i; 256 break; 257 } 258 } 259 //alert("0"); 260 //歌词数据转换并存入数组 261 for(var k=lyric_context_index ; k<row_string.length ; k++){ 262 textFormat(row_string[k]); 263 } 264 //alert("1"); 265 //歌词内容数组排序 266 sortLyricArray(); 267 //alert("2"); 268 //将歌词渲染到容器内 269 var lyric_list_string = ""; 270 for(var n=0 ; n<lyric_flag; n++){ 271 lyric_list_string = lyric_list_string + lyric_text[n] + "<br/>"; 272 } 273 $("#lyric_div").html(lyric_list_string); 274 } 275 276 //歌词数据转换类 277 //[00:12.64]我有必要相信地球也能是个可爱迪士尼 278 //1.判断时间标识符个数N 279 //2.时间转换 [00:12.64] => 1264 280 //3.歌词内容部分写入 281 function textFormat(text){ 282 //0 验证 283 if(text == null || text == ""){ 284 return ; 285 } 286 //1 287 var char_number = 0; 288 for(var i=0 ; i<text.length ;i++){ 289 if(text.charAt(i) == '['){ //统计 290 char_number++; 291 } 292 } 293 if(char_number == 0){ //检测 294 return ; 295 } 296 //alert(char_number); 297 for(var k=0 ; k<char_number ; k++){ 298 299 var lyric_tmp_time= parseTime(text.substring(k*10+1,k*10+9)); 300 301 lyric_text[lyric_flag] = text.substring((char_number)*10); 302 lyric_time[lyric_flag] = lyric_tmp_time; 303 lyric_flag++; 304 } 305 } 306 307 308 //时间格式化 01:12.45 => 1*60*100+12*100+45; 309 function parseTime(time_string){ 310 var m = time_string.substring(0,time_string.indexOf(":")); 311 var s = time_string.substring(time_string.indexOf(":") + 1); 312 var total_time = parseInt(parseInt(m) * 60 *100 + parseFloat(s) * 100.0); 313 //检测 314 if(isNaN(total_time)){ 315 total_time = 0; 316 } 317 return total_time; 318 } 319 320 321 //数组排序（根据时间） 322 function sortLyricArray(){ 323 //选择排序 lyric_time[] 324 for(var i=0 ; i<lyric_time.length-1 ; i++){ 325 var min = i; 326 for(var j=i ; j<lyric_time.length ; j++){ 327 if(lyric_time[min] > lyric_time[j]){ 328 min = j; 329 } 330 } 331 //数据交换 332 var tmp_time = lyric_time[i]; 333 var tmp_text = lyric_text[i]; 334 lyric_time[i] = lyric_time[min]; 335 lyric_time[min] = tmp_time; 336 lyric_text[i] = lyric_text[i]; 337 lyric_text[min] = tmp_text; 338 } 339 } 340 /***************************歌词解析 end ***************************/
