微信小程序——背景音乐播放

本文介绍了如何在微信小程序中使用BackgroundAudioManager实现背景音乐播放功能。通过wx.getBackgroundAudioManager()获取背景音频管理器,并设置音乐的相关信息,如标题、歌手和封面图片。根据数据的isMusic状态控制音乐的播放与暂停,实现音乐播放链接动态获取,以酷我音乐为例,展示如何从控制台获取音乐播放连接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、要实现如图所示的小程序背景音乐添加:

在这里插入图片描述

2、实现

在微信小程序开放文档——媒体——音频中存在背景音频,BackgroundAudioManager wx.getBackgroundAudioManager()
实现代码:

// 处理音乐播放
  musicControl() {
    let isMusic = !this.data.isMusic
    this.setData({
      isMusic
    })
    // 控制音乐播放
    let {
      dataUrl,
      title,
      coverImgUrl
    } = this.data.detailObj.music;
    // const backgroundAudioManager = wx.getBackgroundAudioManager()
    // console.log(wx.getBackgroundAudioManager());
    // backgroundAudioManager.src = 'https://www.9ku.com/play/361140.htm'

    const backgroundAudioManager = wx.getBackgroundAudioManager()
    backgroundAudioManager.title = '此时此刻'
    backgroundAudioManager.epname = '此时此刻'
    backgroundAudioManager.singer = '许巍'
    backgroundAudioManager.coverImgUrl = 'https://img3.kuwo.cn/star/albumcover/500/46/40/3081156275.jpg'
    // 设置了 src 之后会自动播放
    // backgroundAudioManager.src = 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_28428497&response=res&type=convert_url&'
    // backgroundAudioManager.src='https://ex-sycdn.kuwo.cn/4a2529937d893f52b65a58a65c8e6356/60925dbd/resource/n2/78/6/2264136487.mp3'
    backgroundAudioManager.src=dataUrl

    if (isMusic) {
      backgroundAudioManager.play()
    } else {
      backgroundAudioManager.pause()
    }
  }

代码中音乐播放连接的获取:
这里以酷我音乐为例:

  • 酷我音乐

  • 找到要播放的歌曲,打开控制台:如下图所示:
    -在这里插入图片描述

  • List item

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值