【微信小程序学习】网易云音乐歌曲详情页代码实现_微信小程序网易云音乐代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qiaoyangla/article/details/124865278

本文介绍了微信小程序中网易云音乐播放详情页面的实现，包括磁盘和摇杆的旋转动画、播放控制、进度条样式及通信机制。通过CSS的transform和animation属性实现旋转效果，使用三元表达式控制播放状态，利用Pubsub进行页面间通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里记录一下做网易云小程序的音乐播放详情页面的代码。

音乐播放界面的主要的重点有几个：

1、磁盘和摇杆的旋转效果，这里运用了css的动画属性

2、音乐播放和暂停，下一首/上一首等播放效果的实现

3、进度条的样式和控制

4、和上一页音乐推荐列表页通信，利用订阅与发布Pubsub

HTML代码及要点

<!--pages/songDetail/songDetail.wxml-->
<view class="songDetailContainer">
  <view class="author">{
  {song.ar[0].name}}</view>
  <view class="circle"></view>
  <image class="needle {
  {isPlay?'needleRotate':''}}" src="/static/images/song/needle.png"></image>

  <view class="discContainer {
  {isPlay?'discAnimation':''}}">
   <image class="disc" src="/static/images/song/disc.png"></image>
   <image class="musicImg" src="{
  {song.al.picUrl}}"></image>
  </view>

  <!-- 进度条控制区域 -->
  <view class="progressControl">
    <text>{
  {currentTime}}</text>
    <!-- 总进度条 -->
    <view class="barControl">
      <!-- 实时进度条 -->
      <view class="audio-currentTime-Bar" style="width: {
  {currentWidth + 'rpx'}}">
        <!-- 小圆球 -->
        <view class="audio-circle"></view>
      </view>
    </view>
    <text>{
  {durationTime}}</text>
  </view>

  <!-- 底部控制播放区域 -->
  <view class="musicControl">
    <text class="iconfont icon-iconsMusicyemianbofangmoshiShuffle"></text>

    <text class="iconfont icon-shangyishou" id="pre" bindtap="handleSwitch"></text>

    <text class="iconfont {
  {isPlay?'icon-zanting': 'icon-bofang'}} big" bindtap="handleMusicPlay"></text>

    <text class="iconfont icon-next"