咱就是话不多说直接上代码,不让亲戚老爷们苦等。
首先,在你的小程序页面的js文件中,定义音乐播放相关的数据和方法:
javascript
Page({
data: {
isPlaying: false,
audioContext: null
},
onLoad: function () {
// 创建音频上下文
this.setData({
audioContext: wx.createInnerAudioContext()
});
},
playMusic: function () {
// 设置音频源
this.data.audioContext.src = '音乐地址';
// 播放音乐
this.data.audioContext.play();
// 更新播放状态
this.setData({
isPlaying: true
});
},
pauseMusic: function () {
// 暂停音乐
this.data.audioContext.pause();
// 更新播放状态
this.setData({
isPlaying: false
});
},
stopMusic: function () {
// 停止音乐
this.data.audioContext.stop();
// 更新播放状态
this.setData({
isPlaying: false
});
}
})
然后,在你的小程序页面的wxml文件中,添加相关的按钮和状态显示:
javascript
<button bindtap="playMusic">播放音乐</button>
<button bindtap="pauseMusic">暂停音乐</button>
<button bindtap="stopMusic">停止音乐</button>
<view wx:if="{{isPlaying}}">音乐正在播放</view>
<view wx:else>音乐未播放</view>
最后,在微信开发者工具中预览或真机调试你的小程序,点击对应的按钮即可实现音乐的播放、暂停和停止功能。
需要注意的是,在代码中的
音乐地址
处要替换成你真正的音乐文件地址。此外,还可以根据需要添加其他的音乐控制功能,例如音量调节、循环播放等。