HTML5中的audio在react中的使用----語音播放進度條、倍速播放、下載等

最近做了一個將通話記錄，語音轉文字並可以在聊天記錄里標注動機和摘要的需求，
上圖只是一個小小的模塊，
第一次接到使用到語音相關的需求，記錄一下

 

 

 

 

 
上圖是一個客服聊天記錄的模塊，語音轉文字，將錄音展示出來，可以音頻播放，可以滑動進度條，倍速播放等等，以前自己心血來潮，使用原生js寫過一個類似於網易音樂，播放音樂的播放器，包括進度條，音量調節啥的。
當然做項目嗎，還是使用HTML自帶的更好，省時省力高高效
我們的service后台前端工程使用的是react + ant-design + node作為中間層
后端使用的是Java
后端只需要給前端提供錄音音頻，再講智能組語音轉文字轉成的文字傳給我就好了，
在前端工程里，語音播放、倍速，進度條代碼如下：

 

1、在state里定義了語音倍速的選擇數組：

 

2、在render函數里渲染的時候使用audio標簽，並遍歷渲染倍速播放按鈕，進度條啥的都有audio自帶的屬性實現了，就是這么簡單

 

 

 

 

3、自定義切換倍速函數changeMultiple，嗯，不可避免的使用了原生JS獲取了dom節點，然后給dom元素添加倍速屬性playbackRate就可以了

 

 

一個小小的如上圖所示的語音播放功能就實現了，

在實現需求的時候，不忘給自己充充電，順便把video和audio自帶的所有的屬性、方法、事件都學習了一遍，感覺，嗯，真好用~~~

 

HTML5提供的video和audio提供的所有的方法屬性事件：

 

方法：

addTextTrack()	向音頻/視頻添加新的文本軌道
canPlayType()	檢測瀏覽器是否能播放指定的音頻/視頻類型
load()	重新加載音頻/視頻元素
play()	開始播放音頻/視頻
pause()	暫停當前播放的音頻/視頻

 

屬性：

audioTracks	返回表示可用音軌的 AudioTrackList 對象
autoplay	設置或返回是否在加載完成后隨即播放音頻/視頻
buffered	返回表示音頻/視頻已緩沖部分的 TimeRanges 對象
controller	返回表示音頻/視頻當前媒體控制器的 MediaController 對象
controls	設置或返回音頻/視頻是否顯示控件（比如播放/暫停等）
crossOrigin	設置或返回音頻/視頻的 CORS 設置
currentSrc	返回當前音頻/視頻的 URL
currentTime	設置或返回音頻/視頻中的當前播放位置（以秒計）
defaultMuted	設置或返回音頻/視頻默認是否靜音
defaultPlaybackRate	設置或返回音頻/視頻的默認播放速度
duration	返回當前音頻/視頻的長度（以秒計）
ended	返回音頻/視頻的播放是否已結束
error	返回表示音頻/視頻錯誤狀態的 MediaError 對象
loop	設置或返回音頻/視頻是否應在結束時重新播放
mediaGroup	設置或返回音頻/視頻所屬的組合（用於連接多個音頻/視頻元素）
muted	設置或返回音頻/視頻是否靜音
networkState	返回音頻/視頻的當前網絡狀態
paused	設置或返回音頻/視頻是否暫停
playbackRate	設置或返回音頻/視頻播放的速度
played	返回表示音頻/視頻已播放部分的 TimeRanges 對象
preload	設置或返回音頻/視頻是否應該在頁面加載后進行加載
readyState	返回音頻/視頻當前的就緒狀態
seekable	返回表示音頻/視頻可尋址部分的 TimeRanges 對象
seeking	返回用戶是否正在音頻/視頻中進行查找
src	設置或返回音頻/視頻元素的當前來源
startDate	返回表示當前時間偏移的 Date 對象
textTracks	返回表示可用文本軌道的 TextTrackList 對象
videoTracks	返回表示可用視頻軌道的 VideoTrackList 對象
volume	設置或返回音頻/視頻的音量

 

事件：

abort	當音頻/視頻的加載已放棄時
canplay	當瀏覽器可以播放音頻/視頻時
canplaythrough	當瀏覽器可在不因緩沖而停頓的情況下進行播放時
durationchange	當音頻/視頻的時長已更改時
emptied	當目前的播放列表為空時
ended	當目前的播放列表已結束時
error	當在音頻/視頻加載期間發生錯誤時
loadeddata	當瀏覽器已加載音頻/視頻的當前幀時
loadedmetadata	當瀏覽器已加載音頻/視頻的元數據時
loadstart	當瀏覽器開始查找音頻/視頻時
pause	當音頻/視頻已暫停時
play	當音頻/視頻已開始或不再暫停時
playing	當音頻/視頻在已因緩沖而暫停或停止后已就緒時
progress	當瀏覽器正在下載音頻/視頻時
ratechange	當音頻/視頻的播放速度已更改時
seeked	當用戶已移動/跳躍到音頻/視頻中的新位置時
seeking	當用戶開始移動/跳躍到音頻/視頻中的新位置時
stalled	當瀏覽器嘗試獲取媒體數據，但數據不可用時
suspend	當瀏覽器刻意不獲取媒體數據時
timeupdate	當目前的播放位置已更改時
volumechange	當音量已更改時
waiting	當視頻由於需要緩沖下一幀而停止