IT技术之家

首页 > 小程序

小程序

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

发布时间:2022-10-24 16:46:42 小程序 0次 标签:微信小程序 音视频 小程序
简单实现微信小程序音乐音频播放的功能...

效果图:

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)

    渲染完页面之后,需要实现音乐的播放或者暂停功能(通过打的标识isPlay实现),点击播放按钮的时候进行播放,绑定相应的点击事件函数,需要实现播放功能,需要封装一个音频播放函数,在点击事件进行的时候同步进行播放或者暂停
    (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"]