微信小程序【三】超Q旋转音乐播放器

效果简述：登录自动播放背景音乐，点击图标控制音乐的播放和暂停，再次点击即暂停图标旋转的效果。

步骤一：修改 app.json

确保 app.json 中设置了页面路径并且导航栏样式为 custom。

"window": {
    "navigationStyle": "custom"
  }

步骤二：.wxml文件

在对应的.wxml中，添加播放图标以index.wxml为例，src中放入你的图标图片：

<view class="container">
  <image class="music-icon" src="../images/music_icon.png" bindtap="togglePlay" style="transform: {{currentTransform}};"></image>
</view>

步骤三：.wxss文件

在对应页面的.wxss文件中定义图标旋转的样式，以index.wxss为例：

.container {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}

.music-icon {
  width: 50rpx;
  height: 50rpx;
}

.playing {
  animation: rotate 2s linear infinite;
}

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

步骤四：.js文件

在页面逻辑 index.js 中实现音乐播放和控制逻辑：

// index.js
Page({
  data: {
    isPlaying: true,
    animationClass: 'playing',
    currentTransform: 'rotate(0deg)',
    currentRotation: 0
  },

  onLoad: function() {
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    this.backgroundAudioManager.title = '背景音乐';
    this.backgroundAudioManager.src = 'http://xxxx/jar.mp3';
    this.backgroundAudioManager.play();
    this.startRotation();
  },

  startRotation: function() {
    if (this.rotationInterval) {
      clearInterval(this.rotationInterval);
    }

    this.rotationInterval = setInterval(() => {
      if (this.data.isPlaying) {
        this.setData({
          currentRotation: this.data.currentRotation + 1,
          currentTransform: `rotate(${this.data.currentRotation}deg)`
        });
      }
    }, 20); // Adjust the interval as needed
  },

  togglePlay: function() {
    if (this.data.isPlaying) {
      this.backgroundAudioManager.pause();
      clearInterval(this.rotationInterval);
      this.setData({
        isPlaying: false
      });
    } else {
      this.backgroundAudioManager.play();
      this.setData({
        isPlaying: true
      });
      this.startRotation();
    }
  }
});

页面逻辑

your-project/
|-- images/
|   |-- music_icon.png
|-- pages/
|   |-- index/
|       |-- index.js
|       |-- index.wxml
|       |-- index.wxss
|-- app.json

通过以上步骤，我们的音乐就能进行播放了，具体可扩展。
例如：循环+播放多首歌

五、扩展功能

5.1、.js文件

Page({
  data: {
    isPlaying: true,
    animationClass: 'playing',
    currentTransform: 'rotate(0deg)',
    currentRotation: 0,
    playlist: [
      'http://xxx/mxd1.mp3',
      'http://xxx/mxd2.mp3',
      'http://xxx/mxd3.mp3'
    ],
    currentTrackIndex: 0
  },

  onLoad: function() {
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    this.playCurrentTrack();

    this.backgroundAudioManager.onEnded(() => {
      this.nextTrack();
    });

    this.startRotation();
  },

  playCurrentTrack: function() {
    const currentTrack = this.data.playlist[this.data.currentTrackIndex];
    this.backgroundAudioManager.title = '背景音乐';
    this.backgroundAudioManager.src = currentTrack;
    this.backgroundAudioManager.play();
  },

  nextTrack: function() {
    let nextIndex = this.data.currentTrackIndex + 1;
    if (nextIndex >= this.data.playlist.length) {
      nextIndex = 0; // Loop back to the first track
    }
    this.setData({
      currentTrackIndex: nextIndex
    });
    this.playCurrentTrack();
  },

  startRotation: function() {
    if (this.rotationInterval) {
      clearInterval(this.rotationInterval);
    }

    this.rotationInterval = setInterval(() => {
      if (this.data.isPlaying) {
        this.setData({
          currentRotation: this.data.currentRotation + 1,
          currentTransform: `rotate(${this.data.currentRotation}deg)`
        });
      }
    }, 20); // Adjust the interval as needed
  },

  togglePlay: function() {
    if (this.data.isPlaying) {
      this.backgroundAudioManager.pause();
      clearInterval(this.rotationInterval);
      this.setData({
        isPlaying: false
      });
    } else {
      this.backgroundAudioManager.play();
      this.setData({
        isPlaying: true
      });
      this.startRotation();
    }
  }
});

5.2、.wxml文件

<!--index.wxml-->
<navigation-bar title="标题写在这里" back="{{false}}" color="black" background="#FFF"></navigation-bar>

<!--轮播图区域-->
<view class="swiper">
  <swiper autoplay interval="3000" indicator-dots="true" indicator-color="white" indicator-active-color="yellow">
    <swiper-item>
      <image src="http://xxx/1.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="http://xxx/2.png"></image>
    </swiper-item>
   
  </swiper>

  <view class="container">
    <image class="music-icon" src="../images/music_icon.png" bindtap="togglePlay" style="transform: {{currentTransform}};"></image>
  </view>



  <view class="marquee">
    <span style="color: rgb(7, 7, 7);">这是走马灯效果</span>
  </view>
</view>

5.3、.wxss文件

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

swiper {
  width: 100%;
  height: 250px;
}

swiper image {
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  top: 40rpx;
  right: 40rpx;
}

.music-icon {
  width: 80rpx;
  height: 80rpx;
}

.playing {
  animation: rotate 2s linear infinite;
}

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

/* 跑马灯效果 */
.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.marquee span {
  font-size: 25px;
  font-weight: bold;
  display: inline-block;
  padding-left: 100%;
  animation: marquee 18s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}