1.首先導入大佬封裝的js 方法（調用音樂api）
展示(項目下載在最下方)：
2.調用js 方法!

// pages/showplayer/index.js const app=getApp(); const bgMusic = wx.getBackgroundAudioManager(); const { MusicManager } = require("../../NetEaseCloudMusicApi/src/MusicManager"); Page({/*** 頁面的初始數據*/data: {pageHeight: null, windowHeight:null,musicInforList:[], //歌曲信息animation: '',kphc:"", //看破紅塵playIsNo:true,showMask:true, //蒙版showCouponListHide:true, //是否顯示音樂列表musicListInformation:[],//音樂列表selectMusicIndex:0, //選擇的歌曲下標playericon:"../../resource/md-square-outline.png"},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {let that=this;this.setData({pageHeight: wx.getSystemInfoSync().windowHeight ,windowHeight:wx.getSystemInfoSync().windowWidth ,}) async function test() {let musicList = [];let musicSearchHelper = MusicManager.getMusicSearchHelper({ keyword: "熱門", limit: 20 });musicList.push(await musicSearchHelper.getSearchResult())console.log(musicList)that.setData({musicInforList:musicList[0][0]})that.getMusicUrl(musicList[0][0].id,function(result){console.log(result);})// for (let i = 0; i < musicList.length; i++) {// for (let j = 0; j < 20; j++) {// id: musicList[i][j].id// }// }}test();},// 獲取歌曲urlgetMusicUrl :function(musicId, callback) {async function test() {let musicUrlHelper = MusicManager.getMusicUrlHelper(musicId);let url = await musicUrlHelper.getUrlResult();// console.log(`${url}`);callback(`${url}`)}test(); },/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {this.getRandom();},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {},/*** 獲得隨機整數*/getRandom:function(){let showMingYan=["你記得回來的路，卻為何忘了人間的距離。","恰恰用心時，恰恰無心用，無心恰恰用，常用恰恰無。","我們永遠走不到彼此的那段去，因此我們都活在自己的極致。","我只是你的過客，卻在你的世界流連忘返。","年輪一圈圈密集，能回憶的故事卻少之又少。","如果我們注定不是一路人，怎么樣嘗試接近都是徒勞。","愛情，這場沒有硝煙的戰爭，我們都輸給了彼此。","愛別離，怨憎會，撒手西歸，全無是類。不過是滿眼空花，一片虛幻。","人到情多情轉薄，而今真個不多情。","拯救不了世界也沒關系，能給身邊的人溫暖和快樂已經很足夠了。","人永遠不知道哪次不經意的跟你說了再見之后就真的再也不見。",]var num=Math.random();num=num * 11;num = Math.ceil(num); //上取整，完成隨機生成1——10的整數this.setData({kphc: showMingYan[num]})},//點擊播放或者暫停stopAndStartMusicTap:function(){let that=this;if (that.data.playIsNo==true){bgMusic.pause();this.setData({playericon: "../../resource/md-square.png"})}else{bgMusic.play();this.setData({playericon: "../../resource/md-square-outline.png"})}this.setData({playIsNo: !that.data.playIsNo})},//點擊列表showMusicListTap:function(){this.setData({showMask: false, showCouponListHide: false})},//點擊蒙版maskTap:function(){this.setData({showMask: true,showCouponListHide: true})},})

3.json文件

{"usingComponents": {"i-icon": "../../dist/icon/index","i-toast": "../../dist/toast/index"},"navigationBarTitleText": "音樂播放" }

4.wxml

<!--pages/showplayer/index.wxml--><view class="applicationcontext-page"style="height:{{pageHeight}}px"><view class="showplery-page"><image class="showplery-image-page" src="{{musicInforList.picUrl}}"aanimation="{{animation}}" mode="scaleToFill"></image></view><view class="bottom-up-page"><view class="icon-page-y"><i-icon type="like" color="black" size="25"/></view><view class="icon-page-y"><i-icon type="keyboard" color="black" size="25"/></view> <view class="yuan-page"style="margin-left:20%;"><i-icon type="switch" color="black" size="20"/></view></view><view class="bottom-dwon-page"><view class="icon-page-y-b"><i-icon type="share" color="black" size="25"/></view><view class="yuan-page-b"bindtap="lastOneTap"><image class="icon-imagesty" src="../../resource/ios-arrow-dropleft.png"></image></view><view class="yuan-page-b"><image class="icon-imagesty" src="{{playericon}}"bindtap="stopAndStartMusicTap"data-bol></image></view><view class="yuan-page-b"bindtap="nextOneTap"><image class="icon-imagesty" src="../../resource/ios-arrow-dropright.png"></image></view> <view class="icon-page-y-b"bindtap="showMusicListTap"><i-icon type="createtask" color="black" size="25"/></view></view><view class="show-textinfor-musicinfor">{{musicInforList.name}} - {{musicInforList.artistsName}}</view> </view><view class="show-textinfor"style="top:60px">{{parse.showText(kphc)}} </view><!--蒙版--> <view class="mask-page" hidden="{{showMask}}"bindtap="maskTap"> </view><view class="musicList-page"hidden="{{showCouponListHide}}"><view class="musicList-page-head"><view class="musicList-page-body-list-left-infor">音樂列表（{{musicListInformation.length}}）</view><view class="musicList-page-body-list-icon"style="padding-right:3%"><i-icon type="trash_fill" size="20"/></view></view><view class="musicList-page-body"><scroll-view scroll-y><view class="musicList-page-body-list"wx:for="{{musicListInformation}}" wx:for-item='musicItem' wx:for-index='musicIndex' wx:key='{{musicIndex}}'><view class="musicList-page-body-list-left-infor"bindtap="musicMusicTap"data-index="{{musicIndex}}"> <view class="musicList-page-body-list-name">{{musicItem.name}}</view><view class="musicList-page-body-list-artistsname">-{{musicItem.artistsName}}</view></view><view class="musicList-page-body-list-icon"><i-icon type="close" size="17"/></view></view></scroll-view></view> </view><wxs module='parse'>module.exports={showText:function(res){if(res!=null && res!=''){return res;}else{return "天上天下，唯我獨尊，自觀自在，守本真心。"; }}} </wxs>

5.css 樣式

/* pages/showplayer/index.wxss */ .applicationcontext-page{width: 100%;display: flex;flex-flow: column;background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574497461493&di=7bb0bee6e3c47fe1f90f7a2f28418791&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F06%2F06%2Fc6c6423a3661cc6e8ffcf47e52af4230.jpg");background-repeat: no-repeat no-repeat; }.showplery-page{display: flex;align-items: center;justify-content: center;width: 100%;height: 85%; }@keyframes iconRotate{0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);} }.showplery-image-page{width: 500rpx;height: 500rpx;border-radius: 50% 50%;animation: iconRotate 20s linear infinite;}.bottom-up-page{display: flex;align-items: center;flex-flow: nowrap;width: 100%;height: 7.5%;background-color: #A15718;border-bottom: 1rpx solid #BD782D; }.bottom-dwon-page{display: flex;align-items: center;border-left-width: nowrap;width: 100%;height: 7.5%;background-color: #A15718; }.yuan-page{width:50rpx;height: 50rpx;border-radius: 50% 50%;border: 1rpx solid black;display: flex;justify-content: center;align-items: center;margin-left: 11%; }.icon-page-y{margin-left:20%; }.icon-page-y-b{margin-left: 11%; }.icon-imagesty{width: 100%;height: 100%; }.yuan-page-b{width:60rpx;height: 60rpx;border-radius: 50% 50%;display: flex;justify-content: center;align-items: center;margin-left: 10%; }@keyframes wordsLoop {0% {transform: translateX(200px);-webkit-transform: translateX(200px);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);} }@-webkit-keyframes wordsLoop {0% {transform: translateX(200px);-webkit-transform: translateX(200px);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);} }.show-textinfor{position: absolute;animation:20s wordsLoop linear infinite normal;font-size: 27rpx;color: white;font-weight: bold; }.show-textinfor-musicinfor{position: absolute;bottom: 350rpx;font-size: 33rpx;font-weight: bold;width: 100%;display: flex;justify-content: center;align-items: center;color: white; }.mask-page{width:100%;height: 100%;background:black;z-index: 2;opacity:0.7;position: fixed; bottom: 0rpx; }.musicList-page{width: 100%;height: 700rpx;background-color:#A15718; z-index: 3;position: fixed; bottom: 0rpx;border-radius: 30rpx 30rpx 0 0; }.musicList-page-head{width: 100%;height: 80rpx;display: flex;align-items: center;font-size: 25rpx;font-weight: bold;color: white;padding-left: 20rpx;border-bottom: 1rpx solid #BD782D;flex-flow: nowrap; }.musicList-page-body{width: 100%;height: 620rpx;display: flex; }.musicList-page-body-list{width: 100%;height: 80rpx;display: flex;align-items: center;color: white;flex-flow: nowrap; }.musicList-page-body-list-name{margin-left: 20rpx;font-weight: bold;font-size: 27rpx; }.musicList-page-body-list-artistsname{font-weight: bold;font-size: 23rpx;color: #ccc; }.musicList-page-body-list-icon{width:15%;display: flex;justify-content: center;align-items: center; }.musicList-page-body-list-left-infor{width:85%;display: flex;flex-flow: nowrap;align-items: center; }

點擊下載項目地址
技術交流可聯系博主QQ：930210782

總結

以上是生活随笔為你收集整理的制作属于自己的一个微信小程序音乐播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。