html5 audio

今回はaudioタグで曲の再生から停止と音量の調整とplaylistの作成を行ってみました。
なぜかplaylistの表示がないのですがそのその他は機能しています。
今回はファイルの張りつけはしてないので曲は流れません。
今の段階で出来てるのはこんな感じ。。。↓↓↓

画像
次はしっかりと曲も選べてefectもかけることができるとゆう話なので
そこをやってみます。


ソースコード

 <!DOCTYPE html> <html lang="ja">  
  <head>     
  <meta charset="utf-8">     
  <title>audioタグを使って音楽を再生する(1)</title> 
  <link rel="stylesheet" href="css/main.css" type="text/css" media="screen.print">  
  <style type="text/css">
<!!--

-->
</style>
<script src="text/javascript"></script>
<script>
var fileList = [ 
    { name : '曲のタイトル', url : '.wav' },
	{ name : '曲のタイトル', url : '.wav' }, 
	{ name : '曲のタイトル', url : 'music/.wav' }, 
	{ name : '曲のタイトル', url : 'music/.wav' }, 
	{ name : '曲のタイトル', url : 'music/.wav' }
];
// Audioオブジェクト
var audioObj = new Audio(url);
var audioObj = document.getElementById("myMusic");
var playFlag = false;
audioObj.play();
var playList = '<ul>'; 
// 再生するプレイリストを表示
for(var i=0; i<fileList.length; i++){ 
	playList += '<li onclick=start_music("'+fileList[i]+'")>'; 
	playList += fileList[i] + '</li>'; 
}
 playList += '</ul>'; 
document.getElementById("playListArea").innerHTML = playList; 
// 再生開始
 function start_music(url){     audioObj.pause();
 // これがないと以前の音楽は停止しない
	 audioObj = new Audio(url);
	 audioObj.play();
 } 

// 再生開始
 function start_music(){     var audioObj = document.getElementById("myMusic"); 
	audioObj.play(); } 
// 再生停止（一時停止）
 function start_pause(){     var audioObj = document.getElementById("myMusic"); 
	audioObj.pause(); } 
// 音量アップ
 function volume_up(){     var audioObj = document.getElementById("myMusic"); 
	audioObj.volume = audioObj.volume + 0.1; }
 // 音量ダウン
 function volume_down(){     var audioObj = document.getElementById("myMusic"); 
	audioObj.volume = audioObj.volume - 0.1; }

</script>
</head>
<body>   
<h1>audioタグを使って音楽を再生する(1)</h1>  
<div class="audio1">     
<audio src="" controls>      
<audio controls loop>
<source src=".ogg">
<source src=".wav">
<source src=".mp3"> 
<p>HTML5 Audioに対応したブラウザをご利用ください</p>
</audio>
</div>
         <form>
			 <input type="button" value="再生" onclick="start_music()">
			 <input type="button" value="停止" onclick="start_pause()"><br> 
			<input type="button" value="音量アップ" onclick="volume_up()">
			 <input type="button" value="音量ダウン" onclick="volume_down()">
		 </form>
		 <div id="playListArea"></div>
		 <div id="controller">
			 <img src="images/on.jpg" id="playButton"> 
			 <div id="ctime">0:00</div> 
		 </div>
        <script type="text/javascript" src="js/control.js"></script>
</body>
</html>