音乐网站制作之音乐播放

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

       音乐网站肯定需要有音乐，接下来我就说下在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中的所有媒体事件。事件类型如下表所示。

 

事件	描述