音乐播放器

音乐播放器的实现

成果展示：

Audio对象

创建一个Music类

/*定义music对象*/
function Music(){
  this.musicDom = null;  //播放器对象
  this.songs = new Array();//歌曲目录   
  this.index = 0;  //歌曲下标
}

//初始化,创建一个audio
Music.prototype.init = function(){
  this.musicDom = document.createElement('audio');
  document.body.appendChild( this.musicDom );
}

//添加一首音乐
Music.prototype.add = function( src ){
  this.songs.push( src );   
}

//根据数组下标决定播放哪一首歌曲
Music.prototype.play = function(){
  this.musicDom.src = this.songs[this.index];
  this.musicDom.play();
  showTime( this.musicDom );
  document.getElementById('song').innerHTML =  this.getSongName();
  document.getElementById('play').style.backgroundImage =  "url(images/暂停.png)";
}

//获取歌曲名
Music.prototype.getSongName = function(){
  var info = this.songs[this.index];
  info = info.split('/')[1];
  info = info.split('.')[0];
  return info;
}

//暂停音乐
Music.prototype.stop = function(){
  this.musicDom.pause();    
  document.getElementById('play').style.backgroundImage =  "url(images/播放.png)";
}

//上一首
Music.prototype.perv = function(){
  var len = this.songs.length;
  if( (this.index+1)>= 0 && this.index<len ){  //判断是否超出范围
    if( this.index == 0 ){
      this.index = len; 
    }
    this.index--;     
    this.play();
  }
}

//下一首
Music.prototype.next = function(){
  var len = this.songs.length;
  if( (this.index+1)>=0 && this.index<len ){
    this.index++;
    if( this.index == len ){
      this.index = 0;       
    }    
    this.play();    
  }
}

//增加音量
Music.prototype.addVolume = function(){
  if( this.musicDom.volume > 1.0 ){
    this.musicDom.volume += 0.1;
  }
}

//减少音量
Music.prototype.delVolume = function(){
  if( this.musicDom.volume > 0.1 ){
    this.musicDom.volume -= 0.1;
  }  
}

在上述代码中，创建了一个Music类，该类中实现了audio的初始化，播放音乐，控制音量等功能。

主程序

window.onload = function(){
  var music = new Music();  
  var perv = document.getElementById('perv');   
  var play = document.getElementById('play');
  var next = document.getElementById('next');

  music.init();  //初始化
  var audio = music.musicDom;

  addMusic( music );  //添加歌曲

  //上一首
  perv.onclick = function(){
    music.perv();   
  }

  //正在播放
  play.onclick = function(){
    if( audio.paused ){   //音乐暂停
      music.play();      //播放音乐
    }else{
      music.stop(); 
    } 
  }

  //下一首
  next.onclick = function(){
    music.next();   
  } 

  //歌曲完成时自动播放下一首
  audio.onended = function(){
    music.next();
  } 

  //增加音量
  document.getElementById('volume').onclick = function(){
    music.addVolume();
  };

  //减小音量
  document.getElementById('volume').onclick = function(){
    music.delVolume(); 
  }

  //点击音频未播放部分 
  document.getElementById('screen').onclick = function(){
    relativePos( audio );  
  }

  //点击音频已播放部分
  document.getElementById('bar').onclick = function(){
    relativePos( audio );  
  }  
}; 

下面是进度条实现的具体代码

  //进度条
  audio.ontimeupdate = function(){  
    var total = Math.floor(this.duration);  //总时间（以秒计）   
    var current = Math.floor(this.currentTime);  //当前时间（以秒计）

    document.getElementById('duration').innerHTML = "/ "+getTime( total );  //获取总时间，并将其显示在播放器
    document.getElementById('currentTime').innerHTML = getTime(current);  //获取总时间，并将其显示在播放器

    document.getElementById('bar').style.width = Math.floor( current/total*580 )+"px";
  }

播放时，通过currentTime与duation的比例可以求出进度条的长度占总长的比例，求出当前的进度条的长度。

主要的程序部分已经实现，剩余的部分可以尝试自己实现。