实现微信
小程序音乐播放的基本流程如下：
1. 在 wxml 中添加
音乐播放器
组件：<audio src="{{musicUrl}}" />
2. 在 js 文件中，通过 wx.createInnerAudioContext() 创建一个音频对象，设置音频源和其他属性，并绑定一些事件。
3. 在 wxml 中添加
播放按钮，通过绑定 tap 事件触发音频对象的 play() 方法
播放音乐。
4. 在 js 文件中，通过监听音频对象的 play、pause、stop 事件，控制封面的
旋转和停止。
下面是代码示例：
wxml 文件：
```html
<image class="cover" src="{{coverUrl}}" animation="{{animationData}}"></image>
<button class="play-btn" bindtap="playMusic">{{isPlaying ? '
暂停' : '
播放'}}</button>
<audio src="{{musicUrl}}" bindplay="onPlay" bindpause="onPause" bindstop="onStop"></audio>
```
js 文件：
```javascript
Page({
data: {
isPlaying: false, // 是否正在
播放
musicUrl: 'http://xxx.mp3', //
音乐链接
coverUrl: 'http://xxx.png', // 封面链接
animationData: {}, // 封面
旋转动画实例
},
audioCtx: null, // 音频对象
// 创建音频对象
createAudioContext() {
this.audioCtx = wx.createInnerAudioContext();
this.audioCtx.src = this.data.musicUrl;
this.audioCtx.loop = false;
},
//
播放音乐
playMusic() {
if (!this.audioCtx) {
this.createAudioContext();
}
if (this.data.isPlaying) {
this.audioCtx.pause();
} else {
this.audioCtx.play();
}
this.setData({
isPlaying: !this.data.isPlaying,
});
},
// 音频开始
播放
onPlay() {
this.startAnimation();
},
// 音频
暂停播放
onPause() {
this.stopAnimation();
},
// 音频停止
播放
onStop() {
this.stopAnimation();
},
// 开始封面
旋转动画
startAnimation() {
let animation = wx.createAnimation({
duration: 2000,
timingFunction: 'linear',
});
animation.rotate(360).step();
this.setData({
animationData: animation.export(),
});
},
// 停止封面
旋转动画
stopAnimation() {
this.setData({
animationData: {},
});
},
})
```
在这个示例代码中，我们通过控制 `isPlaying` 变量来判断是否正在
播放音乐。点击
播放按钮时，如果音频对象已经创建过，那么直接调用 `play()` 或 `pause()` 方法控制
音乐播放状态，并且更新 `isPlaying` 变量。如果音频对象还未创建，那么就调用 `createAudioContext()` 方法创建音频对象并设置音频源和其他属性。
在 `onPlay()`、`onPause()` 和 `onStop()` 方法中，我们分别控制封面的
旋转动画启动、停止和重置。通过调用 `wx.createAnimation()` 创建一个动画对象，设置
旋转动画的相关属性，并通过 `animation.export()` 导出动画实例并更新到 `animationData` 变量中，从而控制封面的
旋转。
需要注意的是，在
小程序中，每个页面都有一个独立的作用域，因此我们需要将 `audioCtx` 和动画实例保存在 `Page` 对象中，以便在不同的方法中访问和操作。
2701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
