音乐网站制作之音乐播放

        在做音乐网站的过程中，我就先把我写的一部分需要总结的拿出来吧！

       音乐网站肯定需要有音乐，接下来我就说下在html中播放音乐：

        利用html5的新特性，audio；

         在对音乐播放之前我们还需要对歌词进行解析，歌词的一般的格式为：lrc格式

         在管理员上传歌曲的时候我们需要预览歌词，这时候我们就需要获取本地歌词（包括本地歌词的路径）

          具体获取 的代码瑞安所示：

                   

var word=[];//用于存放每句歌词
var time=[];//用于存放歌词中解析出来的时间

$(".lyricUp").change(function(){//当歌词上传的时候
		var objUrl = this.files[0];  
		  var fileType=getFileType($(this).val());
		  if(fileType!="LRC"){
			  alert("歌词格式不正确，只能上传lrc格式！");
			  $(this).val("");//清空歌词的路径
		  }else{
		if (objUrl) {  
		 ShowFileInfo(objUrl); 
		}
		  }
	}) ;

/*读取本地文件*/
	function ShowFileInfo(filespec)
	{  
	    var reader = new FileReader();
	    var lyic=null;
		 reader.onload = function() 
		    {  
			 lyic=this.result; 
			 praseLyric(lyic);
			showLyric(); 
		    }
		  reader.readAsText(filespec,"utf-8");
	}


	function praseLyric(lyic){
		/* 对歌词进行解析 */  
		word=[];
		time=[];
			var sp = lyic.split("[");
			for ( var i = 0; i < sp.length; i++) {
				var sp1 = sp[i].split("]");
				if (sp1[1] == undefined || sp1[1] == null) {
					word.push(" ");
				} else {
					word.push(sp1[1]);
				}
				var sp2 = sp1[0].split(":");
				if (sp2[0] == null || sp2[1] == null) {
					time.push(0);
				} else {
					if (!isNaN(sp2[0]) && !isNaN(sp2[1])) {
						var tmp = Math.ceil(sp2[0] * 60 + sp2[1] * 1);
						time.push(tmp);
					} else {
						time.push(0);
					}
				}
			}
		}

	/*创建子节点以及赋值*/
	function showLyric(){
		var ul = document.getElementById("music");
		var musicShowNode= $('#music p'); 
		for(var i=0;i<musicShowNode.length;i++){
			musicShowNode.eq(i).remove();
		}
		  
		for ( var i = 0; i < word.length; i++) {
			var createLi = document.createElement("p");
			createLi.setAttribute("id", time[i]);
			$("#"+time[i]+"").attr("align","center"); 
			createLi.innerHTML = word[i];
			ul.appendChild(createLi);
		}
	}

         /*对文件名的分割*/
      function getFileType(fileName){
           var fileReg=fileName.lastIndexOf(".");
           return fileName.substring(fileReg+1,fileName.length).toUpperCase();
           }

    音乐播放的制作：

                  audio中的属性有：

                          autoplay    值：autoplay     音乐就绪之后马上播放

                         controls     值： controls    出现该属性，立即向用户出现滚动条

                         loop            值：loop         出现loop，当播放完毕之后，重新播放

       

    audio标签属于html5中的媒体标签，所以具有html5中的所有媒体事件。事件类型如下表所示。

 

事件	描述
canplay	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
canplaythrough	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
durationchange	当媒介长度改变时运行脚本
emptied	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
ended	当媒介已抵达结尾时运行脚本
error	当在元素加载期间发生错误时运行脚本
onloadeddata	当加载媒介数据时运行脚本
loadedmetadata	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
loadstart	当浏览器开始加载媒介数据时运行脚本
pause	当媒介数据暂停时运行脚本
play	当媒介数据将要开始播放时运行脚本
playing	当媒介数据已开始播放时运行脚本
progress	当浏览器正在取媒介数据时运行脚本
ratechange	当媒介数据的播放速率改变时运行脚本
readystatechange	当就绪状态（ready-state）改变时运行脚本
seeked	当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
seeking	当媒介元素的定位属性为真且定位已开始时运行脚本
stalled	当取回媒介数据过程中（延迟）存在错误时运行脚本
suspend	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
timeupdate	当媒介改变其播放位置时运行脚本
volumechange	当媒介改变音量亦或当音量被设置为静音时运行脚本
waiting	当媒介已停止播放但打算继续播放时运行脚本

audio标签的方法

html5中的媒体标签所提供的方法很简单，如下。

p.load();
p.play();
p.pause();
p.stop();

          具体的代码如下：

                    

$(".songUp").change(function(){//当歌曲上传的时候 
		var fileName=$(this).val();
		var fileType=getFileType(fileName);
		alert(fileType);
		if(fileType!="MP3"){
			alert("文件格式不正确！");
			$(this).val("");//清空文件的地址
		}else{
		var objUrl = getObjectURL(this.files[0]) ;
		console.log("objUrl = "+objUrl) ;
		if (objUrl) {
			$(".audioPlay").attr("src", objUrl) ;
		}
		}
	}) ;

 /*音乐播放时间改变出发的事件*/
	audios.addEventListener("timeupdate", function() {
		var times = audios.currentTime;
		var tmp = 0;
		var st = parseInt(times);
		for ( var i = tmp; i < st; i++) {
			$("#" + st).addClass("musicFont");
			$("#" + st).addClass("musicFont");
			$(".showLyric").scrollTop(times * 10); 
		}
		tmp = st;
	}, true);
	
	audios.addEventListener("play", function() {//当音乐播放时发生的事件
		 showLyric();	
	});

/*播放音乐*/
  function play(){ 
	  audios.play();
  }

  /*停止播放音乐*/
  function stop(){ 
	  audios.stop();
  }