web音乐播放器
var lyc = "";
// 保存歌词
var lyric = [];
// 保存歌词出现对应时间
var times = [];
// 定义ul标签
var lyric_ul = document.getElementById("lyric_ul");
// 定义处理行
var currLine = 5;
// 定义歌曲名称数组，保存歌曲名称
var songs = ['mp3/youdiantian.mp3','mp3/houhuiwuqi.mp3','mp3/qing.mp3','mp3/sanguosha.mp3','mp3/suiyueshentou.mp3','mp3/wanyouyinli.mp3']
// 定义歌词文件名称数组
var lyr = ['lyric/','lyric/','lyric/','lyric/','lyric/','lyric/'];
// 当前歌曲名称
var currentSongs = 'mp3/youdiantian.mp3';
//播放暂停标识
var playFlag = false;
// 定义歌词下标
var l = 0;
// 歌曲总时长
var songTime ;
// 定义鼠标状态，用于鼠标移动拖拽播放条
var mouseFlag = {
left:0, // 据父元素左侧距离
currentX:0, // 位移x偏移量
flag:false //鼠标按下为true，
}
// 定义小球
var ballX = document.getElementById('cir-ball');
// 记录小球最开始x坐标
var bx = document.getElementById('cir-ball').getBoundingClientRect().left;
// 播放条播放后效果
var userdLeft = document.getElementById('userd-left');
// 循环播放
var loopFlag = false;
// 获取本地歌词文件
function getLyric(l){
lyc = "";
var ajax = new XMLHttpRequest();
ajax.open("GET",lyr[l]);
ajax.onreadystatechange = function(){
// alert("4");
if(ajax.readyState == 4 && ajax.status == 200){
lyc = ajax.responseText;
// ();
// (lyc);
console.log(typeof(lyc));
var str = lyc.replace(/\s*/g,"");
lyric = [];
times = [];
transLyric(str);
}
};
ajax.send(null);
}
getLyric(l);
// 创建li标签，存储每一行歌词
function createElem(){
for(var i = 0;i< times.length;i++){
var li = document.createElement('li');
li.innerHTML = " 1" + lyric[i] ;
lyric_ul.appendChild(li);
li = document.createElement('li');
}
}
// 处理歌词
function transLyric(str){
var s1 = str.split('[');
var temp_t;
for(var i = 1;i<s1.length;i++){
// (s1[i]+ " 0");
console.log(s1[i].split(']')[1]);
// 保存歌词
lyric[i] =s1[i].split(']')[1];
//歌词显示处理
var li = document.createElement('li');
li.innerHTML = lyric[i] ;
// ();
lyric_ul.appendChild(li);
li.style.height = "25px";
temp_t = s1[i].split(']')[0];
// 获取分种
var m = parseInt(temp_t.split(':')[0]);
var temp_m = temp_t.split(':')[1];
// 拆分秒，毫秒
var ms = temp_m.split('.');
// 保存时间，转换为毫秒
times[i] = m * 60 + parseInt(ms[0]) + "." +ms[1];
// (times[i] + " "+ lyric[i]);
}
// (lyric[4]+ " "+ times[4]+" " +times[60]);
lyric[0] = "";
times[0] = 0;
times[times.length] = times[times.length-1] + 3;
// (times[58] + " "+ times[59]+" "+times[60]+" "+times[61]);
}
// createElem();
// 设置高亮行
function lineHeight(){
var lis = lyric_ul.getElementsByTagName("li");
if(liNo > 0){
lis[liNo-1].removeAttribute("class");
}
}
var myAudios = document.getElementById("myaudios");
myAudios.src = 'mp3/youdiantian.mp3';
document.getElementById("play").style.backgroundImage = '../img/';
// 获取播放时长
function coutTIme(){
var m = parseInt(myAudios.duration / 60);
var s = parseInt(myAudios.duration % 60);
if(s < 10){
s = '0' + s;
}
songTime = m + ':' + s;
document.getElementById('sys-time').innerHTML = '';
document.getElementById('sys-time').innerHTML = songTime;
}
myAudios.addEventListener("timeupdate",function(){
var time = myAudios.currentTime;
// (time);
var n = times.length;
// ();
var temp = 0;
var lis = lyric_ul.getElementsByTagName("li");
// 获取播放的当前时间，显示在播放条上方
var s = parseInt(parseFloat(time) % 60);
var m = parseInt(parseFloat(time) / 60);
// 处理时间显示格式 默认00：00格式
if(m <10){
m = '0'+m;
}
if(s < 10){
s = '0' + s;
}
// var temp_time = m +':'+s;
// (temp_time+" "+ " time_test");
// (('curr-time').innerHTML);
document.getElementById('curr-time').innerHTML = '';
document.getElementById('curr-time').innerHTML = m +':'+s;
// (('curr-time').innerHTML+ " test");
for(var i = 0;i <=n;i++){
// 时间判断，显示歌词
if(i<n){
// 歌词时间与播放当前时间比较
if(time >= parseFloat(times[i]) && time < parseFloat(times[i+1])){
// 测试，输出每行歌词
// ("test").innerHTML = lyric[i];
// 第一行歌词
if(i == 1){
lis[0].style.color = '#f40';
}
else{
//高亮显示
lis[i-1].style.color = "#f40";
lis[i-2].style.color = "#333";
if(i >= currLine){
// 偏移量处理，当位于中心行，下一行歌词向上偏移一行歌词的高度
var dx = -(i - currLine) * 25;
lyric_ul.style.transform = "translateY("+dx+"px)";
}
break;
}
}
}
else{
// 最后一句歌词进行单独处理
lis[lis.length-2].style.color = "#333";
lis[lis.length-1].style.color = "#f40";
break;
}
}
//播放进度条显示
// 小球的相对父元素坐标
var dxBall1 = time / myAudios.duration;
// 小球位置直接移动
ballX.style.marginLeft = dxBall1 * document.getElementById('balWrap').clientWidth + 'px';
userdLeft.style.width = dxBall1 * document.getElementById('balWrap').clientWidth + 'px';
userdLeft.style.backgroundColor = 'blue';
// 小球右边框宽度增长
// = dxBall1 * ('balWrap').clientWidth + 'px';
// ( time + " " + songTime + " "+ dxBall1+ " " +dxBall+ " "+playTime+ " test");
// 歌曲总时长换算为秒
var ts = songTime.split(':');
var playTime = parseInt(ts[0]) * 60 + parseInt(ts[1]) ;
// if( = 0){
// // getBoundingClientRect()方法:它返回一个对象，其中包含了left、right、top、bottom四个属性，
// // 分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离
// = ().left;
// (().left + " left" + + " " + );
// }
// (bx + " test " + ().left);
// 歌曲播放完毕判断
if(parseInt(time) == parseInt(playTime)){
// (parseInt(time)+ time + " " + );
// 歌词回到原始状态
lyric_ul.style.transform = "translateY(0px)";
lis[lis.length - 1].style.color = "#333";
// 播放条回归最左侧
userdLeft.style.width = 0;
if(loopFlag == false){
// = songs[n+1];
// currentSongs = songs[n+1];
// getLyric(n+1);
}
}
},false);
// 下一首
function nextSongs(){
// (+ "test");
var n = songs.indexOf(currentSongs);
clearLi();
myAudios.currentTime = 0;
ballX.offsetLeft = 0;
if(n<songs.length-1){
document.getElementsByTagName('sons-name').innerHTML = songs[n+1].substr(4,songs[n+1].length-4);
console.log(document.getElementsByTagName('sons-name').innerHTML = songs[n+1].substr(4,songs[n+1].length-4));
myAudios.src = songs[n+1];
currentSongs = songs[n+1];
getLyric(n+1);
}
else{
document.getElementsByTagName('sons-name').innerHTML = songs[0].substr(4,songs[0].length-4);
//如果为最后一首，下一首为第一首
myAudios.src = songs[0];
currentSongs = songs[0];
getLyric(l);
}
myAudios.play();
// ('sys-time').innerHTML = songTime;
playFlag = 1;
}
// 清除ul标签下所有li标签，便于歌曲切换，前台li标签显示歌词
function clearLi(){
// 使用while循环，不适用for，
// for(var i = 0,num = ('lyric_ul').;i < num;i++){
// ('lyric_ul').removeChild(('lyric_ul').childNodes[i]);
// }
// for循环不好用，删除下表为0的子节点后，子节点们会重新排列，下标为1的子节点的下标会变成0，所以最后不能完成清空ul
while(lyric_ul.hasChildNodes()){
lyric_ul.removeChild(lyric_ul.firstChild);
}
// 清除上一首播放歌词歌词y方向偏移
lyric_ul.style.transform = 'translateY(0px)';
}
// 上一首
function prevSongs(){
var n = songs.indexOf(currentSongs);
clearLi();
myAudios.currentTime = 0;
ballX.offsetLeft = 0;
if(n>0){
document.getElementsByTagName('sons-name').innerHTML = songs[n-1].substr(4,songs[n-1].length-4);
myAudios.src = songs[n-1];
currentSongs = songs[n-1];
getLyric(n-1);
}
else{
// 如果为第一首，上一首为最后一首
document.getElementsByTagName('sons-name').innerHTML = songs[songs.length-1].substr(4,songs[songs.length-1].length-4);
myAudios.src = songs[songs.length-1];
currentSongs = songs[songs.length-1];
getLyric(songs.length-1);
}
myAudios.play();
playFlag = 1;
}
//播放暂停
function clickAgain(){
if(document.getElementById('myaudios').paused){
document.getElementById('myaudios').play();
// = ;
// playFlag = -1;
}
else{
document.getElementById('myaudios').pause();
// ('myaudios').currentTime = ( / bx ) * ('myaudios').duration;
// ('play'). = '../img/';
// playFlag = -1;
}
playFlag = !playFlag;
}
getHuaDong();
//实现鼠标拖动，滑动的效果
function getHuaDong(){
// 播放条实现拖拽效果
ballX.onmousedown = function(){
myAudios.pause();
mouseFlag.flag = true;
var e = event || window.event;
// 保存每次小球按下的位置
mouseFlag.left = e.clientX;
// ();
};
document.onmouseup = function(){
mouseFlag.flag = false;
// 记录鼠标松开x坐标，判断时间
ballX.style.marginLeft = mouseFlag.currentX + 'px';
// 跳转到播放条当前位置对应时间
var nowtime = (mouseFlag.currentX/balWrap.clientWidth) * myAudios.duration;
myAudios.currentTime = nowtime;
// 确保所有li元素都无效果显示
var temp = 0;
while(temp < lyric_ul.getElementsByTagName("li").length ){
lyric_ul.getElementsByTagName("li")[temp].style.color = '#333';
temp ++;
}
myAudios.play();
};
ballX.onmousemove = function(){
var e1 = event || window.event;
var dx = e1.clientX - bx;
console.log(dx + " " + e1.clientX + " "+ mouseFlag.left + " " + mouseFlag.currentX);
if(mouseFlag.flag == true){
if(dx <0){
if(e1.clientX == bx){
dx = 0;
}
// dx = 0;
// = dx;
}
if(dx > balWrap.clientWidth)
{
dx = balWrap.clientWidth;
// = ;
}
ballX.style.marginLeft = dx + 'px';
mouseFlag.currentX = dx;
// 小球划过的播放条效果
userdLeft.style.width = mouseFlag.currentX + 'px';
userdLeft.style.backgroundColor = '#169af3';
}
}
}
// 实现循环播放
function cirLoop(){
loopFlag = !loopFlag;
}