微信小程序制作音樂(lè)播放器的代碼怎么寫(xiě)

這篇文章主要介紹了微信小程序制作音樂(lè)播放器的代碼怎么寫(xiě)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇微信小程序制作音樂(lè)播放器的代碼怎么寫(xiě)文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

　　網(wǎng)絡(luò)請(qǐng)求的函數(shù)為：

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. }

復(fù)制代碼

　　頁(yè)面的布局代碼為：

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">簡(jiǎn)介</view>

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

33. </view>

復(fù)制代碼

　　簡(jiǎn)介部分的格式文件：

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. }

復(fù)制代碼

　　加載數(shù)據(jù)的代碼為：

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.         // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)

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. })

復(fù)制代碼

　　這里的點(diǎn)擊事件與前文相同，就不再重復(fù)了。

　　另外，我們?cè)谑醉?yè)里未完成的兩個(gè)點(diǎn)擊事件，現(xiàn)在也可以完成了。先看電臺(tái)的點(diǎn)擊事件，這個(gè)事件與我們剛剛完成的一樣，具體代碼為：

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.     },

復(fù)制代碼

　　這里面getRadioMusicList為網(wǎng)絡(luò)請(qǐng)求，具體代碼為：

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. }

復(fù)制代碼

　　另一部分為搜索結(jié)果里歌曲的點(diǎn)擊事件

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.     },

復(fù)制代碼

　　前面的內(nèi)容與我們寫(xiě)過(guò)的一樣，最后我們沒(méi)有直接更新全局變量而是調(diào)用了一個(gè)新方法，因?yàn)榍拔乃械狞c(diǎn)擊事件都更新了整個(gè)播放列表，而我們點(diǎn)擊某一首歌曲時(shí)，我們希望添加這首歌到已有的列表中，而不是先清空它。

1. addPlayingSongs: function (song) {

2.         var playingSongs = app.globalData.playList;         //獲取當(dāng)前的播放列表

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 {                                  //不為空的話我們先判斷當(dāng)前列表是否包含選定歌曲

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

13.                 var item = playingSongs[i];

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

15.                     index = i;                     //獲取這首歌在列表里的序號(hào)

16.                     break;

17.                 }

18.             }

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

20.                 app.setGlobalData({   

21.                     playIndex: index             //用我們獲取的序號(hào)更新當(dāng)前播放序號(hào)

22.                 });

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

24.                 playingSongs.push(song);

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

26.                 app.setGlobalData({

27.                     playList: playingSongs,

28.                     playIndex: index

29.                 });

30.             }

31.         }

32.         wx.navigateTo({

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

34.         });

35.     },

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