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高手来帮忙美化一下。
========================================分割线=========================
欢迎感兴趣的朋友一起开发,交流,共同提高。
效果图:
- 大小: 21.6 KB
分享到:
相关推荐
斗鱼Html5播放器Chrome插件,可自动取代斗鱼页面的Flash播放插件,使用html5进行播放。
插件描述:一款jQuery+HTML5类似百度音乐网页播放器代码免费下载,在HTML5盛行的今天,jQuery+HTML5取代了大量的程序开发工作,一款类似百度音乐播放器代码,功能灰常强大!支持火狐、IE9以上等支持HTML5+CSS3浏览器...
基于HTML5实现手机网页视频播放器源码是一款基于jQuery+HTML5实现的MP4网页视频播放器代码,具备暂停开始按钮,是一款非常不错的html5网页视频播放器源码。适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、...
音乐播放器 iPhone,iPad,Android 和所有现代的 Web浏览器,包括火狐,Chrome,歌剧,Safari 浏览器 Internet Explorer 7,8,9和10。需要的朋友们可以下载试试吧! 使用方法: 三个步骤,使 Amazin
自制,用Html5技术本地媒体播放器,虽然会有提示上传,但绝对不会将文件上传,仅用于获取授权。安全可靠。
chrome的flash播放器 chrome的flash播放器
开源接口管理软件eolinker的chrome测试插件;可以不用去搞了
html5 CSS3实现动画流畅的音乐播放器源码,界面十分小巧美观,可实现播放、暂停、上一首、下一首功能,点击播放时打碟器旋转-45度到CD上方,使用CSS3径向渐变来绘制界面中的CD光碟和打碟器,音量条和进度条外层包裹...
chrome测试mqtt插件MqttLens 可搜索 MQTT再学习 -- 搭建MQTT服务器及测试
h5o-chrome, HTML5 outliner ( Chrome 扩展) 面向 Chrome的扩展是在 Chrome 存储服务器上可用的。有关大纲代码库,请参见 h5o/h5o-js插件。有关详细信息和书签,请访问 https://h5o.github.io/ 。在npm上发布,因为...
云视HTML5在线视频播放器插件 适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。
SCSCMS音乐播放器chrome扩展程序 这是一个chrome扩展程序的音乐播放器,方便在没有安装音乐播放器时使用chrome浏览器听歌。可以建立播放列表,导入的歌曲可以存储,并支持播放远程音乐。 安装方法: 普通用户:打开...
chrome restful测试插件postman, 我自己的chrome版本54.0.2840.87 m 亲自测试有用。不是只有crx一个文件的
Videogular 主要关注移动端设备和 HTML5 视频特定的功能:可绑定属性:Videogular 的指令是可绑定的 通过插件可扩展:根据 API 可以开发定制插件基于主题:可以自定义主题原生全屏支持: 支持 Chrome, Firefox, ...
1Player, 一个 Chrome 扩展可以控制 music.163.com的播放器 1Player 用于 music.163. com 下载地址简介屏幕截图 版本 1 2.0.2---2.0.5 2.0.1 1.0.3
html5插件chrome用 再也不用flash了.
此款chrome插件适用于自动化测试,配合自动化测试框架selenium可以实现对相关页面全自动化的测试
Winamp2-js 是一个基于 HTML5 和 Javascript 实现的界面完全跟 winamp 一样的在线音乐播放器 可镶嵌在html页面中 适用于 Edge、Firefox、Safari 和 Chrome 浏览器,不支持 IE 。
chrome浏览器打开axure生成的HTML静态文件页面 已升级manifest version 3版本 第一步:解压得到一个axure-chrome-extension的文件夹。 第二步:打开Google浏览器,在地址栏中输入chrome://extensions/ 或者右上角...
chrome42 html 兼容性测试 web工具