使用wx.getBackgroundAudioManager()来实现背景音乐的播放,暂停,切换页面时,背景音乐停止播放
发布于 4 年前 作者 xiuyingzhao 1013 次浏览 来自 分享

对用到这个api的伙伴,有点帮助,这是我参考网上的教程,总结出来的

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 获取BackgroundAudioManager 实例
    this.back = wx.getBackgroundAudioManager()  
    // 对实例进行设置
    // 设置了 src 之后会自动播放(src为云开发中云存储空间文件的链接)
    this.back.src = "音乐地址"
    this.back.title = '夜的钢琴曲'   // 标题为必选项
    this.back.play()               // 开始播放
    // 背景音乐循环的方法
    var that = this.back
    // 1、onEnded监听播放自然结束
    this.back.onEnded (function(){
      // 2、必须重新设置src才能循环之后会重新自动播放
      that.src = "音乐地址"
    })
  },
  handleProxy() { 
    this.back.pause(); // 点击音乐图标后出发的操作
    this.setData({ on: !this.data.on })
    if (this.data.on) { 
      this.back.play();
      // toast 提示信息
      var that = this;
      this.setData({
        showModal: true  // 显示 toast
      })
      // 定时器 500ms 关闭toast
      setTimeout(function() {
        that.setData({
          showModal: false  
        })
      },500)
      console.log("背景音乐已开启");
    }else{
     this.back.pause();
      // toast 提示信息
      var that = this;
      this.setData({
        showModalh:true  // 显示 toast
      })
      // 定时器 500ms 关闭toast
      setTimeout(function() {
        that.setData({
          showModalh: false
        })
      },500)
     console.log("背景音乐已暂停");
    }
  },
  
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 切换页面时,再次回到原页面,
    // 1.onHide() 中使用 pause() 会继续播放背景音乐
    // 1.onHide() 中使用 stop()  会重新播放背景音乐
    this.onReady()
  },
  
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    // 页面隐藏时,暂停背景音乐
    let that = this.back;
    // that.pause();  //当重新回到原页面时,继续播放
    that.stop(); //当重新回到原页面时,重新播放
  },
回到顶部