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

gteam.yu · 发表于 2013-1-29 08:56:46

html5出来已经很久了，众所周知html5支持播放音乐和视频，作为一个html5网页的开发者，一直都想做一个html5的音乐播放器，同时也增加对javascript的认识，我利用空闲的一段时间开发了一个javascript版本的html5播放器，由于马上又有事情做，这个版本只具备的一部分的功能，欢迎大家一起交流，完成所有的功能。
靠，发现我太唐僧了，不说废话直接上代码了
<!DOCTYPE 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.removeEventListener('ended', this._musicEndedListener, false);this._musicList.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高手来帮忙美化一下。

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

		自动登录	找回密码
密码			立即注册

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

浏览过的版块