简单实现微信小程序音乐音频播放的功能

效果图：

1）获取歌曲详情页的数据
从每日推荐列表点击各歌曲跳转到歌曲详情页的时候，需要携带歌曲的id,在路由中把歌曲的id传到歌曲详情页的页面中使用（在wxml文件中通过data-id的形式把id传歌曲id）

recommendSong.js

 // 跳转至songDetail的回调
  tosongDetail(event){
    
    
    let musicId=event.currentTarget.dataset.id
    console.log(song)
    // 路由跳转传参可以使用query的形式
    wx.navigateTo({
    
    
      url: '/pages/songDetail/songDetail?musicId='+musicId,
    })
  },

2）在songDetail.js文件中，可以在onload这个周期函数中的options参数里获取到recommendSong.js中通过路由传过来的参数，然后拿到musicId去调用歌曲详情页的接口获取歌曲详情数据
songDetail.js

  data: {
    
    
    isPlay:false, //标识音乐是否播放
    song:{
    
    },
    musicId:'', //音乐的Id
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    

    // 获取音乐id
    let musicId=options.musicId
    this.setData({
    
    
      musicId
    })
    this.getMusicInfo(musicId)
  },

  // 封装获取音乐详情的功能函数
  async getMusicInfo(musicId){
    
    
    let songData=await request('/song/detail',{
    
    ids:musicId})
    // console.log(songData)
    // 更新song详情对象
    this.setData({
    
    
      song:songData.songs[0]
    })
  },

3）

1. 渲染完页面之后，需要实现音乐的播放或者暂停功能（通过打的标识isPlay实现），
2. 点击播放按钮的时候进行播放，绑定相应的点击事件函数，
3. 需要实现播放功能，需要封装一个音频播放函数，在点击事件进行的时候同步进行播放或者暂停
   （1）调用相应的接口获取到相应的音乐播放地址
   （2）获取到实现音频播放的实例，背景播放通过wx.getBackgroundAudioManager()
   （3）若要播放（isPlay为true）把地址添加进这个音频实例的src属性里面去，实现播放功能，同时还要给这个实例添加一个title属性才不会报错
   （4）若要暂停，也要通过这个音频实例调用pause方法进行实现

<text class="iconfont {
     
     {isPlay?'icon-zanting': 'icon-bofang'}} big" bindtap="handleMusicPlay"></text>

songDetail.js

  // 点击播放或暂停的回调
  handleMusicPlay(){
    
    
    let isPlay=!this.data.isPlay
    // 修改是否播放的状态
    this.setData({
    
    
      isPlay
    })
    let {
    
    musicId}=this.data
    this.musicControl(isPlay,musicId)
  },

  // 封装控制音乐播放暂停的功能函数
  async musicControl(isPlay,musicId){
    
    
    // 获取音乐的播放地址
    let musicLinkData=await request('/song/url',{
    
    id:musicId})
    let musicLink=musicLinkData.data[0].url
    let backgroundAudioManager=wx.getBackgroundAudioManager()
    if (isPlay) {
    
    //播放音乐
      // 生成背景音频实例
      backgroundAudioManager.src=musicLink
      backgroundAudioManager.title=this.data.song.name
    }else{
    
    //暂停音乐
      backgroundAudioManager.pause()
    }
  },

到这里点击播放音频的时候，还会出现报错，如下：

根据提示需要在app.json中配置相应属性才能实现audio的播放效果：

"requiredBackgroundModes": ["audio"]