html5 Audio音樂播放器（canvas圓形音樂播放進度條）(一)
阿新 • • 發佈：2019-02-12
html5 Audio音樂播放器（canvas圓形音樂播放進度條）
主要用到的是 audio 和canvas，我們下來介紹下著來年哥哥標籤以及它們的api：
- audio
| 屬性 | 屬性值 | 註釋 |
|---|---|---|
| src | url | 播放音樂的url地址 |
| preload | load/auto | 預載入 |
| loop | loop | 迴圈播放 |
| controls | controls | 是否顯示預設的控制按鈕 |
| autoplay | autoplay | 自動播放 |
各大瀏覽器對音樂格式的支援情況
| 音訊格式 | Chrome Firefox | IE9 Opera | Safari |
|---|---|---|---|
| OGG | 支援 | 支援 | 支援 |
| MP3 | 支援 | 不支援 | 支援 |
| WAV | 不支援 | 支援 | 不支援 |
屬性
| 屬性 | Chrome Firefox |
|---|---|
| duration | 獲取媒體檔案的總時長，以秒（S）為單位，如果無法獲取返回NaN |
| paused | 如果媒體檔案被暫停，那麼paused屬性返回true，反之false |
| ended | 如果媒體檔案播放完畢返回true |
| muted | 用來獲取是否為靜音狀態，值為bool |
| volume | 控制音量的屬性，值為0－1；0 為最小，1為最大 |
| startTime | 返回起始的播放時間 |
| error | 返回錯誤的程式碼，額uull的時候為正常，否則可以通過Music.error.code來獲取具體繁榮錯誤程式碼： |
| currentTime | 用來獲取或者控制當前的播放時間，單位是秒（S） |
| currentSrc | 以字串的形式返回正在播放或者已經載入的檔案 |
| 函式 | 作用 |
|---|---|
| load() | 載入音訊，視訊 |
| play（） | 播放 |
| pause() | 暫停播放 |
| canPlayType() | 測試是否支援給定型別檔案 |
常用的事件
| 事件名稱 | 事件作用 |
|---|---|
| loadstart | 客戶端開始請求資料 |
| progress | 客戶端正在請求資料，緩衝 |
| play | |
| pause | |
| ended | |
| timeupdate | 當前播放時間發生改變的時候 |
| canplaythrough | 歌曲已經載入完全 |
| canplay | 緩衝至目前可播放的狀態 |
2.canvas
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖（路徑） |
| stroke() | 繪製已定義的路徑 |
| beginPath() | 起始一條路徑，或重置當前路徑 |
| moveTo() | 把路徑移動到畫布中的指定點，不建立線條 |
| closePath() | 建立從當前點回到起始點的路徑 |
| lineTo() | 新增一個新點，建立從該點到最後指定點的線條 |
| clip() | 從原始畫布剪下任意形狀和尺寸的區域 |
| quadraticCurveTo() 建立二次貝塞爾曲線 | |
| bezierCurveTo() 建立三次方貝塞爾曲線 | |
| arc() | 建立弧/曲線（用於建立圓形或部分圓） |
| translate | 重新定義座標系 |
3 建立一個audio標籤 和canvas標籤，如下：
<audio id="music" src="wuding.mp3" controls="controls" preload="auto">
Your browser does not support the audio element.
</audio>
<canvas id="canvas"></canvas>
4 用js控制canvas畫圓
var music = document.getElementById('music');
//繫結timeupdate事件
music.addEventListener('timeupdate',function(){
if (!isNaN(music.duration)) {
var progressValue = music.currentTime/music.duration; //用時間比來獲取進度條的值
if(progressValue == 1){
progressValue=0;//當播放完成，進度條跳到開始
}
drawCircle(canvas,progressValue);
};
},false);
drawCircle = function (canvas, percentage) {
var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth * 200 / 750);
var innerR = canvasWidth * 0.8 * 0.5;//半徑
var ctx;
canvas.setAttribute('width', canvasWidth + 'px');
canvas.setAttribute('height', canvasWidth + 'px');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
}
ctx.translate(canvasWidth / 2, canvasWidth / 2);
ctx.beginPath();
ctx.arc(0, 0, innerR, 0, Math.PI * 2, false);
ctx.lineWidth = 10;
ctx.strokeStyle = "#F0F0F0";
ctx.stroke()；
ctx.beginPath();
ctx.arc(0, 0, innerR, Math.PI * 3 / 2, (Math.PI * 3 / 2 + Math.PI * 2 / 180 + percentage * Math.PI * 2), false);
ctx.lineWidth = 10;
ctx.strokeStyle = "#EEBD44";
ctx.stroke();
};
drawCircle(document.getElementById('canvas'),0);5 效果圖如下：
6 擴充套件，可以不需要自帶的預設播放控制元件，自己設計按鈕 或圖片的形式 來控制 音樂播放
7 問題：對於移動端頁面 要適配各種手機屏，對於手機適配的問題 我們經常用rem單位 來處理，但是canvas 不支援rem ，所以需要用js 獲取到客戶端的手機屏寬度 進行轉化，具體怎麼做，下次再講！