音楽サイト制作の音楽再生

音楽サイトを作る過程で、私が書いた一部をまとめて出しましょう.
音楽サイトには必ず音楽が必要です.次にhtmlで音楽を再生すると言います.
html 5の新しい特性を利用して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音楽が準備できたらすぐに再生
コントロール値:コントロールにこの属性が表示され、すぐにユーザーにスクロールバーが表示されます.
loop値:loopでloopが表示され、再生が完了したら再再生
       
audioタグはhtml 5のメディアタグに属するため、html 5のすべてのメディアイベントを有する.イベントタイプは次の表のとおりです.
 
≪イベント｜Events｜ldap≫
説明
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ラベルの方法
html 5のメディアタグは、以下のように簡単に提供される.
 
p.load();

p.play();

p.pause();

p.stop();

曲の総再生時間を取得します.
                         audio.duration
                          audio.currentTime = 20;//ジャンプ
具体的なコードは以下の通りです.
                    

$(".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();
  }