微信小程式wx.createInnerAudioContext使用方法
阿新 • • 發佈:2019-01-25
1.建立audio物件
js開頭:
const myaudio = wx.createInnerAudioContext({});
2.設定資源路徑,onShow或者onLoad內設定
onShow: function () { myaudio.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46" },
3.頁面
<view class='audioContainer'> <view>錄音</view> <!--當前為停止狀態 --> <view class='audioImg' wx:if="{{isplay==false}}" bindtap='play'> <image style="width:100%;height:100%;border-radius:50%;" src='/pages/image/play.png' /> </view> <!--當前為播放狀態 --> <view class='audioImg' wx:if="{{isplay==true}}" bindtap='stop'> <image style="width:100%;height:100%;border-radius:50%;" src='/pages/image/pause.png' /> </view> </view> <view style='width:50%'> <button bindtap='review' type='primary'>重新播放</button> </view>
4.為頁面註冊方法,播放暫停重播
//播放 play: function () { myaudio.play(); console.log(myaudio.duration); this.setData({ isplay: true }); }, // 停止 stop: function () { myaudio.pause(); this.setData({ isplay: false }); }, /** * 重播 */ review:function(){ myaudio.stop(); myaudio.play() this.setData({ isplay: true }); }
5.監聽事件,在onLoad或onshow中設定
onLoad:function(){
myaudio.onPause(function(){
console.log('mmp')
wx.showToast({
title: 'heheda',
})
})
},
6.這個元件應該可以實現背景音樂~~~
7.多條錄音,開頭可定義多個物件
const audio2 = wx.createInnerAudioContext({});
const myaudio = wx.createInnerAudioContext({});