当一进入小程序时就开始播放音乐,当点击右上角的音乐图标时音乐停止,再点击,音乐开始播放。实现方法即是使用wx.createInnerAudioContext();API然后在相应的页面使用app.AppMusic.play();等对应的方法,在有关页面设置变量来控制,音乐图标的改变。
App ({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
this.setServerUrl();
this.AppMusic = wx.createInnerAudioContext();
this.AppMusic.autoplay =true;
this.AppMusic.loop = true;
this.AppMusic.onPlay(() => {
console.log('开始播放')
this.AppMusic.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
},
})
index.wxml
<view wx:if="{{bian == true}}">
<image src='../images/music.png' bindtap="audioPause" style='width:42rpx;height:42rpx;position:absolute;top:2%;right:3%;'></image>
</view>
<view wx:else="{{bian == false}}">
<image src='../images/music1.png' bindtap="audioPlay" style='width:42rpx;height:42rpx;position:absolute;top:2%;right:3%;background-color:'></image>
</view>
index.js
Page({
data{
bian:true
}
onLoad:function() {
app.AppMusic.src ='音乐地址'
}
audioPlay: function () {
app.AppMusic.play();
app.AppMusic.onPlay(() => {
this.setData({
bian: true
})
})
},
audioPause: function () {
app.AppMusic.pause();
app.AppMusic.onPause(() => {
this.setData({
bian: false
})
})
},
})