微信小程序音乐播放,封面旋转,音乐暂停封面停止旋转

实现微信小程序音乐播放的基本流程如下：

1. 在 wxml 中添加音乐播放器组件：<audio src="{{musicUrl}}" />

2. 在 js 文件中，通过 wx.createInnerAudioContext() 创建一个音频对象，设置音频源和其他属性，并绑定一些事件。

3. 在 wxml 中添加播放按钮，通过绑定 tap 事件触发音频对象的 play() 方法播放音乐。

4. 在 js 文件中，通过监听音频对象的 play、pause、stop 事件，控制封面的旋转和停止。

下面是代码示例：

wxml 文件：

<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 文件：

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` 对象中，以便在不同的方法中访问和操作。