最近在項目中有寫到了一個音頻,在這里總結一下
首先傳送地址:
https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html
上邊是api
設計圖:
主要功能有:點擊播放,再點擊關閉 按鈕拖住控制音頻 進度條
一、首先音頻的播放:播放前你需要把你的音頻鏈接寫好,例如:
下面是播放的方法
二、下邊是暫停,寫的時候請注意api的解釋,不要用成了stop(),stop()雖然也是停止,但是再次
播放的時候是從頭重新播放的,因此我們用的是pause()方法
暫停:
三、監聽
監聽在這整個音樂播放過程中非常重要,
我們至少要寫
(1)監聽音頻的播放事件 onPlay() 這個方法主要用戶切換 播放狀態的按鈕
(2)監聽音頻停止事件 onStop() 同理 切換音頻關閉或暫停事件
(3)監聽音頻自然播放至結束的事件 onEnded() 切換為初始狀態
下邊是最重要的部分
(4)onTimeUpdate() 監聽音頻播放進度更新事件 這個事件主要用於我們的進度條
(5)offTimeUpdate() 取消監聽音頻播放進度更新事件 這個事件在音頻拖拽的時候是必須的,
也就是說當你開始拖拽音頻的時候你需要關閉你的音頻監聽事件,不然會造成的問題就是你發現你的拖拽事件無效 ,
拖拽過去后還是會回到之前的位置
四、進度條+拖拽
進度條和拖拽我寫在了一起,主要是這個兩個其實是一起的。
1.首先是選用的組件
在組件中的介紹 movable-area 是 movable-view的可移動區域
接下來是進度條
進度的移動的百分比:音頻當前播放的事件/音頻的總時間
進度條上按鈕移動的位置: (音頻當前播放的事件/音頻的總時間)* (movable-area的寬度 - movable-view的寬度)
movable-view的x可以設置移動位置
以上就完成的進度條
2.拖拽
拖拽其實是三個事件,手指按下 - 滑動-手指起來
我們主要是是用滑動的事件,但是由於一直會被出發,所以需要一個開關,所以