ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【微信小程序学习】网易云音乐歌曲详情页代码实现 [打印本页]
作者: 雁过留声    时间: 2022-6-25 00:15
标题: 【微信小程序学习】网易云音乐歌曲详情页代码实现
这里记录一下做网易云小程序的音乐播放详情页面的代码。
音乐播放界面的主要的重点有几个：
  1、磁盘和摇杆的旋转效果，这里运用了css的动画属性
  2、音乐播放和暂停，下一首/上一首等播放效果的实现
  3、进度条的样式和控制
  4、和上一页音乐推荐列表页通信，利用订阅与发布Pubsub

   HTML代码及要点
  1. <view class="songDetailContainer">
  2.   <view class="author">{{song.ar[0].name}}</view>
  3.   <view class="circle"></view>
  4.   <image class="needle {{isPlay?'needleRotate':''}}" src="/static/images/song/needle.png"></image>
  6.   <view class="discContainer {{isPlay?'discAnimation':''}}">
  7.    <image class="disc" src="/static/images/song/disc.png"></image>
  8.    <image class="musicImg" src="{{song.al.picUrl}}"></image>
  9.   </view>
  11.   
  12.   <view class="progressControl">
  13.     <text>{{currentTime}}</text>
  14.    
  15.     <view class="barControl">
  16.       
  17.       <view class="audio-currentTime-Bar" style="width: {{currentWidth + 'rpx'}}">
  18.         
  19.         <view class="audio-circle"></view>
  20.       </view>
  21.     </view>
  22.     <text>{{durationTime}}</text>
  23.   </view>
  25.   
  26.   <view class="musicControl">
  27.     <text class="iconfont icon-iconsMusicyemianbofangmoshiShuffle"></text>
  29.     <text class="iconfont icon-shangyishou" id="pre" bindtap="handleSwitch"></text>
  31.     <text class="iconfont {{isPlay?'icon-zanting': 'icon-bofang'}} big" bindtap="handleMusicPlay"></text>
  33.     <text class="iconfont icon-next" id="next" bindtap="handleSwitch"></text>
  35.     <text class="iconfont icon-iconsMusicyemianbofangmoshiPlayList"></text>
  36.   </view>
  37. </view>
复制代码
HTML要点： 


 
这里利用了三元表达式，当isPlay为true时，摇杆、磁盘和播放按钮就会开始启动动画，否则相反。

 实时进度条的动画利用了红色实时进度条的宽度的变化风格。
    CSS代码及要点
  1. /* pages/songDetail/songDetail.wxss */
  2. @import "/static/iconfont/iconfont.wxss";
  3. page {
  4.   height: 100%;
  5. }
  6. .songDetailContainer{
  7.   height: 100%;
  8.   background: rgba(0,0,0,0.5);
  9.   display: flex;
  10.   flex-direction: column;
  11.   align-items: center;
  13. }
  14. /* 底座 */
  15. .circle {
  16.   position: relative;
  17.   z-index: 100;
  18.   width: 60rpx;
  19.   height: 60rpx;
  20.   border-radius: 50%;
  21.   background: #fff;
  22.   margin: 10rpx 0;
  23. }
  24. /* 摇杆 */
  25. .needle{
  26.   position: relative;
  27.   z-index: 99;
  28.   top:-40rpx;
  29.   left: 60rpx;
  30.   width:192rpx;
  31.   height:274rpx;
  32.   /* 要先设置好旋转的中心点 */
  33.   transform-origin:40rpx 0;
  34.   transform: rotate(-20deg);
  35.   transition: transform 1s;
  36.   
  37. }
  38. /* 播放时摇杆动画 */
  39. .needleRotate{
  40.   transform: rotate(0deg);
  41. }
  43. /* 磁盘 */
  44. .discContainer{
  45.   position: relative;
  46.   top:-170rpx;
  47.   width: 598rpx;
  48.   height: 598rpx;
  49. }
  51. .discAnimation{
  52.   animation: disc 3s linear infinite;
  53.   animation-delay:1s;
  54. }
  55. /*
  56.   @keyframes：设置动画帧
  57.   1、from to
  58.     使用于简单的动画，只有起始帧和结束帧
  59.   
  60.   2、百分比
  61.     多用于复杂的动画，动画不止两帧
  62. */
  63. @keyframes disc{
  64.   from{
  65.     transform: rotate(0deg);
  66.   }
  67.   to{
  68.     transform: rotate(360deg);
  69.   }
  70. }
  72. .disc{
  73.   width: 598rpx;
  74.   height: 598rpx;
  75. }
  76. .musicImg{
  77.   position: absolute;
  78.   top:0;
  79.   right:0;
  80.   bottom:0;
  81.   left:0;
  82.   margin: auto;
  83.   width: 370rpx;
  84.   height: 370rpx;
  85.   border-radius: 50%;
  86. }
  87. /* 底部控制区域 */
  88. .musicControl {
  89.   position: absolute;
  90.   bottom: 40rpx;
  91.   left: 0;
  92.   border-top: 1rpx solid #fff;
  93.   width: 100%;
  94.   display: flex;
  96. }
  98. .musicControl  text {
  99.   width: 20%;
  100.   height: 120rpx;
  101.   line-height: 120rpx;
  102.   text-align: center;
  103.   color: #fff;
  104.   font-size: 50rpx;
  105. }
  107. .musicControl  text.big{
  108.   font-size: 80rpx;
  109. }
  111. /* 进度条控制区域 */
  112. .progressControl {
  113.   position: absolute;
  114.   bottom: 200rpx;
  115.   width: 640rpx;
  116.   height: 80rpx;
  117.   line-height: 80rpx;
  118.   display: flex;
  119. }
  122. .barControl {
  123.   position: relative;
  124.   width: 450rpx;
  125.   height: 4rpx;
  126.   background: rgba(0, 0, 0, 0.4);
  127.   margin: auto;
  128. }
  130. .audio-currentTime-Bar {
  131.   position: absolute;
  132.   top: 0;
  133.   left: 0;
  134.   z-index: 1;
  135.   height: 4rpx;
  136.   background: red;
  138. }
  141. /* 小圆球 */
  142. .audio-circle {
  143.   position: absolute;
  144.   right: -12rpx;
  145.   top: -4rpx;
  146.   width: 12rpx;
  147.   height: 12rpx;
  148.   border-radius: 50%;
  149.   background: #fff;
  150. }
复制代码
CSS要点： 
 

这里利用了transform动画，首先设置好旋转的中心点，利用transform-origin属性， 上方图片红框代表摇杆图片的范围，蓝色点为需要旋转的中心点，位置为x坐标为40rpx，纵坐标为0。摇杆要从原来的图片位置逆时针转动20度，所以设定为transform:rotate(-20deg)。加上过渡效果，利用transition:transform 1s。

磁盘的转动利用了css里的animation，linear代表线性，infinite代表一直动。
要设置动画帧@keyframes，从0度到360度，代表了磁盘的旋转。 
    JS代码及要点
  1. // pages/songDetail/songDetail.js
  2. import request from '../../../utils/request'
  3. import PubSub from 'pubsub-js'
  4. import moment from 'moment'
  5. //获取全局实例
  6. const appInstance = getApp();
  7. Page({
  9.   /**
  10.    * 页面的初始数据
  11.    */
  12.   data: {
  13.      isPlay:false,  //播放状态
  14.      song:{},//歌曲详情对象
  15.      musicId:'', //音乐id
  16.      musicLink:'',//音乐的链接
  17.      currentTime:'00:00',//实时时间
  18.      durationTime:'00:00',//总时长
  19.      currentWidth:0, //实时进度条宽度
  20.   },
  22.   /**
  23.    * 生命周期函数--监听页面加载
  24.    */
  25.   onLoad: function (options) {
  26.     //options:用于接收路由跳转的query参数
  27.     //原生小程序中路由传参，对参数的长度有限制，如果长度过长会自动截取掉
  28.    
  29.     // console.log(options)
  30.     // console.log(musicId)
  31.     let musicId = options.musicId;
  32.     this.setData({
  33.       musicId
  34.     })
  35.     //获取音乐详情
  36.     this.getMusicInfo(musicId);
  39.     /**
  40.      * 问题：如果用户操作系统的控制音乐播放/暂停的按钮，页面不知道，导致页面是否播放的状态和真实的音乐播放状态不一致
  41.      * 解决方案：
  42.      *   通过控制音频的实例backgroundAudioManager 去监视音乐暂停播放/暂停
  43.      */
  45.     //判断当前页面音乐是否在播放
  46.     if(appInstance.globalData.isMusicPlay && appInstance.globalData.musicId
  47.      === musicId){
  48.        //修改当前页面音乐播放状态为true
  49.        this.setData({
  50.          isPlay:true
  51.        })
  52.     }
  53.     //创建控制音乐播放的实例
  54.     this.backgroundAudioManager = wx.getBackgroundAudioManager();
  55.     //监视音乐播放/暂停/停止
  56.     this.backgroundAudioManager.onPlay(()=>{
  57.       //修改音乐是否播放的状态
  58.       this.changePlayState(true);
  59.       //修改全局音乐播放的状态
  60.       appInstance.globalData.musicId = musicId;
  61.     });
  62.     this.backgroundAudioManager.onPause(() => {
  63.       this.changePlayState(false);   
  64.     });
  65.     this.backgroundAudioManager.onStop(() => {
  66.       this.changePlayState(false);   
  67.     });
  68.     //监听音乐自然播放结束
  69.     this.backgroundAudioManager.onEnded(() => {
  70.      //自动切换至下一首音乐，并且自动播放
  71.       PubSub.publish('switchType','next')
  72.      //将实时进度条还原成0
  73.      this.setData({
  74.        currentWidth:0,
  75.        currentTime: '00:00'
  76.      })
  78.     })
  80.     //监听音乐实时播放的进度
  81.     this.backgroundAudioManager.onTimeUpdate(()=>{
  82.       //格式化实时播放时间
  83.       let currentTime = moment(this.backgroundAudioManager.currentTime*1000).format('mm:ss')
  84.       let currentWidth = this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration*450
  85.       this.setData({
  86.         currentTime,
  87.         currentWidth
  88.       })
  89.     })
  90.   },
  91.   //修改播放状态的功能函数
  92.   changePlayState(isPlay){
  93.     this.setData({
  94.       isPlay
  95.     })
  96.     //修改全局音乐播放的状态
  97.     appInstance.globalData.isMusicPlay = isPlay;
  98.   },
  100.   //获取音乐详情的功能函数
  101.   async getMusicInfo(musicId){
  102.     let songData = await request('/song/detail',{ids:musicId});
  103.     //songData.songs[0].dt 单位ms
  104.     let durationTime = moment(songData.songs[0].dt).format('mm:ss')
  105.     this.setData({
  106.       song:songData.songs[0],
  107.       durationTime
  108.     })
  109.     //动态修改窗口标题
  110.     wx.setNavigationBarTitle({
  111.       title:this.data.song.name
  112.     })
  114.   },
  115.   //点击播放/暂停的回调
  116.   handleMusicPlay(){
  117.     let isPlay = !this.data.isPlay;
  118.     // //修改是否播放的状态
  119.     // this.setData({
  120.     //   isPlay
  121.     // })
  122.     let {musicId,musicLink} = this.data;
  123.     this.musicControl(isPlay,musicId,musicLink);
  124.   },
  125.   
  126.   //控制音乐播放/暂停的功能函数
  127.   async musicControl(isPlay, musicId, musicLink){
  128.    
  129.       if(isPlay){  //音乐播放
  130.         if(!musicLink){
  131.           //获取音乐播放链接
  132.           let musicLinkData = await request('/song/url', { id: musicId });
  133.           musicLink = musicLinkData.data[0].url;
  134.           this.setData({
  135.             musicLink
  136.           })
  137.         }
  138.       
  139.       this.backgroundAudioManager.src = musicLink;
  140.       this.backgroundAudioManager.title = this.data.song.name;
  141.      }else{  //暂停音乐      
  142.       this.backgroundAudioManager.pause();
  143.      }
  144.   },
  146.   //点击切换上一首下一首的回调
  147.   handleSwitch(event){
  148.     //获取切歌的类型
  149.     let type = event.currentTarget.id;
  150.     //关闭当前播放的音乐
  151.     this.backgroundAudioManager.stop()
  152.     //订阅来自recommendsong页面发布的musicId消息
  153.     PubSub.subscribe('musicId',(msg,musicId)=>{
  154.        // console.log(musicId)
  155.    
  156.     //获取音乐详情信息
  157.     this.getMusicInfo(musicId)
  158.     //自动播放切换的当前音乐
  159.     this.musicControl(true,musicId)
  160.     //取消订阅
  161.     PubSub.unsubscribe('musicId')
  162.     })
  163.     //发布消息数据给recommendSong
  164.     PubSub.publish('switchType',type)
  166.   },
  167. })
复制代码
JS要点： 
 全局数据放在app.js中：

 
这里利用了 



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4