微信小程序创建BackgroundAudioManager实例，播放背景音频

打不着的大喇叭

发布于 2024-03-11 17:36:23

3030

发布于 2024-03-11 17:36:23

微信官方文档网址：媒体 / 背景音频 / BackgroundAudioManager

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

当前展示的音乐播放界面，我们从音乐列表跳转到当前界面，并传递参数【某条音乐的id --musicId】然后我们去获取它的作者、歌名等等【this.getMusicInfo】，去渲染我们的界面其他内容，再通过【musicId】去获取音乐播放地址

const backgroundAudioManager = wx.getBackgroundAudioManager()

1、getBackgroundAudioManager的属性
// 1.1歌曲歌名
backgroundAudioManager.title = '喇叭之歌'
// 1.2歌曲专辑名称
backgroundAudioManager.epname = '喇叭的专辑'
// 1.3歌曲作者
backgroundAudioManager.singer = '打不着的大喇叭'
// 1.4设置了 src 之后会自动播放
backgroundAudioManager.src = 'http://-----'

我们页面加载生命周期中时，创建背景音频的实例对象，并挂在this上，这个时候再去创建这个实例上的【监视音乐播放/暂停/停止】方法，通过这个区修改【isPlay】值，控制播放暂停，无论是页面我们自己设置的按钮，或者是通知栏上的按钮都可以。

Page({
  data: {
    isPlay: false,// 音乐是否播放
    song: {}, // 歌曲详情对象
    musicId: '', // 音乐id
  },

  onLoad(options) {
    this.setData({ musicId: options.musicId})

    // 获取音乐详情
    this.getMusicInfo(options.musicId);

    // 创建控制音乐播放的实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    // 监视音乐播放/暂停/停止
    this.backgroundAudioManager.onPlay(() => {
      this.changePlayState(true);
    });
    this.backgroundAudioManager.onPause(() => {
      this.changePlayState(false);
    });
    this.backgroundAudioManager.onStop(() => {
      this.changePlayState(false);
    });
  },

  // 修改播放状态的功能函数
  changePlayState(isPlay) {
    // 修改音乐是否的状态
    this.setData({ isPlay })
  },

  // 获取音乐详情的功能函数
  async getMusicInfo(musicId) {
    let songData = await request('/song/detail', { ids: musicId });

    this.setData({
      song: songData.songs,
    })
  },

  // 点击播放/暂停的回调
  handleMusicPlay() {
    let isPlay = !this.data.isPlay;

    let { musicId } = this.data;
    this.musicControl(isPlay, musicId);
  },

  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay, musicId) {
    if (isPlay) { // 音乐播放
      // 获取音乐播放链接
      let musicLinkData = await request('/song/url', { id: musicId });
      let musicLink = musicLinkData.data[0].url;

      this.backgroundAudioManager.title = this.data.song.name;
      this.backgroundAudioManager.epname = this.data.song.al.name
      this.backgroundAudioManager.singer = this.data.song.aralosongName
      this.backgroundAudioManager.src = musicLink;
    } else { // 暂停音乐
      this.backgroundAudioManager.pause();
    }
  },
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-02-21，如有侵权请联系 cloudcommunity@tencent.com 删除

函数