制作属于自己的一个微信小程序音乐播放器

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();
  },

  // 获取歌曲url
 getMusicUrl :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