
平台论坛博客文库

› 论坛 › 程序设计 › Web开发 › html5音乐播放器（chrome测试通过）

html5音乐播放器（chrome测试通过） [复制链接]

cu_Cbear

家境小康

论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2011-12-02 14:32 |只看该作者 |倒序浏览

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

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

Html代码

1.<!DOCTYPE html>
2.<html>
3.<head>
4.<style type="text/css">
5.button {
6. width: 80px;
7. height: 24px;
8.}
9.
10.input[type="number"]{
11. width: 100px;
12. height: 24px;
13.}
14.
15.ul{
16. list-style:none;
17.}
18.
19.li{
20. list-style:none;
21.}
22.
23.</style>
24.</head>
25.<body>
26. <div id="operations">
27. <div>
28. <button type="button" id="add" name="add">Add</button>
29. </div>
30. <div>
31. <button type="button" id="delete" name="delete">Delete</button>
32. <input type="number" placeholder="music num">
33. </div>
34. <div>
35. <button type="button" id="play" name="play">Play</button>
36. </div>
37. <div>
38. <button type="button" id="stop" name="stop">Stop</button>
39. </div>
40. </div>
41. <div>
42. <ul id="listNode">
43. </ul>
44. </div>
45. <script type="text/javascript">
46. (function(window, undifined){
47.
48. var musicDiv = function(){
49.
50. this._musicList = document.getElementsByTagName('audio');
51.
52. this._musicEndedListener = function(){
53. this.currentTime = 0;
54. this.pause();
55. var currentId = this.getAttribute("id");
56. var arrId = currentId.split('_');
57. var nextMusic = document.getElementById(arrId[0] + "_" + (parseInt(arrId[1]) + 1));
58. if(nextMusic){
59. nextMusic.play();
60. }else{
61. document.getElementById(arrId[0] + "_" + "1").play();
62. }
63. };
64.
65. };
66.
67. musicDiv.prototype = {
68.
69. initNo: function(startNo){
70. var numSpan = null;
71. var textNode = null;
72. var liNodes = document.getElementsByTagName('li');
73. for(var i = 1; i <= liNodes.length; i++){
74. numSpan = document.createElement('span');
75. textNode = document.createTextNode("No. " + i);
76. numSpan.appendChild(textNode);
77. if(!startNo){
78. liNodes[i - 1].parentNode.insertBefore(numSpan, liNodes[i - 1]);
79. }else{
80. if(i >= startNo){
81. liNodes[i - 1].parentNode.insertBefore(numSpan, liNodes[i - 1]);
82. }
83. }
84. }
85. },
86. initEvent: function(){
87. for(var i = 0; i < this._musicList.length; i++){
88. this._musicList[i].removeEventListener('ended', this._musicEndedListener, false);
89. this._musicList[i].addEventListener('ended',this._musicEndedListener);
90. }
91. }
92. };
93.
94. var div = new musicDiv;
95. div.initNo();
96. div.initEvent();
97.
98.
99. var addMusic = function(){
100. var currentNo = document.getElementsByTagName('audio').length + 1;
101. var musicNode = null;
102. var sourceNode = null;
103. var liNode = null;
104. var listNode = document.getElementById('listNode');
105. var musicPath = prompt("Please copy the full path of music(mp3 only) in your disk:");
106. if(musicPath){
107. liNode = document.createElement('li');
108. musicNode = document.createElement('audio');
109. musicNode.setAttribute('id', 'music_' + currentNo);
110. musicNode.setAttribute('controls', 'controls');
111. sourceNode = document.createElement('source');
112. sourceNode.setAttribute('src', musicPath);
113. sourceNode.setAttribute('type', 'audio/mpeg');
114. musicNode.appendChild(sourceNode);
115. liNode.appendChild(musicNode);
116. listNode.appendChild(liNode);
117. div = new musicDiv;
118. div.initNo(currentNo);
119. div.initEvent();
120. console.log(musicPath);
121. }
122. };
123.
124. var notImplementException = function(){
125. alert('coding...,please wait for next version');
126. };
127.
128.
129. var btnAdd = document.getElementById('add');
130. btnAdd.onclick = addMusic;
131. var btnDel = document.getElementById('delete');
132. var btnPlay = document.getElementById('play');
133. var btnStop = document.getElementById('stop');
134. btnDel.onclick = notImplementException;
135. btnPlay.onclick = notImplementException;
136. btnStop.onclick = notImplementException;
137. })(window);
138. </script>
139.</body>
140.</html>
<!DOCTYPE html>
<html>
<head>
<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" 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 liNodes = document.getElementsByTagName('li');
for(var i = 1; i <= liNodes.length; i++){
numSpan = document.createElement('span');
textNode = document.createTextNode("No. " + i);
numSpan.appendChild(textNode);
if(!startNo){
liNodes[i - 1].parentNode.insertBefore(numSpan, liNodes[i - 1]);
}else{
if(i >= startNo){
liNodes[i - 1].parentNode.insertBefore(numSpan, liNodes[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 div = new musicDiv;
div.initNo();
div.initEvent();
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 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 = notImplementException;
btnPlay.onclick = notImplementException;
btnStop.onclick = notImplementException;
})(window);
</script>
</body>
</html>

复制代码

应用说明：首先确保你已经安装了chrome，而且电脑上面有mp3格式的音乐。
进入页面之后点击add按钮，把mp3的全路径copy到对话框中，这样你的音乐就会出现在页面上了，点击一个播放，然后就会开始列表循环播放。
========================================分割线=========================
欢迎感兴趣的朋友一起开发，交流，共同提高。
效果图：