微信小程序音乐播放器踩过的坑！

2023-10-30 13:57:35

微信小程序音乐播放器开发中的坑与解决之道

对于热衷音乐的开发者而言，构建一款微信小程序音乐播放器是一个既有趣又富有挑战性的项目。然而，在这段旅程中，不可避免地会遇到各种坑洼，阻碍我们前进的步伐。本文旨在分享我在开发音乐播放器时所遇到的坎坷，以及解决这些问题的方法，希望对其他开发者有所助益。

1. 云数据库数据获取与 AudioContext 事件执行

踩过的坑

在使用 wx.cloud.database 获取云数据库中的音乐数据后，我尝试通过 innerAudioContext.onTimeUpdate 事件来监听音频播放进度。令人惊讶的是，该事件始终未能触发。

// 错误代码示例

const musicCollection = db.collection('music');

musicCollection.get().then(res => {
  this.setData({
    musicList: res.data
  });

  const innerAudioContext = wx.createInnerAudioContext();
  innerAudioContext.src = this.data.musicList[0].url;
  innerAudioContext.onTimeUpdate(() => {
    console.log('当前播放时间：', innerAudioContext.currentTime);
  });
});

解决方案

经过一番探索，我发现问题出在事件监听器添加的时机。在上面的代码中，事件监听器是在 innerAudioContext.src 属性设置之前添加的。因此，当属性设置完成后，事件监听器尚未被触发。

为了解决这个问题，我们需要将 innerAudioContext.onTimeUpdate 事件监听器添加到 onload 事件中，确保在 src 属性设置完成后再添加监听器。

// 修复后的代码示例

const musicCollection = db.collection('music');

musicCollection.get().then(res => {
  this.setData({
    musicList: res.data
  });

  const innerAudioContext = wx.createInnerAudioContext();
  innerAudioContext.onload = () => {
    innerAudioContext.src = this.data.musicList[0].url;
  };
  innerAudioContext.onTimeUpdate(() => {
    console.log('当前播放时间：', innerAudioContext.currentTime);
  });
});

2. 图片原地旋转的实现

踩过的坑

在尝试让图片原地旋转时，我使用了 CSS 动画，却发现图片只会沿着圆周运动，而不是原地旋转。

// 错误代码示例

.image {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

解决方案

为了实现图片原地旋转，我们需要对 CSS 动画进行一些调整。首先，在 @keyframes 规则中，将 transform: rotate(0deg); 修改为 transform: rotate(0deg) translate(-50%, -50%);，将 transform: rotate(360deg); 修改为 transform: rotate(360deg) translate(-50%, -50%);。其次，在图片的样式中添加 transform: translate(-50%, -50%);。这些修改确保了图片在动画过程中始终保持在原位。

// 修复后的代码示例

.image {
  transform: translate(-50%, -50%);
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg) translate(-50%, -50%);
  }

  to {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}