微信小程序 音頻播放器


最近在項目中有寫到了一個音頻,在這里總結一下

首先傳送地址:

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.拖拽

拖拽其實是三個事件,手指按下  - 滑動-手指起來

我們主要是是用滑動的事件,但是由於一直會被出發,所以需要一個開關,所以

touchstart 和touchend就可以設置為開關
尤其注意:touchstart事件里要把監聽音頻播放事件取消掉,否則你的change事件會無效
 
 
以上就這個音頻開發的心得體會,有什么問題請留言,我會及時回復


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM