微信小程序如何制作音樂播放器

這篇文章主要介紹“微信小程序如何制作音樂播放器”，在日常操作中，相信很多人在微信小程序如何制作音樂播放器問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序如何制作音樂播放器”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　這個頁面分為3個部分：頂部信息欄(歌曲名/專輯名)，中間的唱片圖，以及底下的控制按鈕。

　　首先是信息欄：

1. <view class="song-info">

2.       <text class="song-title">{{playingMusic.name}}</text>

3.       <text class="song-subtitle">

4.         <block wx:for="{{playingMusic.singer}}" wx:key="unique">

5.           <block wx-if="{{index!=0}}">*</block>{{item.name}}</block>

6.       </text>

7.     </view>

復制代碼

　　這部分很簡單，與我們前面寫過的類似，多個歌手之間用“*”分隔。格式文件為：

1. .song-info {

2.     width:100%;

3.     padding:30rpx;

4.     box-sizing:border-box;

5.     text-align:center;

6. }

7. .song-title {

8.     display:block;

9.     width:100%;

10.     color:#fff;

11.     font-size:36rpx;

12.     line-height:60rpx;

13.     overflow:hidden;

14.     white-space:nowrap;

15.     text-overflow:ellipsis;

16. }

17. .song-subtitle {

18.     display:block;

19.     width:100%;

20.     font-size:28rpx;

21.     line-height:40rpx;

22.     color:rgba(255,255,255,.6);

23.     overflow:hidden;

24.     white-space:nowrap;

25.     text-overflow:ellipsis;

26. }

復制代碼

　　然后是中間的圖片，這部分我們以動畫形式表現，讓唱片一直旋轉，先看布局文件：

1. <view class="cd-info">

2.       <view class="cd-gan"></view>

3.       <view class="cd-inner cd-animation">

4.         <image class="cd-img" src="{{playingMusic.img}}"></image>

5.       </view>

6.     </view>

7. “cd-gan”是唱片部分里白色的播放桿部分，“cd-inner”是唱片部分，在這里為它添加表示唱片的黑色背景，然后在里門用小一圈的“cd-img”來加載我們獲取的網絡圖片。最后為整個唱片添加動畫“cd-animation”。這些工作全部由格式文件完成。

8. .cd-info {

9.   position: relative;

10.   width: 100%;

11.   text-align: center;

12.   padding-top: 120rpx;

13. }

14.  

15. .cd-gan {

16.   position: absolute;

17.   left: 50%;

18.   margin-top: -80rpx;

19.   margin-left: -150rpx;

20.   display: block;

21.   width: 300rpx;

22.   height: 200rpx;

23.   background: url('../../resources/images/cd_g.png');

24.   background-size: cover;

25.   z-index: 10;

26. }

27.  

28. .cd-inner {

29.   position: relative;

30.   display: inline-block;

31.   z-index: 4;

32.   height: 500rpx;

33.   width: 500rpx;

34.   background: url('../../resources/images/cd_b.png');

35.   background-size: cover;

36.   text-align: center;

37.   padding-top: 100rpx;

38.   box-sizing: border-box;

39. }

40.  

41. .cd-animation {

42.   -webkit-animation: circle 10s infinite linear;

43.   animation: circle 10s infinite linear;

44. }

45.  

46. .cd-img {

47.   display: inline-block;

48.   width: 300rpx;

49.   height: 300rpx;

50.   border-radius: 50%;

51. }

52.  

53. @keyframes circle {

54.   0% {

55.     transform: rotate(0deg);

56.   }

57.  

58.   100% {

59.     transform: rotate(360deg);

60.   }

61. }

復制代碼

　　這里面大多數的代碼相信大家已經很熟悉了，重點看一下“cd-animation”這一部分，這里加載了動畫“circle”并設置了動畫時長與無限循環，這樣就實現了在音樂播放時，唱片一直旋轉的效果。“circle”動畫我們使用關鍵幀keyframes來實現。

　　完成這兩部分后我們以一個view來包裹它們，確定它在頁面的位置。

1. <view class="main-box">

2.     <view class="song-info">

3.       <text class="song-title">{{playingMusic.name}}</text>

4.       <text class="song-subtitle">

5.         <block wx:for="{{playingMusic.singer}}" wx:key="unique">

6.           <block wx-if="{{index!=0}}">*</block>{{item.name}}</block>

7.       </text>

8.     </view>

9.     <view class="cd-info">

10.       <view class="cd-gan"></view>

11.       <view class="cd-inner cd-animation">

12.         <image class="cd-img" src="{{playingMusic.img}}"></image>

13.       </view>

14.     </view>

15.   </view>

16. .main-box {

17.   position: absolute;

18.   top: 0;

19.   bottom: 308rpx;

20.   z-index: 3;

21.   width: 100%;

22.   background: rgba(0, 0, 0, 0.2);

23. }

復制代碼

　　接著我們完成底下的操作部分。

1. <view class="ctre-box">

2.     <view class="slider-box">

3.       <text class="slider-text st-l">{{currTimeStr}}</text>

4.       <slider class="slider-inner"></slider>

5.       <text class="slider-text st-r">{{musicTimeStr}}</text>

6.     </view>

7.     <view class="music-ctr">

8.       <block wx-if="{{playType==0}}">

9.         <view class="music-sort ms-loop" data-type="{{playType}}" bindtap="changePlayType"></view>

10.       </block>

11.       <block wx-if="{{playType==1}}">

12.         <view class="music-sort ms-shuffle" data-type="{{playType}}" bindtap="changePlayType"></view>

13.       </block>

14.       <block wx-if="{{playType==2}}">

15.         <view class="music-sort ms-one" data-type="{{playType}}" bindtap="changePlayType"></view>

16.       </block>

17.       <view class="mc-inner">

18.         <view class="mci-icon mci-prev"></view>

19.         <view class="mci-icon mci-play"></view>

20.         <view class="mci-icon mci-next"></view>

21.       </view>

22.       <view class="music-list-btn" bindtap="showPlayList"></view>

23.     </view>

24.   </view>

復制代碼

　　操作控制部分由最上邊的進度條部分“slider-box”和底下的操作按鈕“mucis-ctr”組成。進度條我們使用slider組件，兩段用兩個text組件來顯示當前播放時間與總時長。操作按鈕部分，首先是播放模式的按鈕，根據playType的值，改變順序/隨機/單曲的播放模式并對應加載不同的圖片。然后是3個按鈕，分別表示前一首/播放/下一首。最后是顯示播放列表的按鈕。

　　格式文件為：

1. .slider-box {

2.   box-sizing: border-box;

3.   padding: 20rpx 130rpx;

4. }

5.  

6. .slider-text {

7.   position: absolute;

8.   display: block;

9.   width: 100rpx;

10.   height: 40rpx;

11.   line-height: 40rpx;

12.   font-size: 24rpx;

13.   color: #fff;

14. }

15.  

16. .st-l {

17.   left: 60rpx;

18. }

19.  

20. .st-r {

21.   top: 20rpx;

22.   right: 40rpx;

23.   text-align: right;

24. }

25.  

26. .slider-inner {

27.   width: 100%;

28. }

29. .ctre-box {

30.   height: 308rpx;

31.   position: absolute;

32.   bottom: 0;

33.   z-index: 3;

34.   width: 100%;

35.   background: rgba(0, 0, 0, 0.2);

36. }

37.  

38. .music-ctr {

39.   position: relative;

40.   padding: 20rpx 120rpx;

41. }

42.  

43. .music-sort {

44.   position: absolute;

45.   left: 20rpx;

46.   width: 108rpx;

47.   height: 108rpx;

48. }

49.  

50. .ms-loop {

51.   background: url("../../resources/images/play_icn_loop.png");

52.   background-size: cover;

53. }

54.  

55. .ms-one {

56.   background: url("../../resources/images/play_icn_one.png");

57.   background-size: cover;

58. }

59.  

60. .ms-shuffle {

61.   background: url("../../resources/images/play_icn_shuffle.png");

62.   background-size: cover;

63. }

64.  

65. .music-list-btn {

66.   position: absolute;

67.   top: 36rpx;

68.   right: 20rpx;

69.   width: 108rpx;

70.   height: 108rpx;

71.   background: url("../../resources/images/play_icn_src.png");

72.   background-size: cover;

73. }

74.  

75. .mc-inner {

76.   text-align: center;

77. }

78.  

79. .mci-icon {

80.   display: inline-block;

81.   width: 142rpx;

82.   height: 142rpx;

83. }

84.  

85. .mci-prev {

86.   background: url("../../resources/images/play_btn_prev.png");

87.   background-size: cover;

88. }

89.  

90. .mci-play {

91.   background: url("../../resources/images/play_btn_play.png");

92.   background-size: cover;

93. }

94.  

95. .mci-pause {

96.   background: url("../../resources/images/play_btn_pause.png");

97.   background-size: cover;

98. }

99.  

100. .mci-next {

101.   background: url("../../resources/images/play_btn_next.png");

102.   background-size: cover;

103. }

復制代碼

　　最后寫一下播放列表的布局：

1. <view class="play-list" hidden="{{showPlayList}}">

2.     <view class="play-list-header">

3.       <text>播放列表(185)</text>

4.       <text class="play-list-clear">清空</text>

5.     </view>

6.     <view class="play-list-inner">

7.       <block wx:for="{{playList}}" wx:key="unique">

8.         <view class="play-item">

9.           {{item.name}}

10.         </view>

11.       </block>

12.     </view>

13.     <view class="play-list-bottom" bindtap="closePlayList">關閉</view>

14.   </view>

復制代碼

　　格式文件為：

1. .play-list {

2.   position: absolute;

3.   top: 20%;

4.   bottom: 0;

5.   left: 0;

6.   width: 100%;

7.   z-index: 99;

8.   background: rgba(255, 255, 255, 0.95);   

9. }

10.  

11. .play-list-header {

12.   line-height: 88rpx;

13.   font-size: 32rpx;

14.   text-align: center;

15.   border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

16. }

17.  

18. .play-list-clear {

19.   position: absolute;

20.   right: 30rpx;

21.   font-size: 28rpx;

22.   color: rgba(0, 0, 0, 0.6);

23. }

24.  

25. .play-list-bottom {

26.   position: absolute;

27.   width: 100%;

28.   bottom: 0;

29.   height: 100rpx;

30.   line-height: 100rpx;

31.   text-align: center;

32.   font-size: 32rpx;

33.   border-top: 2rpx solid rgba(0, 0, 0, 0.1);

34. }

35.  

36. .play-list-inner {

37.   position: absolute;

38.   top: 90rpx;

39.   bottom: 102rpx;

40.   width: 100%;

41.   overflow-x: hidden;

42.   overflow-y: auto;

43.   padding-left: 20rpx;

44. }

45.  

46. .play-item {

47.   position: relative;

48.   widows: 100%;

49.   box-sizing: border-box;

50.   padding-right: 90rpx;

51.   height: 88rpx;

52.   line-height: 88rpx;

53.   font-size: 30rpx;

54.   border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

55.   white-space: nowrap;

56.   overflow: hidden;

57.   text-overflow: ellipsis;

58. }

復制代碼

　　這里使用“z-index: 99;background: rgba(255, 255, 255, 0.95);”使播放列表覆蓋部分音樂播放頁面且背景半透明。

　　最后我們使用一個view來為整個頁面加載背景，這個背景為我們獲取的圖片加上模糊效果。最后用一個view包裹所有布局。

1. <view class="play-view">

2.    ...

3.    <view class="bg blur" style="background-image:url('{{playingMusic.img}}');"></view>

4. </view>

復制代碼

　　使用格式文件添加模糊效果：

1. .paly-view {

2.   display: block;

3.   position: relative;

4.   width: 100%;

5.   height: 100%;

6.   overflow: hidden;

7. }

8.  

9. .blur {

10.   filter: blur(80rpx);

11. }

12.  

13. .bg {

14.   position: absolute;

15.   left: 0;

16.   right: 0;

17.   top: 0;

18.   bottom: 0;

19.   background-size: cover;

20.   background-position: bottom center;

21. }

復制代碼

　　最后我們加載數據：

1. var app = getApp()

2.  

3. Page({

4.     data: {

5.         playList: [],

6.         playIndex: 0,

7.         showPlayList: true,

8.         playingMusic: {},

9.         musicTime: 0,

10.         currTime: 0,

11.         musicTimeStr: 0,

12.         currTimeStr: 0,

13.         isPlay: false,

14.         playInv: 0,

15.         playPro: '',

16.         playType: 1

17.     },

18.     onLoad: function (options) {

19.         // 頁面初始化 options為頁面跳轉所帶來的參數

20.         var self = this;

21.         var list = app.globalData.playList;

22.         var playingMusic = null;

23.         if (list.length) {

24.             var index = app.globalData.playIndex;

25.             index = (list.length - 1 < index) ? list.length - 1 : index;

26.             playingMusic = list[index];

27.             this.setData({

28.                 playList: list,

29.                 playIndex: index,

30.                 playingMusic: playingMusic

31.             });

32.         }

33.         wx.playBackgroundAudio({

34.             dataUrl: list[index].url,

35.             title: list[index].title,

36.             coverImgUrl: list[index].img,

37.             success: function () {

38.             },

39.             fail: function () {

40.                 console.log('播放失敗!');

41.             }

42.         });

43.     },

44.     changePlayType: function (e) {

45.         var dataSet = e.currentTarget.dataset;

46.         if (dataSet.type == 1) {

47.             this.setData({

48.                 playType: 2

49.             });

50.         }

51.         if (dataSet.type == 2) {

52.             this.setData({

53.                 playType: 0

54.             });

55.         }

56.         if (dataSet.type == 0) {

57.             this.setData({

58.                 playType: 1

59.             });

60.         }

61.     },

62.     closePlayList: function (e) {

63.         this.setData({

64.             showPlayList: true

65.         })

66.     },

67.     showPlayList: function (e) {

68.         this.setData({

69.             showPlayList: false

70.         })

71.     },

72.     //三個按鈕的點擊事件

73.     pauseMusic: function () {

74.     },

75.     playNextMusic: function () {

76.     },

77.     playPreMusic:function(){

78.     },

79. })

到此，關于“微信小程序如何制作音樂播放器”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！