Simple implementation of WeChat applet music audio playback function

Renderings:

1) Obtain the data of the song details page.
When clicking on each song in the daily recommendation list to jump to the song details page, you need to carry the id of the song, and pass the song id to the page of the song details page in the route for use (in wxml Pass the id to the song id in the form of data-id in the file)

recommendSong.js

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

2) In the songDetail.js file, you can get the parameters passed through the route in recommendSong.js in the options parameter in the onload cycle function, and then get the musicId to call the interface of the song detail page to obtain the song detail data 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. After rendering the page, it is necessary to implement the music playback or pause function (realized by marking isPlay),
2. Play when the play button is clicked, bind the corresponding click event function,
3. The playback function needs to be implemented, and an audio playback function needs to be encapsulated to play or pause synchronously when the click event is in progress
   (1) Call the corresponding interface to obtain the corresponding music playback address
   (2) Get an instance of audio playback and play in the background Through wx.getBackgroundAudioManager()
   (3) If you want to play (isPlay is true), add the address to the src attribute of this audio instance to realize the playback function, and add a title attribute to this instance so that no error will be reported (
   4 ) If you want to pause, you also need to call the pause method through this audio instance to implement

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

When you click here to play the audio, an error will still appear, as follows:

According to the prompt, you need to configure the corresponding properties in app.json to achieve the audio playback effect:

"requiredBackgroundModes": ["audio"]