HTML5播放多首在线音乐 – 千丝海阁

首页 » HTML/CSS » HTML5播放多首在线音乐

HTML5播放多首在线音乐

5044 14

上星期六闹毛发烧,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:
	}
}
文章评分3次,平均分5.0



上一篇:HTML5在线播放音乐
下一篇:安能辨我是雄雌

本文原始地址:http://www.tiandiyoyo.com/2013/11/play-more-music-on-html5/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


14 Comments

  1. 好东西!支持!

  2. 我一般都是直接转虾米的播放器,网上找在线的MP3文件不容易啊,除非自己上传的。现在不比以前,现在都流行正版化。

  3. 估计用不到这功能,纯支持

  4. 哎呦,不错,果断收了

  5. 安心 :

    为了html5抛弃其他浏览器,值得。

  6. 你们这些html5,为啥我总是放不了呢

  7. 神父 :

    谢谢啊!可是好复杂的感觉啊

  8. 每天一点音乐,我们会感觉

载入分页评论...