微信小程序封面旋转音乐播放器的实现

微信小程序音乐播放器封面旋转效果实现

最新推荐文章于 2025-04-22 18:26:00 发布

原创

最新推荐文章于 2025-04-22 18:26:00 发布 · 8.4k 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #音乐播放器 #网易云音乐 #旋转 #黑胶唱片

本文介绍了如何使用微信小程序实现类似网易云音乐的播放器功能，包括音频控制、封面旋转效果以及播放进度条。通过InnerAudioContext控制音频，利用CSS keyframes实现封面旋转，并通过style属性控制动画状态。同时，实现了双向绑定以同步播放进度和进度条。作者还提到了可能存在的iOS真机问题以及个人编程规范的思考。

最近在学习微信小程序的UI组件，audio音频方面想做一个类似网易云的播放效果。基础需求：

1、能控制音频开始、暂停、停止

2、音乐播放，封面旋转，音乐暂停封面停止旋转

3、能显示歌曲的播放时间和进度条

4、能通过进度条控制音乐的播放进度

先上一张效果图

直接放代码，代码里面写了比较多的注释。

wxml：

 <view class='item'>
    <text>音乐播放器</text>
    <image class='audio_post{
  
  {music_on?" music_on":""}}'  style="animation-play-state:{
  
  {music_playing?'running':'paused'}}" src='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000' ></image>

    <view class='audio_progress'>
      <slider block-size='14' bindchange='audioChange' bindchanging='audioChanging' value='{
  <