花了一點時間 整理下昨天的播放器，將結構優化了點，方便今後維護和擴展。
如昨天的想法一樣，又添加了播放/暫停的切換按鈕和隨機切換。
另外的界面樣式以及歌曲顯示部分 暫時沒空搞了。
思路如下：再添加一個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.2
this.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>
有關歌曲以及路徑 可以根據您的磁盤放置情況 自己更改。sleep...
----------------------------------------------------------------------------------------
失眠了，順便查了下JS讀取磁盤的方式，發現只有IE可以...其他不支持這種不安全方式啊...
//http://hi.baidu.com/elick/item/5a7fec0c40b680ce91571821
//http://heisetoufa.iteye.com/blog/342767
本來計劃搞個格式爲[文件路徑1:['文件1','文件N'],文件路徑N:['文件1','文件N']]這樣的讀取格式，其中文件路徑我只需輸入 然後程序自動將文件讀取加載到數組裏呢
不過發現瀏覽器不支持的緣故，看來曲線救國的方式就是使用後端語言先生成個這種格式的文件，然後讀取這個文件...
當然藉助JS框架也是可行的。
