【微信小程序学习】网易云音乐歌曲详情页代码实现

这里记录一下做网易云小程序的音乐播放详情页面的代码。
音乐播放界面的主要的重点有几个：
  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中：

 
这里利用了 



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