html5学习之音乐播放器的结构整理

花了一点时间整理下昨天的播放器，将结构优化了点，方便今后维护和扩展。

如昨天的想法一样，又添加了播放/暂停的切换按钮和随机切换。

另外的界面样式以及歌曲显示部分暂时没空搞了。

思路如下：再添加一个div 用于展现数组里的歌曲，其中我还不清楚js是否可以动态加载我磁盘里的文件，感觉应该可以的，这里不谈，用数组代替。

展现的歌曲根据数组索引进行分页和展示，添加相应的单击事件方便用户选择喜欢的歌曲分页以方便展示另外可以添加一个搜索框用于查询相应关键字的歌曲。

也可以设置歌曲的播放模式、是否搜索歌曲的播放...等等。今后有想法了再扩展吧。要睡了...

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>我的MusicPlayer</title>
</head>
<script>MyUtil = {/*** 添加单击事件监听* @param htmlElement* @param callback* @param scope*/addClickEvent:function(htmlElement,callback,scope){htmlElement.onclick = function(event){callback.call(scope||this,event);}},/*** 生产随机数* @param m* @param n* @return {Number}*/randomInt:function(m,n){if(!n){n=m;m=0;}if(m>n){var temp = m;m=n;n = temp;}return Math.floor(Math.random() *(n-m+1)+m);}};MyMusicPlayer = function(){var obj = arguments[0]||{};//以对象形式传入，格式暂未定this.isInitPaly = obj['isInitPlay']==true;//是否初始化播放this.musicList =  ["(韩德尔) - 最缓板.mp3", "- 绝对真实的BABY笑声(搞怪另类铃声首选).mp3", "30552812.mp3", "30575109.mp3", "7 Days (Album Version).mp3", "Aint Sayin Nothin.mp3", "Are You The One.mp3", "Ballet.mp3", "Beat It.mp3", "Bela Bartok - 第三号钢琴协奏曲（彼得杜诺荷）.mp3", "Billie Jean.mp3", "Bon Jovi - Save the World.mp3", "Celine Dion - My Heart Will Go On (Titanic).mp3", "Dangerous.mp3", "Daughters.mp3", "Daughtry - Home.mp3", "DEPAPEPE - Flow.mp3", "Fall Again.mp3", "Fiona Joy Hawkins - 第二乐章“永恒之爱”.mp3", "Hey Jude.mp3", "Home (Album Version).mp3", "I Finally Found Someone.mp3", "I Just Can'T Stop Loving You.mp3", "I Like It, I Love It.mp3", "I Told You So.mp3", "I'll Be Fine.mp3", "Ice Box.mp3", "Jar Of Love.mp3", "LALALOVE.mp3", "Lovefool.mp3", "Matthew West - Family Tree.mp3", "Mobile.mp3", "No Woman No Cry.mp3", "Pacific Moon - A So Bi Ma Sho.mp3", "Red Bean 红豆.mp3", "Reflection.mp3", "Resident Evil Suite.mp3", "Resta In Ascolto.mp3", "Rush Of Fools - Grace Found Me.mp3", "Satisfied.mp3", "Should It Matter.mp3", "Soul Boy.mp3", "Stellar Kart - Everything Is Different Now.mp3", "Take Me To Your Heart(With Hyesung).mp3", "The Final Countdown.mp3", "The Rasmus - Sail Away.mp3", "Theory of a Deadman - Easy To Love You.mp3", "Traveling Light.mp3", "Trouble Is A Friend.mp3", "Under The Mango Tree.mp3", "Valsa Carioca.mp3", "Vindicated.mp3", "We On feat Yo Gotti.mp3", "WestLife - i lay my love on you.mp3", "WestLife - my love.mp3", "WestLife - You Raise Me Up.mp3", "Yalli Nassi.mp3", "Yesterday.mp3", "yiyong.mp3", "Ʈѩ.mp3", "一个人.mp3", "一生何求.mp3", "一生所爱.mp3", "一生有你.mp3", "下雨的时候会想你.mp3", "不要用我的爱来伤害我.mp3", "不要说话.mp3", "世间情歌.mp3", "中国好声音.mp3", "他一定很爱你.mp3", "你的样子.mp3", "信乐团 - 海阔天空.mp3", "偏偏喜欢你.mp3", "冬季到台北来看雨.mp3", "冷雨夜.mp3", "刀郎 - 永远的兄弟.mp3", "努力活着.mp3", "勃拉姆斯 - 摇篮曲.mp3", "千百度.mp3", "原来你也在这里.mp3", "可否冲破.mp3", "司文 - 光棍好苦.mp3", "周华健 - 难念的经.mp3", "回心转意.mp3", "在水一方.mp3", "外婆的澎湖湾.mp3", "夜生带走最后一个我.mp3", "大海.mp3", "天堂.mp3", "天天看到你.mp3", "天黑.mp3", "女儿情.mp3", "她来听我的演唱会.mp3", "如果这都不算爱.mp3", "姑娘我爱你.mp3", "娃娃 - 漂洋过海来看你.mp3", "孙燕姿 - 开始懂了.mp3", "左右为难.mp3", "差一点.mp3", "巴达捷夫斯卡 - 少女的祈祷.mp3", "庐州月.mp3", "张学友 - 每次都想呼喊你的名字.mp3", "张宇 - 用心良苦.mp3", "张宇 - 男人的好.mp3", "张悬 - 宝贝.mp3", "张惠妹 - 我可以抱你吗.mp3", "张栋梁 - 当你孤单你会想起谁.mp3", "弯弯的月亮.mp3", "归来吧.mp3", "德沃夏克 - 寂静的森林（选自g小调大提琴与乐队）.mp3", "德沃夏克 - 幽默曲.mp3", "心的方向.mp3", "思念是一种病.mp3", "恋曲1990.mp3", "情书.mp3", "想和你去吹吹风.mp3", "想把我唱给你听.mp3", "我一定要得到你.mp3", "我们爱这个错.mp3", "我们都是好孩子.mp3", "我是真的真的很爱妳.mp3", "我的好兄弟.mp3", "我的歌声里.mp3", "掀起你的盖头来.mp3", "断桥残雪.mp3", "断点(国).mp3", "明天会更好.mp3", "曼托瓦尼 - 晨曲.mp3", "有多少爱可以重来.mp3", "有没有人告诉你.mp3", "李民浩 - 城市猎人.mp3", "李贞贤 - 说吧.mp3", "柴可夫斯基 - 如歌的行板.mp3", "每一步.mp3", "汪峰 - 我们的爱情.mp3", "沙宝亮 - 暗香.mp3", "没有你的日子我真的好孤单.mp3", "没有情人的情人节.mp3", "浪子心声.mp3", "海鸣威 - 老人与海.mp3", "涛声依旧.mp3", "清明雨上.mp3", "温哥华悲伤一号.mp3", "漂洋过海来看你.mp3", "灌篮高手 - 只凝视着你（灌篮高手插曲）.mp3", "灌篮高手 - 好想大声叫喜欢你（灌篮高手片头曲）.mp3", "灌篮高手 - 直到世界尽头.mp3", "灰色头像.mp3", "爱你在心口难开.mp3", "爱的代价.mp3", "牛朝阳 - 爱情乞丐.mp3", "牧羊曲.mp3", "玻璃杯.mp3", "电台情歌.mp3", "痒.mp3", "痴心的我.mp3", "白狐.mp3", "相爱的泪水.mp3", "相见不如怀念.mp3", "离别.mp3", "秋天不回来.mp3", "空城.mp3", "突然的自我.mp3", "笑红尘.mp3", "筷子兄弟 - 祝福你亲爱的.mp3", "筷子兄弟 - 老男孩.mp3", "红色石头.mp3", "纯音乐 - 卡农.mp3", "纯音乐 - 圣母颂 (舒伯特).mp3", "美人吟.mp3", "羞答答的玫瑰静悄悄的开.mp3", "群星 - C大调第3弦奏鸣曲 中板.mp3", "群星 - 小抒情调 (巴赫).mp3", "老师你好.mp3", "肖邦 - 雨滴前奏曲.mp3", "胎教音乐 - 小溪和月亮的歌儿（C大调长笛与竖琴协奏曲）.mp3", "胎教音乐 - 布兰登堡协奏曲.mp3", "舒伯特 - 小夜曲（选自《天鹅之歌》）.mp3", "舒曼 - 梦幻曲（选自《童年情景》）.mp3", "英格兰民歌 - 你的秋波使我陶醉.mp3", "萨顶顶 - 万物生 (中文版).mp3", "蓝莲花.mp3", "西城男孩 - my love.mp3", "西海情歌.mp3", "触电.mp3", "说好的幸福呢.mp3", "谢军 - 那一夜.mp3", "谷村新司.-.风姿花传.mp3", "贝多芬 - 月光奏鸣曲.mp3", "贝多芬 - 给爱丽丝.mp3", "输了你赢了世界有如何.mp3", "迈克尔·杰克逊 - You Are Not Alone (Radio Edit).mp3", "追梦人.mp3", "那些花儿.mp3", "酸酸甜甜就是我.mp3", "铁齿铜牙纪晓岚.mp3", "镜子.面具.mp3", "门德尔松 - 乘着歌声的翅膀（钢琴版）.mp3", "陈奕迅_王菲 - 因为爱情.mp3", "陈小春 - 我爱的人.mp3", "陈楚生 - 倾国倾城.mp3", "雨蝶.mp3", "青春舞曲.mp3", "韩宝仪 - 粉红色的回忆.mp3", "风往北吹.mp3", "马友友 - 德弗札克：B小调大提琴协奏曲，作品104 第三乐章：终乐章.mp3", "鲁冰花.mp3", "黄小琥 - 白天不懂夜的黑（清晰版）.mp3", "黄昏.mp3"];//音乐列表this.playIndex = MyUtil.randomInt(this.musicList.length-1);this.audio;//html音频对象this.musicNameShow = this.musicList[this.playIndex];//音乐显示名称this.topDiv;//顶层DIV 用于包裹这个播放器 和访问这个播放器里的一些元素this.volume = obj.volume||0.2;//音量 默认0.2this.myInterval = null;if(this.isInitPaly){this.playOrPauseBtnInnerHtml = '暂停';}else{this.playOrPauseBtnInnerHtml = '播放';}//这里今后会添加对初始参数的处理和动态加载音频数据--只需添加爱相应的文件夹，或则文件也行//还有文件列表 会在前端 用于用户自由选择和显示//this._init();this._init.call(this);};MyMusicPlayer.prototype = {/*** 初始化*/_init:function(){this._initView();this._initController();},/*** 初始化界面*/_initView:function(){var topDiv =  this.topDiv = document.createElement('div');//创建顶层DIV/*音频对象的初始化 start*/var audio = this.audio = document.createElement('audio');//创建音频对象audio.controls = "controls";//控制权交给用户audio.volume = this.volume;//初始化音量audio.src = 'file:///E:/Music/'+ this.musicNameShow;/*音频对象的初始化 end*//*按钮组的初始化 start*/var playOrPauseBtn = this.playOrPauseBtn = document.createElement('button');playOrPauseBtn.innerHTML = this.playOrPauseBtnInnerHtml;var forwardBtn = this.forwardBtn = document.createElement('button');forwardBtn.innerHTML = '上一曲';var againBtn = this.againBtn = document.createElement('button');againBtn.innerHTML = '重新听';var nextBtn = this.nextBtn = document.createElement('button');nextBtn.innerHTML ='下一曲';var randomBtn = this.randomBtn = document.createElement('button');randomBtn.innerHTML = '随机听';/*按钮组的初始化 end*//*音乐名称显示div的初始化 start*/this.showMusicName = document.createElement('div');this.showMusicName.innerHTML = this.musicNameShow;/*音乐名称显示div的初始化 end*///将以上元素添加到顶层IDV中topDiv.appendChild(audio);topDiv.appendChild(document.createElement('BR'));//换行topDiv.appendChild(this.showMusicName);//topDiv.appendChild(document.createElement('BR'));//换行topDiv.appendChild(playOrPauseBtn);topDiv.appendChild(forwardBtn);topDiv.appendChild(againBtn);topDiv.appendChild(nextBtn);topDiv.appendChild(randomBtn)},/*** 初始化控制层* @private*/_initController:function(){if(this.isInitPaly){this.play();}/*按钮功能控制 start*///暂停或播放按钮MyUtil.addClickEvent(this.playOrPauseBtn,function(){if(this.isInitPaly){this.pause();}else{this.play();}},this);//上一曲按钮MyUtil.addClickEvent(this.forwardBtn,function(){this._play(-1);},this);//重新听MyUtil.addClickEvent(this.againBtn,function(){this._play(0);},this);//下一曲MyUtil.addClickEvent(this.nextBtn,function(){this._play(1);},this);MyUtil.addClickEvent(this.randomBtn,function(){this._play(MyUtil.randomInt(this.musicList.length-1),false);},this);/*按钮功能控制 end*/},/*** 播放*/play:function(){this.playOrPauseBtn.innerHTML = '暂停';this.isInitPaly = true;this.showMusicName.innerHTML = this.musicNameShow;this.audio.play();var me = this;var isEnd = function(){if(me._isEnded()){me._play(1);}}if(this.myInterval){clearInterval(this.myInterval);}this.myInterval = setInterval(isEnd,100);//每毫秒都监听该歌曲是否结束 如果结束则自动切换至下一首},/*** 暂停*/pause:function(){this.playOrPauseBtn.innerHTML = '播放';this.isInitPaly = false;this.audio.pause();},/*** 内部调用的播放控制方法* @param {Number} index 索引值* @param {Boolean} flag 是否递增 如果递增 则累加  不是递增则为index 默认true* @private*/_play:function(index,flag){var _flag  = flag ? false:true;if(_flag){//如果是递增this.playIndex = this.playIndex + index;}else{//如果不是  这里暂时用于随机this.playIndex = index;}if(this.playIndex<=0){//自动循环this.playIndex = this.musicList.length - 1;}else if(this.playIndex>=this.musicList.length-1){this.playIndex = 0;}this.musicNameShow = this.musicList[this.playIndex];this.audio.src = "file:///E:/Music/"+ this.musicNameShow;this.play();},/*** 是否播放结束* @return {Boolean}* @private*/_isEnded:function(){return this.audio.ended;},/*** 渲染到页面元素为id的地方* @param id*/render:function(id){document.getElementById(id).appendChild(this.topDiv);}};window.onload = function(){var myPlayer = new MyMusicPlayer();myPlayer.render("myMusicPlayer");var myPlayer2 = new MyMusicPlayer({isInitPlay:true});//这里测试添加初始化参数myPlayer2.render("myMusicPlayer2");}</script>
<body>
<div id="myMusicPlayer"></div>
<div id="myMusicPlayer2"></div>
</body>
</html>

如代码所述：我将整体结构已函数的形式整理了下使用时只需new个对象将该对象渲染到某个id的html元素上即可。

有关歌曲以及路径可以根据您的磁盘放置情况自己更改。sleep...

----------------------------------------------------------------------------------------

失眠了，顺便查了下JS读取磁盘的方式，发现只有IE可以...其他不支持这种不安全方式啊...

//http://hi.baidu.com/elick/item/5a7fec0c40b680ce91571821
//http://heisetoufa.iteye.com/blog/342767

本来计划搞个格式为[文件路径1:['文件1','文件N'],文件路径N:['文件1','文件N']]这样的读取格式，其中文件路径我只需输入然后程序自动将文件读取加载到数组里呢

不过发现浏览器不支持的缘故，看来曲线救国的方式就是使用后端语言先生成个这种格式的文件，然后读取这个文件...

当然借助JS框架也是可行的。

html5学习之音乐播放器的结构整理相关推荐

使用HTML5实现网页音乐播放器
转自http://www.php.cn/html5-tutorial-402849.html 本篇文章主要介绍了HTML5网页音乐播放器的示例代码,内容挺不错的,现在分享给大家,也给大家做个参考. 本 ...
html5在线音乐列表播放器,简洁的html5 mp3列表音乐播放器代码
特效描述:简洁的html5 mp3列表音乐播放器代码.html5网页音乐播放器,mp3播放器,简洁音乐播放器代码结构 1. 引入CSS 2. 引入JS 3. HTML代码标题歌手 00:00/0 ...
html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc
基于HTML5技术的音乐播放器的设计与实现基于HTML5技术的音乐播放器的设计与实现常志强刘正余杨劲楠皖西学院电子与信息工程学院 X 关注成功! 加关注后您将方便地在我的关注中得到本文献的 ...
web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...
基于html的音乐播放设计,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 33 卷第11 期(下) ...
html音乐播放器论文,基于HTML5技术的音乐播放器的设计与实现.docx
基于HTML5技术的音乐播放器的设计与实现常志强刘正余杨劲楠皖西学院电子与信息工程学院摘要: 本文采用IITML5技术,设计了一款音乐播放器,可以实现在线播放音乐,也可以加载终端里存储的音乐 ...
html5开发一个音乐播放器,HTML5开发学习（1）：使用aduio标签打造音乐播放器
关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待.本文为该系列(html5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注. ...
HTML5移动端音乐播放器（启蒙篇）
这段时间公司一直在做一个PC的教育类单页应用,庞大复杂,涉及非常多H5的知识,音频就是其中的一部分.前些天偷台风的闲暇时写了一个移动端音乐播放器,作为练手项目. 在线地址:请猛击这里源码:请猛击这里 ...
discuz自动添加兼容html5标签的音乐播放器
关于在discuz中mp3附件自动添加Windows Media播放器插件的方法的文章网上有很多,只要修改./templates/default/discuzcode.htm文件就可以了,但是毕竟不是 ...

html5学习之音乐播放器的结构整理

html5学习之音乐播放器的结构整理相关推荐

最新文章

热门文章