簡易音樂播放器（js，html，css實現）
阿新 • • 發佈：2018-12-23
本人大專生一枚，這個也是本人作業之一，打算從此開始記錄自己的成長
本播放器功能主要有：
播放暫停，音樂進度，音樂進度計時，音量調節，快進退，重播，切換歌曲（本地歌曲）
拖拉進度條播放（有時需要點多兩次目標位置，問題未知，猜測是定時呼叫衝突）
主用函式：
play(); pause(); paused() ; currentTime屬性 duration屬性 函式屬性功能都在註釋中有，
本主就不再贅述
PS：本播放器尚有bug ，在win10 Edge 及火狐中功能皆可實現；
在ie瀏覽器中音量不可調，谷歌瀏覽器播放器進度不可調，且歌曲無法切換；
暫時只發現這些bug，如有其它bug歡迎提出
另外本主不懂如何上傳音樂檔案及程式碼檔案只好貼出來，較長----所以音樂資源也需要各位自己下載啦
圖圖：
目錄：
Css程式碼
#border{
height: auto;
width: 60%;
border: solid 2px;
margin: auto 20% ;
text-align: center;
padding: 3%;
}HTML程式碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>music</title> <link rel="stylesheet" href="css/music.css" /> </head> <body> <!-- 作者：lin 時間：2018-03-19 描述：第一博 --> <!-- 顯示播放器 選擇檔案 1網路檔案（暫未實現）2本地檔案 點選播放 進度條 讀秒 點選重新開始 初始化檔案、進度條、讀秒 滑動進度條播放 點選暫停 停止暫停檔案、進度條、讀秒+ --> <!--bug: 無法調整進度，瀏覽器,使用source會出錯，js使用全域性變量出錯 --> <!--播放暫停 --> <!--選擇檔案-->
<aside id="border">
選擇播放檔案<br />
var mVa = 1; var orderary = [0, 1, 2]; //<!--陣列建立方法2 var arry = new Array(1,3); var arr = new Array(3); arr[0] = 1;--> var idary = ["srchere", "srcfar", "srcDivide"]; //document.getElementById()只能得到或使用而不能反向設定它的值; //audio.duration 獲取總時長 //setInterval定時呼叫 var s = setInterval("myProgress()", 1000); //每秒呼叫一次，myProgress //重新開始 function restart() { document.getElementById(idCheck()).currentTime = 0.0; //設定音訊位置，初始化 } //快進 function advance() { var t = document.getElementById(idCheck()).currentTime + 10; if( t > document.getElementById(idCheck()).duration ) { alert("超過最大值無法前進"); } else { document.getElementById(idCheck()).currentTime = document.getElementById(idCheck()).currentTime + 10; } } //後退 function retreat() { var t = document.getElementById(idCheck()).currentTime - 10; if( t < 0 ) { alert("超過最小值無法前進"); } else { document.getElementById(idCheck()).currentTime = t; } } //改變播放時間 function progress(pVal){ document.getElementById(idCheck()).currentTime = pVal; //根據range返回值改變進度 } //進度條 function myProgress() { var cTime = document.getElementById(idCheck()).currentTime; //獲取當前播放時間 document.getElementById("minute").innerHTML = parseInt(parseInt(cTime) / 60); //根據CTime進行讀秒 document.getElementById("second").innerHTML = parseInt(parseInt(cTime) % 60); document.getElementById("progress").value = parseInt(cTime); //設定html進度條返回值 } //播放暫停 function play() { if(document.getElementById(idCheck()).paused) { //判斷是否暫停 document.getElementById(idCheck()).play(); //audio.play 原生播放方法 document.getElementById("isOk").value = "暫停"; } else { document.getElementById(idCheck()).pause(); //audio.pause 原生暫停方法 document.getElementById("isOk").value = "播放"; } document.getElementById("progress").max = document.getElementById(idCheck()).duration; //設定最大值 myProgress(); //將一個方法放到一個onclick方法裡即則說明點選之後執行click再執行這個myProgress，即myProgress只能再click之後執行 //如果再歌曲audio初始化前呼叫則出錯 } //音樂檔案 function here() { document.getElementById(idCheck()).pause(); //使用var id 時會出錯，原因未知 mVa = 0 play(); } function far() { document.getElementById(idCheck()).pause(); mVa = 1; play(); } function divide() { document.getElementById(idCheck()).pause(); mVa = 2; play(); } //音量 function sound(vol) { document.getElementById(idCheck()).volume = (vol / 100); //audio.volume 音量，值在0-1之間//用value值調節音量 document.getElementById("volume").innerHTML = vol; //顯示 } function loud() { var v = parseInt(document.getElementById(idCheck()).volume * 100) + 1; if(v <= 100) { sound(v); //將改變volu的值並傳給sound } else { document.getElementById("volume").innerHTML = "最大音量"; //提示 } } function lowish() { var v = parseInt(document.getElementById(idCheck()).volume * 100) - 1; if(v >= 0) { sound(v); } else { document.getElementById("volume").innerHTML = "最小音量"; } } //切換歌曲 function idCheck() { for(var i = 0; i < orderary.length; i++) { if(mVa == orderary[i]) { return idary[i]; } } }
第一次發博，知識淺薄、質量不良、出錯難免，各位見諒