千丝海阁

上星期六闹毛发烧，tiandi请了两天假，所以这星期博客一直没有更新，总算现在闹毛烧退了，恢复正常了。

看到神父在《HTML5在线播放音乐》这一文中留言询问多个mp3的播放方式，所以折腾了一下，简单的实现了，实例见《HTML5音乐播放器》

通过js+html5的方式实现，方法很简单，HTML代码如下：

<div id="wrap">
<div id="list">
<div id="title">简易的html5音乐播放器</div>
<!-- 1.这里添加歌曲，自行修改括号里的数字 -->
<li><a href="javascript:void(0);" onclick="playmusic(1)">爸爸去哪儿</a></li>
<li><a href="javascript:void(0);" onclick="playmusic(2)">海阔天空</a></li>
<li><a href="javascript:void(0);" onclick="playmusic(3)">再遇见</a></li>   
</div>
<audio id="player" controls="true" >你的浏览器太烂了，请更换浏览器先。</audio>
<div id="now">正在播放：</div><span id="mp3name">无</span>
<div style="clear:both"></div>
</div>

Js代码如下：

function playmusic(i){
	var my = document.getElementById("player"); 
		
	switch(i)
	{
        //每添加一个歌，则增加一个case，数字和html里设置的匹配
	case 1:
		my.setAttribute("src","http://mp3.wooeu.com/mp3.php/15314202/mp3wooeu.mp3");   //2.添加歌曲url
		document.getElementById("mp3name").innerText  = "正在获取歌曲。。。";
		my.addEventListener("canplaythrough",
			function() {
				document.getElementById("mp3name").innerText  = "群星 - 爸爸去哪儿";  //3.添加歌名
			},false);
                my.play();
		break;
	case 2:
		my.setAttribute("src","http://mp3.wooeu.com/mp3.php/15257322/mp3wooeu.mp3"); 
		document.getElementById("mp3name").innerText  = "正在获取歌曲。。。";
		my.addEventListener("canplaythrough",
			function() {
				document.getElementById("mp3name").innerText  = "Beyond - 海阔天空";
			},false);
                my.play();
		break;
	case 3:
		my.setAttribute("src","http://fdfs.xmcdn.com/group3/M00/3F/64/wKgDslJJhJiDr4JAACG0hCSFjS8536.mp3"); 
		document.getElementById("mp3name").innerText  = "正在获取歌曲。。。";
		my.addEventListener("canplaythrough",
			function() {
				document.getElementById("mp3name").innerText  = "苏打绿 - 再遇见";
			},false);
                my.play();
		break;
	default:
	}
}