准备毕业了，感觉好多东西都没学会，太多太多想学的知识，有种求知若渴的状态。
四年的大学就剩下一个多月了，无论将来多么困难，这条路是自己选的，走就要走的精彩！
自学了一点javascript、php，做了一个web app，我将其取名为Youlike随心听，就如我的信念一样，自己的人生自己掌控，做自己喜欢的事情，*的生活！
使用javascript实现音乐播放操作，实现歌词解析，并动态放映歌词效果。
$(function(){
//初始化测试
//alert();
//开启歌词动态监听
scrollBar();
//播放结束后监听
Player().addEventListener('ended', function () {
//alert('over');
nextMusic();
});
$("#play").bind("click", function() {
// current_lyric = data.next_mid;
if(Player().paused){
//修改按钮图标
//$("#play").attr("src","../images/on_play_but.png");
$("#play").removeClass("play");
$("#play").addClass("onplay");
if(Player().src == ""){
//获取歌曲文本信息
playMusic();
}else{
Player().play();
}
//playMusic();
//Player()
}else{
$("#play").removeClass("onplay");
$("#play").addClass("play");
Player().pause();
}
});
$("#next").bind("click",function(){
nextMusic();
});
$("#back").bind("click",function(){
//nextMusic();
if(play_history_position == 0){
return ;
}
});
$("#play").removeClass("play");
$("#play").addClass("onplay");
playMusic();
//////////////非播放器脚本///////////////
$(".nav ul li").bind("click",function(){
location.href=$(this).find("a").attr("href");
});
});
//var 全局
var played = 0;
var play_history_list = [];
var play_history_position = 0;
//获取播放器audio对象
function Player(){
var player = document.getElementById("MyPlayer");
return player;
}
/**************************** 音乐播放控制 start ****************************/
function nextMusic(){
$.post(root_url + "/index.php/Home/Index/find_music",{channel:current_play_music_channel},function(data){
//更改当前曲目标识符
//alert("");
current_play_music_mid = data.mid;
//加载歌词前进行清空
lyric_time = [];
lyric_text = [];
lyric_flag = 0;
loadLyric();
//设置曲目信息
$("#channel_name").html(current_play_music_channel);
//专辑
//$("#album_image").attr("src",""+ root_url+"/download.php?type=image&mid="+data.mid +"");
var album_canvas = document.getElementById("album_canvas");
var context = album_canvas.getContext("2d");
var image = new Image();
image.src = ""+ root_url+"/download.php?type=image&mid="+data.mid +"";
//image.src = public_url+"/images/205798.jpg";
image.onload = function(){
context.drawImage(image,0,0,300,150);
}
//曲目名称
$("#music_name").html("《"+data.real_name+"》");
//演唱者
$("#music_singer").html(data.singer);
Player().src = root_url+"/download.php?type=music&mid="+data.mid;
//播放状态
Player().play();
//alert(data);
},"json");
}
function playMusic(){
//alert(current_play_music_channel);
if(current_play_music_channel == null || current_play_music_channel == ""){
current_play_music_channel = "随便听听";
}
if(played == 0){
mPlay();
played = 1;
}
if (Player().src == "") {
$.post(root_url + "/index.php/Home/Index/find_music",{channel:current_play_music_channel},function(data){
//更改当前曲目标识符
//alert("");
current_play_music_mid = data.mid;
//加载歌词前进行清空
lyric_time = [];
lyric_text = [];
lyric_flag = 0;
loadLyric();
//设置曲目信息
$("#channel_name").html(current_play_music_channel);
//专辑
//$("#album_image").attr("src",""+ root_url+"/download.php?type=image&mid="+data.mid +"");
var album_canvas = document.getElementById("album_canvas");
var context = album_canvas.getContext("2d");
var image = new Image();
//image.src = ""+ root_url+"/download.php?type=image&mid="+data.mid +"";
image.src = public_url+"/images/205798.jpg";
//context.drawImage(image,0,0);
image.onload = function(){
context.drawImage(image,0,0,300,150);
}
//曲目名称
$("#music_name").html("《"+data.real_name+"》");
//演唱者
$("#music_singer").html(data.singer);
Player().src = root_url+"/download.php?type=music&mid="+data.mid;
//播放状态
Player().addEventListener("canplay", function(){
Player().play();
});
/*Player().play();*/
//alert(data);
},"json");
}else{
Player().pause();
}
}
/**************************** 音乐播放控制 end ****************************/
/**************************** 歌词动态效果实现 start *****************************/
//歌词播放进度标识
var scrollh = 0;
//每行的高度20px;
function display_lyric(time){
//清空容器
/*if(){
}*/
$("#lyric_div").html("");
//歌词有两种状态
//1.播放过程中，歌词不在最后一行
//2.播放过程中，歌词到最后一行
if(time < lyric_time[lyric_time.length-1]){
for(var k=0 ; k<lyric_text.length ; k++){
if(lyric_time[k] <= time && time < lyric_time[k+1]){
scrollh = k*22;
$("#lyric_div").html($("#lyric_div").html() + "<font style='color:#eae211;font-size:22px;'>" + lyric_text[k] + "<font><br/>");
}else{
$("#lyric_div").html($("#lyric_div").html() + lyric_text[k] + "<br/>");
}
}
}else{
for(var j=0 ; j<lyric_text.length-1 ; j++)
$("#lyric_div").html($("#lyric_div").html() + lyric_text[j] + "<br/>");
$("#lyric_div").html($("#lyric_div").html() + "<font style='color:red;'>" + lyric_text[lyric_text.length-1] + "<font><br/>");
}
}
//根据歌词进度，，动态自动滚动行号
function scrollBar()//设置滚动条的滚动
{
//判断进度
if(document.getElementById("lyric_div").scrollTop<=scrollh-50)
//调整行号
document.getElementById("lyric_div").scrollTop+=1;
if(document.getElementById("lyric_div").scrollTop>=scrollh+50)
document.getElementById("lyric_div").scrollTop-=1;
//调整跨度
window.setTimeout("scrollBar()",50);
}
function mPlay()//开始播放
{
var ms_100 = parseInt(getSeconds());
if (isNaN(ms_100))
display_lyric(0);
else
display_lyric(ms_100);
window.setTimeout("mPlay()", 100)
}
function getSeconds()//得到当前播放器播放位置的时间
{
var t = Player().currentTime;
var s = parseFloat(t) * 100.0;
return parseInt(s);
}
/**************************** 歌词动态效果实现 end *****************************/
/***************************歌词解析 start ***************************/
var lyric_time = []; //保存歌词的时间整数 100ms级；
var lyric_text = []; //保存对应上述时间的歌词文本信息；
var lyric_flag = 0; //歌词保存位置标识
//ajax访问获取歌词
//url :
//参数 : mid
//响应函数 :
function loadLyric(){
$.post(root_url+"/download.php",{type:"lyric",mid:current_play_music_mid},function(data){
//alert(data);
parseLyric(data);
},"text");
/*alert($.ajax({
url: "__ROOT__/download.php",
async: false
}).responseText);*/
}
//歌词分解
function parseLyric(lyric_string){
//alert(lyric_string);
//按行进行划分
var row_string = lyric_string.split("\n");
//正则表达式
var regular_context_start = /^.\d.+/;
//歌词内容开始下标
var lyric_context_index = 0;
//遍历寻找歌词内容开始部分
for(var i=0 ; i<row_string.length ; i++){
if(regular_context_start.test(row_string[i])){ //匹配成功
lyric_context_index = i;
break;
}
}
//alert("0");
//歌词数据转换并存入数组
for(var k=lyric_context_index ; k<row_string.length ; k++){
textFormat(row_string[k]);
}
//alert("1");
//歌词内容数组排序
sortLyricArray();
//alert("2");
//将歌词渲染到容器内
var lyric_list_string = "";
for(var n=0 ; n<lyric_flag; n++){
lyric_list_string = lyric_list_string + lyric_text[n] + "<br/>";
}
$("#lyric_div").html(lyric_list_string);
}
//歌词数据转换类
//[00:12.64]我有必要相信地球也能是个可爱迪士尼
//1.判断时间标识符个数N
//2.时间转换 [00:12.64] => 1264
//3.歌词内容部分写入
function textFormat(text){
//0 验证
if(text == null || text == ""){
return ;
}
//
var char_number = 0;
for(var i=0 ; i<text.length ;i++){
if(text.charAt(i) == '['){ //统计
char_number++;
}
}
if(char_number == 0){ //检测
return ;
}
//alert(char_number);
for(var k=0 ; k<char_number ; k++){
var lyric_tmp_time= parseTime(text.substring(k*10+1,k*10+9));
lyric_text[lyric_flag] = text.substring((char_number)*10);
lyric_time[lyric_flag] = lyric_tmp_time;
lyric_flag++;
}
}
//时间格式化 01:12.45 => 1*60*100+12*100+45;
function parseTime(time_string){
var m = time_string.substring(0,time_string.indexOf(":"));
var s = time_string.substring(time_string.indexOf(":") + 1);
var total_time = parseInt(parseInt(m) * 60 *100 + parseFloat(s) * 100.0);
//检测
if(isNaN(total_time)){
total_time = 0;
}
return total_time;
}
//数组排序（根据时间）
function sortLyricArray(){
//选择排序 lyric_time[]
for(var i=0 ; i<lyric_time.length-1 ; i++){
var min = i;
for(var j=i ; j<lyric_time.length ; j++){
if(lyric_time[min] > lyric_time[j]){
min = j;
}
}
//数据交换
var tmp_time = lyric_time[i];
var tmp_text = lyric_text[i];
lyric_time[i] = lyric_time[min];
lyric_time[min] = tmp_time;
lyric_text[i] = lyric_text[i];
lyric_text[min] = tmp_text;
}
}
/***************************歌词解析 end ***************************/