微信小程序制作音樂播放器的代碼怎么寫

這篇文章主要介紹了微信小程序制作音樂播放器的代碼怎么寫的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序制作音樂播放器的代碼怎么寫文章都會有所收獲，下面我們一起來看看吧。

　　網絡請求的函數為：

1. function getAlbumInfo(id,callback){

2.     var data = {

3.             albummid: albummid,

4.             g_tk: 5381,

5.             uin: 0,

6.             format: 'json',

7.             inCharset: 'utf-8',

8.             outCharset: 'utf-8',

9.             notice: 0,

10.             platform: 'h6',

11.             needNewCode: 1,

12.             _: Date.now()

13.         };

14.         wx.request({

15.             url: 'http://c.y.qq.com/v8/fcg-bin/fcg_v8_album_info_cp.fcg',

16.             data: data,

17.             header: {

18.                 'Content-Type': 'application/json'

19.             },

20.             success: function (res) {

21.                 console.log(res);

22.                 if (res.statusCode == 200) {

23.                     callback(res.data);

24.                 } else {

25.  

26.                 }

27.             }

28.         });

29. }

30.  

31. module.exports = {

32.   ...

33.   getAlbumInfo:getAlbumInfo

34. }

復制代碼

　　頁面的布局代碼為：

1. <view class="list-top">

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

3.     <view class="top-info-inner">

4.       <view class="top-info-text">

5.         <view class="top-info-title">{{albumInfo.name}}</view>

6.         <view class="top-info-base">

7.           <text>{{albumInfo.singername}}</text>

8.           <text style="margin-left: 5px;">{{albumInfo.aDate}}</text>

9.           <text style="margin-left:10px;">{{albumInfo.genre}}</text>

10.         </view>

11.       </view>

12.       <view class="top-play"></view>

13.     </view>

14.   </view>

15.   <image class="top-img" mode="aspectFit" src="{{coverImg}}"></image>

16.   <view class="top-back"></view>

17. </view>

18. <view class="song-list" style="background:{{listBgColor}}">

19.   <view class="song-item" wx:for="{{albumInfo.list}}" data-data="{{item.data}}" data-mid="{{item.songmid}}">

20.     <text class="song-index">{{index+1}}</text>

21.     <view class="song-item-title">{{item.songname}}</view>

22.     <view class="song-item-text">

23.       <block wx:for="{{item.singer}}">

24.         <block wx:if="{{index!=0}}">|</block>

25.         {{item.name}}

26.       </block>

27.     </view>

28.   </view>

29. </view>

30. <view class="desc" style="background:{{listBgColor}}">

31.   <view class="desc-title">簡介</view>

32.   <text>{{albumInfo.desc}}</text>

33. </view>

復制代碼

　　簡介部分的格式文件：

1. .desc {

2.   box-sizing: border-box;

3.   font-size: 14px;

4.   padding: 40px 10px;

5.   color: #fff;

6.   line-height: 20px;

7. }

8.  

9. .desc-title {

10.   text-align: center;

11.   width: 100%;

12.   font-size: 16px;

13.   margin-bottom: 20px;

14. }

復制代碼

　　加載數據的代碼為：

1. var MusicService = require('../../services/music');

2. var app = getApp()

3.  

4. Page({

5.     data: {

6.         albumInfo: {},

7.         coverImg: '',

8.     },

9.     onLoad: function (options) {

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

11.         var mid = app.globalData.zhidaAlbummid;

12.         MusicService.getAlbumInfo(mid, this.setPageData)

13.     },

14.     setPageData: function (data) {

15.         if (data.code == 0) {

16.             var albummid = data.data.mid;

17.             var img = 'http://y.gtimg.cn/music/photo/mid_album_500/' + albummid.slice(-2, -1) + '/' + albummid.slice(-1) + '/' + albummid + '.jpg'

18.             this.setData({albumInfo: data.data, coverImg: img});

19.         }

20.     },

21. })

復制代碼

　　這里的點擊事件與前文相同，就不再重復了。

　　另外，我們在首頁里未完成的兩個點擊事件，現在也可以完成了。先看電臺的點擊事件，這個事件與我們剛剛完成的一樣，具體代碼為：

1. radioTap: function (e) {

2.         var dataSet = e.currentTarget.dataset;

3.         MusicService.getRadioMusicList(dataSet.id, function (data) {

4.             wx.navigateTo({

5.                 url: '../play/play'

6.             });

7.             if (data.code == 0) {

8.                 var list = [];

9.                 var dataList = data.data;

10.                 for (var i = 0; i < dataList.length; i++) {

11.                     var song = {};

12.                     var item = dataList[i];

13.                     song.id = item.id;

14.                     song.mid = item.mid;

15.                     song.name = item.name;

16.                     song.title = item.title;

17.                     song.subTitle = item.subtitle;

18.                     song.singer = item.singer;

19.                     song.album = item.album

20.                     song.img = 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + item.album.mid + '.jpg?max_age=2592000'

21.                     list.push(song);

22.                 }

23.                 app.setGlobalData({

24.                     playList: list,

25.                     playIndex: 0

26.                 });

27.             }

28.         });

29.     },

復制代碼

　　這里面getRadioMusicList為網絡請求，具體代碼為：

1. function getRadioMusicList(id,callback){

2.     var data = {

3.             labelid: id,

4.             g_tk: 5381,

5.             uin: 0,

6.             format: 'json',

7.             inCharset: 'utf-8',

8.             outCharset: 'utf-8',

9.             notice: 0,

10.    &nnbsp;        platform: 'h6',

11.             needNewCode: 1,

12.             _: Date.now(),

13.         }

14.         wx.request({

15.             url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_radiosonglist.fcg',

16.             data: data,

17.             header: {

18.                 'Content-Type': 'application/json'

19.             },

20.             success: function (res) {

21.                 if (res.statusCode == 200) {

22.                     callback(res.data);

23.                 } else {

24.  

25.                 }

26.  

27.             }

28.         });

29. }

30.  

31. module.exports = {

32.   ...

33.   getRadioMusicList:getRadioMusicList

34. }

復制代碼

　　另一部分為搜索結果里歌曲的點擊事件

1. musuicPlay: function (e) {

2.         var dataSet = e.currentTarget.dataset;

3.         var playingSongs = app.globalData.playList;

4.         if (typeof dataSet.index !== 'undefined') {

5.             var index = dataSet.index;

6.             var item = this.data.searchSongs[index];

7.             var song = {};

8.             var album = {};

9.             album.mid = item.albummid

10.             album.id = item.albumid

11.             album.name = item.albumname;

12.             album.desc = item.albumdesc

13.  

14.             song.id = item.songid;

15.             song.mid = item.songmid;

16.             song.name = item.songname;

17.             song.title = item.songorig;

18.             song.subTitle = '';

19.             song.singer = item.singer;

20.             song.album = album;

21.             song.time_public = item.time_public;

22.             song.img = 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + album.mid + '.jpg?max_age=2592000'

23.             this.addPlayingSongs(song);

24.         }

25.     },

復制代碼

　　前面的內容與我們寫過的一樣，最后我們沒有直接更新全局變量而是調用了一個新方法，因為前文所有的點擊事件都更新了整個播放列表，而我們點擊某一首歌曲時，我們希望添加這首歌到已有的列表中，而不是先清空它。

1. addPlayingSongs: function (song) {

2.         var playingSongs = app.globalData.playList;         //獲取當前的播放列表

3.         var index = -1;

4.         if (typeof playingSongs === 'undefined') {          //判斷列表是否為空

5.             playingSongs = [];

6.             playingSongs.push(song);

7.             app.setGlobalData({                         //如果是空的話，直接更新全局變量

8.                 playList: playingSongs,

9.                 playIndex: 0

10.             });

11.         } else {                                  //不為空的話我們先判斷當前列表是否包含選定歌曲

12.             for (var i = 0; i < playingSongs.length; i++) {    //遍歷整個列表

13.                 var item = playingSongs[i];

14.                 if (item.mid == song.mid) {           //如果發現有mid相同的(即同一首歌)

15.                     index = i;                     //獲取這首歌在列表里的序號

16.                     break;

17.                 }

18.             }

19.             if (index != -1) {                   //歌曲已存在

20.                 app.setGlobalData({   

21.                     playIndex: index             //用我們獲取的序號更新當前播放序號

22.                 });

23.             } else {                                    //不存在的情況

24.                 playingSongs.push(song);

25.                 index = playingSongs.length - 1;    //將歌曲加入播放列表，播放序號改為列表最后一項

26.                 app.setGlobalData({

27.                     playList: playingSongs,

28.                     playIndex: index

29.                 });

30.             }

31.         }

32.         wx.navigateTo({

33.             url: '../play/play'

34.         });

35.     },

關于“微信小程序制作音樂播放器的代碼怎么寫”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序制作音樂播放器的代碼怎么寫”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。