目前前端頁(yè)面不僅僅要求功能實(shí)現(xiàn)借尿，還要講究更多的美感民鼓。例如html5原生的audio標(biāo)簽误趴，加上controls屬性霹琼，基本可以滿足所需功能。但是無(wú)奈目前的樣式太丑了凉当，身為開(kāi)發(fā)人員都看不下去何況需求方了枣申。so，今天記錄下實(shí)現(xiàn)的效果與代碼看杭。功能有：播放忠藤、暫停、進(jìn)度條楼雹、下載模孩。詳細(xì)如下：
效果圖：
圖1：初始效果圖
圖2：開(kāi)始播放效果圖
圖3：播放完畢效果圖
代碼如下：
????????html代碼：
播放、暫停贮缅、下載圖標(biāo)可以去iconfont官網(wǎng)找自己覺(jué)得合適的
? ? ? ? js代碼：
加載src資源后重新加載到audio的父標(biāo)簽中榨咐，播放完畢后圖標(biāo)切換至初始圖標(biāo)
根據(jù)音頻總時(shí)長(zhǎng)動(dòng)態(tài)改變時(shí)間顯示
根據(jù)時(shí)長(zhǎng)設(shè)置進(jìn)度條進(jìn)度，主要是控制進(jìn)度條的坐標(biāo)位置谴供；反之根據(jù)進(jìn)度條的位置確定當(dāng)前音頻資源應(yīng)該播放的時(shí)間點(diǎn)
使用blob方式可以達(dá)到直接下載的效果块茁，不需要跳轉(zhuǎn)至新的瀏覽器頁(yè)面；可以自定義當(dāng)前下載文件名稱
? ? ? ? css部分：
樣式可視情況自定義桂肌，我的是在layui彈框?qū)邮福员容^小
視情況自定義
