微信小程序wx.getBackgroundAudioManager()背景音頻播放

目錄

• 顯現的功能
• 效果
• app.json設置
• wxml頁面顯示設置
• css樣式設置
• js設置

顯現的功能

開始播放、暫停播放、停止播放、進度條顯示（沒有做拖拽進度條）

效果

播放狀態是個動圖（圖是網上隨便找的，如侵刪，CSDN是我自己的）

暫停狀態是靜態圖片：

app.json設置

首先要在app.json里設置：

"requiredBackgroundModes":["audio","backgroundAudioManager"]

目的是使播放器可以息屏播放。

wxml頁面顯示設置

	<view class="spotAudio">
        <image src="https://s4.ax1x.com/2021/12/16/T9w4Zq.gif" wx:if="{{!onplay}}"></image>
        <image src="https://s4.ax1x.com/2021/12/16/T9BFhT.png" wx:if="{{onplay}}"></image>
        <slider value="{{playTime}}" disabled="true" />
        <view class="Mp3Btn">
            <button bind:tap="onMusic" wx:if="{{onplay}}">
                <van-icon size="22" name="play-circle-o" />
            </button>
            <button bind:tap="pauseMusic" wx:if="{{!onplay}}">
                <van-icon size="22" name="pause-circle-o" />
            </button>
            <button bind:tap="stopMusic">
                <van-icon size="22" name="stop-circle-o" />
            </button>
        </view>
    </view>

圖片是用一靜一動來表示暫停和播放。

css樣式設置

.spotAudio{
    margin-left: 8%;
    width: 84%;
    margin-top: 20px;
    margin-bottom: 10px;
}
.spotAudio>image{
    height: 150px;
    width: 100%;

}
.spotAudio>van-slider{
    width: 84%;
}
.Mp3Btn{
    display: flex;
    justify-content: space-around;
    width: 50%;
    margin-left: 25%;
    margin-top: 15px;
}
.Mp3Btn>button{
    margin: 0;
    padding: 0;
    width: 50px;
}

按鈕的樣式設置的比較簡單，可以自行更改。

js設置

因為我是在接口返回數據中拿到的歌曲數據，所以首先在page上面（全局）設置：

const backgroundAudioManager = wx.getBackgroundAudioManager();

data中用到的數據：

data: {
	playTime: '',
	onplay:false,
},

在接口成功回調函數中設置：

	// 音樂播放
	backgroundAudioManager.title = '歌曲標題';//
	backgroundAudioManager.epname = '專輯名稱';//
	backgroundAudioManager.singer = '歌手';//
	backgroundAudioManager.coverImgUrl = 'https://...（歌曲封面）';
	// 設置了 src 之后會自動播放
	backgroundAudioManager.src = 'https://...（歌曲地址）';
	that.setData({
		onplay:false
	})
	let playTime = '';
	backgroundAudioManager.onPlay(() => {
		console.log('開始播放');
		let duration = backgroundAudioManager.duration;
		let currentTime = backgroundAudioManager.currentTime;
		if (currentTime != 0) {
			setInterval(() => {
				currentTime = backgroundAudioManager.currentTime;
				playTime = Number(currentTime / duration) * 100
				console.log(currentTime, duration, playTime);
				that.setData({
					playTime: playTime
				})
			}, 500)
		}
	})
                            
	backgroundAudioManager.onError((res) => {
		console.log(res.errMsg)
		console.log(res.errCode)
	})

播放、暫停、停止的點擊事件：

	//播放
	onMusic() {
        backgroundAudioManager.play();
        backgroundAudioManager.onPlay(() => {
            console.log('開始播放');
        })
        this.setData({
            onplay:false
        })
    },
    //暫停
    pauseMusic() {
        backgroundAudioManager.pause();
        backgroundAudioManager.onPause(() => {
            console.log('暫停播放');
        })
        this.setData({
            onplay:true
        })
    },
    //停止
    stopMusic() {
        backgroundAudioManager.stop();
        backgroundAudioManager.onStop(() => {
            console.log('停止播放');
        })
        this.setData({
            onplay:true
        })
    },