html5音乐播放器（chrome测试通过） -

gteam.yu

浏览: 27767 次
性别:
来自: 成都

最近访客更多访客>>

c147258369

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

html5音乐播放器（chrome测试通过）

博客分类：

JavaScript
Html 5

html5 音乐 javascript

html5出来已经很久了，众所周知html5支持播放音乐和视频，作为一个html5网页的开发者，一直都想做一个html5的音乐播放器，同时也增加对javascript的认识，我利用空闲的一段时间开发了一个javascript版本的html5播放器，由于马上又有事情做，这个版本只具备的一部分的功能，欢迎大家一起交流，完成所有的功能。
靠，发现我太唐僧了，不说废话直接上代码了

<!DOCTYPE html>
<!-- saved from url=(0087)file:///C:/Documents%20and%20Settings/zlyu/Desktop/MyTestFoler/Html/html5_player_4.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
button {
	width: 80px;
	height: 24px;
}

input[type="number"]{
	width: 100px;
	height: 24px;
}

ul{
	list-style:none;
}

li{
	list-style:none;
}

</style>
</head>
<body>
	<div id="operations">
		<div>
			<button type="button" id="add" name="add">Add</button>
		</div>
		<div>
			<button type="button" id="delete" name="delete">Delete</button>
			<input type="number" id="delNo" placeholder="music num">
		</div>
		<div>
			<button type="button" id="play" name="play">Play</button>
		</div>
		<div>
			<button type="button" id="stop" name="stop">Stop</button>
		</div>
   </div>
   <div>
		<ul id="listNode">
		</ul>
   </div>
   <script type="text/javascript">
   (function(window, undifined){
   
		var musicDiv = function(){
			
			this._musicList = document.getElementsByTagName('audio');
			
			this._musicEndedListener = function(){
				this.currentTime = 0;
				this.pause();
				var currentId = this.getAttribute("id");
				var arrId = currentId.split('_');
				var nextMusic = document.getElementById(arrId[0] + "_" + (parseInt(arrId[1]) + 1));
				if(nextMusic){
					nextMusic.play();
				}else{
					document.getElementById(arrId[0] + "_" + "1").play();
				}
			};
			
		};
		
		musicDiv.prototype = {
			
			initNo: function(startNo){
				var numSpan = null;
				var textNode = null;
				var audioNodes = document.getElementsByTagName('audio');
				for(var i = 1; i <= audioNodes.length; i++){
					numSpan = document.createElement('span');
					textNode = document.createTextNode("No. " + i);
					numSpan.appendChild(textNode);
					if(i > startNo){
						audioNodes[i - 1].parentNode.insertBefore(numSpan, audioNodes[i - 1]);
					}
				}
			},
			initEvent: function(){
				for(var i = 0; i < this._musicList.length; i++){
					this._musicList[i].removeEventListener('ended', this._musicEndedListener, false);
					this._musicList[i].addEventListener('ended',this._musicEndedListener);
				}
			}
		};
		
		
		var initMusic = function(){
			var div = new musicDiv;
			var audioNo = document.getElementsByTagName('span');
			div.initNo(audioNo.length);
			div.initEvent();
		}
		initMusic();
		
		var addMusic = function(){
			var currentNo = document.getElementsByTagName('audio').length + 1;
			var musicNode = null;
			var sourceNode = null;
			var liNode = null;
			var listNode = document.getElementById('listNode');
			var musicPath = prompt("Please copy the full path of music(mp3 only) in your disk:");
			if(musicPath){
				liNode = document.createElement('li');
				musicNode = document.createElement('audio');
				musicNode.setAttribute('id', 'music_' +  currentNo);
				musicNode.setAttribute('controls', 'controls');
				sourceNode = document.createElement('source');
				sourceNode.setAttribute('src', musicPath);
				sourceNode.setAttribute('type', 'audio/mpeg');
				musicNode.appendChild(sourceNode);
				liNode.appendChild(musicNode);
				listNode.appendChild(liNode);
				div = new musicDiv;
				div.initNo(currentNo);
				div.initEvent();
				console.log(musicPath);
			}
		};
		
		var delMusic = function(){
			var numText = document.getElementById('delNo');
			var musicList = document.getElementsByTagName('li');
			if(numText.value){
				var node = musicList[numText.value - 1];
				if(node){
					node.parentNode.removeChild(node);
					initMusic();
				}
			}
		};
		
		var notImplementException = function(){
			alert('coding...,please wait for next version');
		};
   
   
		var btnAdd = document.getElementById('add');
		btnAdd.onclick = addMusic;
		var btnDel = document.getElementById('delete');
		var btnPlay = document.getElementById('play');
		var btnStop = document.getElementById('stop');
		btnDel.onclick = delMusic;
		btnPlay.onclick = notImplementException;
		btnStop.onclick = notImplementException;
   })(window);
   </script>


</body></html>

应用说明：首先确保你已经安装了chrome，而且电脑上面有mp3格式的音乐。
进入页面之后点击add按钮，把mp3的全路径copy到对话框中，这样你的音乐就会出现在页面上了，点击一个播放，然后就会开始列表循环播放。
========================================分割线=========================
本次更新说明：
2011-12-19
暂时增加了del的功能，但是编号有一些错误还没有修改，希望大家一起做，把功能完成，同时也请UI高手来帮忙美化一下。

========================================分割线=========================
欢迎感兴趣的朋友一起开发，交流，共同提高。
效果图：