爲了學點html的東西 ，簡單將這個所謂額簡單播放器嵌套在我目前整理的網站裏，作爲隨機“主頁”的一部分-如上次上次的資料裏所寫，現在是按照星期的順序，當打開時，每天都有相應的主頁網站，當然之前都是百度，本來想用google的，無奈出現的那個問題我暫時沒經歷去研究了。
如上圖所示：圖中顯示的有簡單的html5裏的audio標籤元素 另外我加了3個按鈕 分別表示上一曲 重新聽 和下一曲。
還添加了一個div 用於顯示目前播放的曲目名稱。
在網頁上添加了鍵盤監聽事件 監聽了左右鍵，用於切換歌曲。
JS代碼大致如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>我的歌曲</title>
</head>
<body>
<!--<video src="1.mp3" controls="controls" id="myVideo">
</video >-->
<audio src="1.mp3" controls="controls" id="myVideo"></audio>
<div id="musicName"></div>
<button οnclick="play(-1)">上一曲</button><button οnclick="play(0)">重新聽</button><button οnclick="play(1)">下一曲</button>
<script>
var musicArr = ["(韓德爾) - 最緩板.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"],
defaultIndex=0;//默認、當前指向的索引
var myVideo = document.getElementById("myVideo");
var musicName = document.getElementById("musicName");
//musicName.innerHTML="現在播放的是:"+ ;
function play(i){
defaultIndex = defaultIndex + i;
if(defaultIndex<=0){
defaultIndex = 0;
}else if(defaultIndex>=musicArr.length-1){
defaultIndex = musicArr.length-1;
}
myVideo.src = "file:///E:/Music/"+musicArr[defaultIndex];
myVideo.autoplay="autoplay";
musicName.innerHTML="現在播放的是:"+ musicArr[defaultIndex];
}
document.onkeyup = function(e){
var key = e.keyCode;
if(key==37){
play(-1);
}
if(key==39){
play(1);
}
}
</script>
</body>
</html>
當然，你看到的上述歌曲用數組維護的，我不會一個一個的寫上去的，遍歷歌曲文件的Java代碼如下：
public static void main(String[] args) {
File folder = new File("E:\\Music");
File[] files = folder.listFiles();
List<String> list = new ArrayList<String>();
for(File f : files){
if(f.getName().endsWith(".mp3")){
list.add("\""+f.getName()+"\"");
}
}
System.out.println(list);
}然後將控制待輸出的信息 copy到這個數組裏來就行了。
暫是想那麼多，今後頁面美化和連續播放的問題會繼續更新～～
