一、微信小程序音頻處理audio 使用整理
小程序中處理音頻播放，兩種方式
1.小程序的音頻組件 audio 對應
AudioContext = wx.createAudioContext(string id, Object this)； （被放棄，不在升級）
2.使用 純js處理，沒有頁面標籤，支持背景播放
InnerAudioContext 實例，可通過 wx.createInnerAudioContext 接口獲取實例。
注意，音頻播放過程中，可能被系統中斷，可通過 wx.onAudioInterruptionBegin、wx.onAudioInterruptionEnd事件來處理這種情況。
參考文檔：
https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html
二、使用InnerAudioContext 方式播放音頻 案例（推薦）
wxml
<view>播放進度</view>
<view>總時長：{{duration}} s</view>
<view>當前時間：{{currentTime}} s</view>
<button type="primary" bindtap="playClick">播放</button>
<button type="warn" bindtap="stopClick">暫停</button>
js
var audio;
Page({
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
var _this = this;
audio = wx.createInnerAudioContext();
audio.onPlay(() => {
console.info('開始播放');
});
//監聽播放過程，進度處理
audio.onTimeUpdate(() => {
//console.info(audio.currentTime,audio.duration);
_this.setData({
currentTime: audio.currentTime,
duration: audio.duration
});
});
//播放結束
audio.onStop(() => {
console.info('播放結束');
});
//播放暫停
audio.onPause(() => {
console.info('播放暫停');
});
audio.src = 'http://music.jnqianle.cn/file/audio/46.mp3';
},
//播放操作
playClick: function () {
var _this = this;
audio.autoplay = true;
//判斷是否是播放中
if (audio.paused) {
audio.play(); //播放
} else {
audio.pause(); //暫停
}
},
//關閉
stopClick: function () {
audio.stop();
}
})
三、使用 Audio組件 播放，這種使用簡單，支持api少 （被放棄中）
wxml
<audio src="{{audioSrc}}" id="audioOne" loop="true"></audio>
<button type="primary" bindtap="playClick">播放</button>
<button type="warn" bindtap="stopClick">結束</button>
js
var audio = null;
Page({
/**
* 頁面的初始數據
*/
data: {
audioSrc:'',
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
//創建組件對象,此模式開發放棄
audio = wx.createAudioContext('audioOne', this);
},
//播放操作
playClick: function () {
console.info(audio);
this.setData({
audioSrc:"http://music.jnqianle.cn/file/audio/46.mp3"
});
audio.play();
},
//暫定
stopClick: function () {
audio.pause();
}
})
更多：