任務(wù)目的

● 練習(xí)綜合運(yùn)用HTML、CSS、JavaScript實(shí)現(xiàn)功能
● 熟悉 html5 audio 使用
● 應(yīng)用的整體架構(gòu)設(shè)計(jì)

通過(guò)調(diào)用html5 audio的屬性和方法來(lái)實(shí)現(xiàn)對(duì)音頻的控制

大致了解了一下，其實(shí)基本上音頻和視頻的DOM接口是大致相同的。

屬性

• controls
  指定音頻是否顯示控件。
  true - 指定顯示控件。
  false - 默認(rèn)。指定不顯示控件。

• currentTime
  設(shè)置或返回當(dāng)前音頻播放位置（單位秒）
  該屬性的樣式實(shí)現(xiàn)自定義進(jìn)度條的關(guān)鍵所在，因?yàn)樗刂埔纛l的播放位置。

返回 currentTime 屬性：
audioObject.currentTime
設(shè)置 currentTime 屬性：
audioObject.currentTime=seconds

• duration
  屬性返回當(dāng)前音頻的長(zhǎng)度，以秒計(jì)。
  自定義進(jìn)度條需要改屬性的配合，因?yàn)橥ㄟ^(guò)當(dāng)前播放秒數(shù)和總秒數(shù)的比例，可以得出當(dāng)前播放的進(jìn)度比例，例如1/4 = 25%，那么控制進(jìn)度條的長(zhǎng)度為總長(zhǎng)度的25%。

• ended
  只讀屬性，音頻播放結(jié)束，返回true,否則false.
  這個(gè)屬性可以用來(lái)判斷播放結(jié)束后，進(jìn)行一些動(dòng)作

• loop
  音頻播放結(jié)束后，是否重復(fù)播放，
  true - 重復(fù)播放
  false - (默認(rèn)) 不重復(fù)播放

• paused
  當(dāng)前播放是否暫停，通過(guò)該屬性可以控制播放和暫停的狀態(tài)切換
  true - 音頻播放暫停
  false - 音頻播放未暫停

• src
  設(shè)置或返回當(dāng)前音頻的來(lái)源

返回 src 屬性：
audioObject.src

設(shè)置 src 屬性：
audioObject.src=URL

當(dāng)然audio 對(duì)象還有其他許多屬性，只是針對(duì)目前的項(xiàng)目需要用到就這些，其他針對(duì)自己需求而考慮是否采用

方法

我只是用到播放和暫停，當(dāng)然還有其他方法，如有興趣可以查看參考鏈接。

audio|video.play() 
audio|video.pause()

事件

這個(gè)就擁有很多的事件，基本都是在音頻狀態(tài)改變是來(lái)觸發(fā)動(dòng)作的條件。例如：ended 事件在音頻/視頻(audio/video)播放完成后觸發(fā)。
具體語(yǔ)法和使用，可以查看參考鏈接

遇到的問(wèn)題

1. 困惑進(jìn)度條和音量條效果實(shí)現(xiàn)？
   解決：點(diǎn)擊事件返回的事件對(duì)象里包含鼠標(biāo)指針的水平坐標(biāo)的屬性offsetX，offsetX 除去 元素總長(zhǎng)度得出比例，利用該比例從而設(shè)置播放位置（obj.duration * scale）改變進(jìn)度條的長(zhǎng)度。

//總長(zhǎng)度
let length = document.querySelector('.fm-controls_center').clientWidth,

targetWidth = event.offsetX;  //點(diǎn)擊位置

let scale = targetWidth / length; //比例

audios.currentTime = audios.duration * scale; //設(shè)置音頻位置

鼠標(biāo)事件對(duì)象的坐標(biāo)

項(xiàng)目GitHub

仿豆瓣音樂(lè)播放器

參考鏈接

1. HTML 音頻/視頻 DOM 參考手冊(cè)
2. HTML DOM Audio 對(duì)象
3. 圖解 event.offsetX，event.clientX，event.pageX，event.screenX屬性