小程序——录音、音频播放控制和背景音乐

录音、音频播放控制和背景音乐

  • 一、录音
    • [1.1、wx.startRecord(Object object)](#1.1、wx.startRecord(Object object))
    • [1.2、wx.stopRecord(Object object)](#1.2、wx.stopRecord(Object object))
    • [1.3、RecorderManager wx.getRecorderManager()](#1.3、RecorderManager wx.getRecorderManager())
    • 1.4、示例
  • 二、音频播放
    • [2.1、wx.stopVoice(Object object)](#2.1、wx.stopVoice(Object object))
    • [2.2、wx.setInnerAudioOption(Object object)](#2.2、wx.setInnerAudioOption(Object object))
    • [2.3、wx.playVoice(Object object)](#2.3、wx.playVoice(Object object))
    • [2.4、wx.pauseVoice(Object object)](#2.4、wx.pauseVoice(Object object))
    • [2.5、wx.getAvailableAudioSources(Object object)](#2.5、wx.getAvailableAudioSources(Object object))
    • [2.6、WebAudioContext wx.createWebAudioContext()](#2.6、WebAudioContext wx.createWebAudioContext())
    • [2.7、MediaAudioPlayer wx.createMediaAudioPlayer()](#2.7、MediaAudioPlayer wx.createMediaAudioPlayer())
    • [2.8、InnerAudioContext wx.createInnerAudioContext(Object object)](#2.8、InnerAudioContext wx.createInnerAudioContext(Object object))
    • [2.9、AudioContext wx.createAudioContext(string id, Object this)](#2.9、AudioContext wx.createAudioContext(string id, Object this))
    • 2.10、示例
  • 三、背景音乐
    • [3.1、wx.stopBackgroundAudio(Object object) (过期)](#3.1、wx.stopBackgroundAudio(Object object) (过期))
    • [3.2、wx.seekBackgroundAudio(Object object)(过期)](#3.2、wx.seekBackgroundAudio(Object object)(过期))
    • [3.3、wx.playBackgroundAudio(Object object)(过期)](#3.3、wx.playBackgroundAudio(Object object)(过期))
    • [3.4、wx.pauseBackgroundAudio(Object object)(过期)](#3.4、wx.pauseBackgroundAudio(Object object)(过期))
    • [3.5、wx.onBackgroundAudioStop(function listener)(过期)](#3.5、wx.onBackgroundAudioStop(function listener)(过期))
    • [3.6、wx.onBackgroundAudioPlay(function listener)(过期)](#3.6、wx.onBackgroundAudioPlay(function listener)(过期))
    • [3.7、wx.onBackgroundAudioPause(function listener)](#3.7、wx.onBackgroundAudioPause(function listener))
    • [3.8、wx.getBackgroundAudioPlayerState(Object object)(过期)](#3.8、wx.getBackgroundAudioPlayerState(Object object)(过期))
    • [3.9、BackgroundAudioManager wx.getBackgroundAudioManager()](#3.9、BackgroundAudioManager wx.getBackgroundAudioManager())
    • 3.10、BackgroundAudioManager
    • 3.11、示例

一、录音

1.1、wx.startRecord(Object object)

开始录音。当主动调用 wx.stopRecord,或者录音超过1分钟时自动结束录音。当用户离开小程序时,此接口无法调用。

参数:Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success回调函数

参数:Object res

属性 类型 说明
tempFilePath string 录音文件的临时路径 (本地路径)
js 复制代码
wx.startRecord({
  success (res) {
    const tempFilePath = res.tempFilePath
  }
})
setTimeout(function () {
  wx.stopRecord() // 结束录音
}, 10000)

1.2、wx.stopRecord(Object object)

停止录音。

参数:Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.startRecord({
  success (res) {
    const tempFilePath = res.tempFilePath
  }
})
setTimeout(function () {
  wx.stopRecord() // 结束录音
}, 10000)

1.3、RecorderManager wx.getRecorderManager()

获取全局唯一的录音管理器 RecorderManager。RecorderManager常用函数如下:

接口 功能和用途
RecorderManager.start(Object object) 开始录音
RecorderManager.pause() 暂停录音
RecorderManager.resume() 继续录音
RecorderManager.stop() 停止录音
RecorderManager.onStart(function listener) 监听录音开始事件
RecorderManager.onResume(function listener) 监听录音继续事件
RecorderManager.onPause(function listener) 监听录音暂停事件
RecorderManager.onStop(function listener) 监听录音结束事件
RecorderManager.onFrameRecorded(function listener) 监听已录制完指定帧大小的文件事件。如果设置了 frameSize,则会回调此事件。
RecorderManager.onError(function listener) 监听录音错误事件
RecorderManager.onInterruptionBegin(function listener) 监听录音因为受到系统占用而被中断开始事件。以下场景会触发此事件:微信语音聊天、微信视频聊天。此事件触发后,录音会被暂停。pause 事件在此事件后触发
RecorderManager.onInterruptionEnd(function listener) 监听录音中断结束事件。在收到 interruptionBegin 事件之后,小程序内所有录音会暂停,收到此事件之后才可再次录音成功。
js 复制代码
const recorderManager = wx.getRecorderManager()

recorderManager.onStart(() => {
  console.log('recorder start')
})
recorderManager.onPause(() => {
  console.log('recorder pause')
})
recorderManager.onStop((res) => {
  console.log('recorder stop', res)
  const { tempFilePath } = res
})
recorderManager.onFrameRecorded((res) => {
  const { frameBuffer } = res
  console.log('frameBuffer.byteLength', frameBuffer.byteLength)
})

const options = {
  duration: 10000,
  sampleRate: 44100,
  numberOfChannels: 1,
  encodeBitRate: 192000,
  format: 'aac',
  frameSize: 50
}

recorderManager.start(options)

1.4、示例

本例通过recorderManager.wxml中的5个按钮来调用RecorderManager录音管理器的录音、暂停、继续录音、停止录音和播放录音功能。在录制好音频之后也可以上传到服务器,本例只是把录制好的音频存放在手机临时目录,然后用来播放。

html 复制代码
<view>
  <button bind:tap="start" class="btn">开始录音</button>
  <button bind:tap="pause" class="btn">暂停录音</button>
  <button bind:tap="resume" class="btn">继续录音</button>
  <button bind:tap="stop" class="btn">停止录音</button>
  <button bind:tap="play" class="btn">播放录音</button>
</view>
js 复制代码
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
Page({
  data: {

  },
  onLoad: function() {

  },
  start: function(){
    const options = {
      duration: 10000,//录音时长
      sampleRate: 16000,//采样率
      numberOfChannels: 1,//录音通道数
      encodeBitRate: 96000,//编码码率
      format: "mp3",//音频格式acc/mp4
      frameSize: 50//指定帧大小,单位KB
    }
    wx.authorize({ //授权接口
      scope: "scope.record",
      success: ()=>{
        console.log("录音授权成功")
        this.setData({
          status: 2 //第一次成功授权以后,状态切换为2
        })
        recorderManager.start(options)
        recorderManager.onStart(()=>{
          console.log("recorder start")
        })
        recorderManager.onError((res)=>{
          console.log(res)
        })
      },
      fail: ()=>{
        console.log("第一次录音授权失败")
        wx.showModal({
          title: "提示",
          content: "您未授权录音,功能将无法使用",
          showCancel: true,
          confirmText: "授权",
          confirmColor: "#52a2d8",
          success: (res)=>{
            if(res.confirm) {
              wx.openSetting({
                success: (res)=>{
                  console.log(res.authSetting)
                  if(!res.authSetting["scope.addPhoneCalendar.record"]){
                    //未设置录音授权
                    console.log("未设置录音授权")
                    wx.showModal({
                      title:"提示",
                      content: "您未授权录音,功能将无法使用",
                      showCancel: false,
                      success: (res)=>{}
                    })
                  } else {
                    console.log("设置录音授权成功") //第二次才授权成功
                    this.setData({
                      status: 2
                    })
                    recorderManager.start(options)
                    recorderManager.onStart(()=>{
                      console.log("recorder start")
                    })
                    recorderManager.onError((res)=>{
                      console.log(res)
                    })
                  }
                },
                fail: ()=>{
                  console.log("授权设置录音失败")
                }
              })
            } else if (res.cancel) {
              console.log("cancel")
            }
          },
          fail: ()=> [
            console.log("openfail")
          ]
        })
      }
    })
  },
  pause: function() {
    recorderManager.pause()
    recorderManager.onPause(()=>{
      console.log("暂停录音")
    })
  },
  resume: function(){
    recorderManager.resume()
    recorderManager.onStart(()=>{
      console.log("重新开始录音")
    })
    recorderManager.onError((res)=>{
      console.log(res)
    })
  },
  stop: function() {
    recorderManager.stop()
    recorderManager.onStop((res)=>{
      this.tempFilePath = res.tempFilePath;
      console.log("停止录音", res.tempFilePath)
      const {tempFilePath} = res
    })
  },
  play: function() {
    innerAudioContext.autoplay = true 
    innerAudioContext.src = this.tempFilePath
    innerAudioContext.onPlay(()=>{
      console.log("开始播放")
    })
    innerAudioContext.onError((res)=>{
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  }
})

二、音频播放

2.1、wx.stopVoice(Object object)

结束播放语音。

参数:Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.startRecord({
  success (res) {
    const tempFilePath = res.tempFilePath
    wx.playVoice({
      filePath: tempFilePath,
    })

    setTimeout(() => { wx.stopVoice() }, 5000)
  }
})

2.2、wx.setInnerAudioOption(Object object)

设置 InnerAudioContext 的播放选项。设置之后对当前小程序全局生效。

参数:Object object

属性 类型 默认值 必填 说明
mixWithOther boolean true 是否与其他音频混播,设置为 true 之后,不会终止其他应用或微信内的音乐
obeyMuteSwitch boolean true (仅在 iOS 生效)是否遵循静音开关,设置为 false 之后,即使是在静音模式下,也能播放声音
speakerOn boolean true true 代表用扬声器播放,false 代表听筒播放,默认值为 true。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

2.3、wx.playVoice(Object object)

开始播放语音。同时只允许一个语音文件正在播放,如果前一个语音文件还没播放完,将中断前一个语音播放。

参数:Object object

属性 类型 默认值 必填 说明
filePath string 需要播放的语音文件的文件路径 (本地路径)
duration number 60 指定播放时长,到达指定的播放时长后会自动停止播放,单位:秒
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.startRecord({
  success (res) {
    const tempFilePath = res.tempFilePath
    wx.playVoice({
      filePath: tempFilePath,
      complete () { }
    })
  }
})

2.4、wx.pauseVoice(Object object)

暂停正在播放的语音。再次调用 wx.playVoice 播放同一个文件时,会从暂停处开始播放。如果想从头开始播放,需要先调用 wx.stopVoice。

参数:Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.startRecord({
  success (res) {
    const tempFilePath = res.tempFilePath
    wx.playVoice({
      filePath: tempFilePath
    })

    setTimeout(() => { wx.pauseVoice() }, 5000)
  }
})

2.5、wx.getAvailableAudioSources(Object object)

获取当前支持的音频输入源。

参数:Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success回调函数

参数:Object res

属性 类型 说明
audioSources Array.<string> 支持的音频输入源列表,可在 RecorderManager.start() 接口中使用。返回值定义参考 https://developer.android.com/reference/kotlin/android/media/MediaRecorder.AudioSource

合法值如下:

合法值 说明
auto 自动设置,默认使用手机麦克风,插上耳麦后自动切换使用耳机麦克风,所有平台适用
buildInMic 手机麦克风,仅限 iOS
headsetMic 耳机麦克风,仅限 iOS
mic 麦克风(没插耳麦时是手机麦克风,插耳麦时是耳机麦克风),仅限 Android
camcorder 同 mic,适用于录制音视频内容,仅限 Android
voice_communication 同 mic,适用于实时沟通,仅限 Android
voice_recognition 同 mic,适用于语音识别,仅限 Android

2.6、WebAudioContext wx.createWebAudioContext()

创建 WebAudio 上下文。

js 复制代码
const audioCtx = wx.createWebAudioContext()

const loadAudio = (url) => {
  return new Promise((resolve) => {
    wx.request({
      url,
      responseType: 'arraybuffer',
      success: res => {
        console.log('res.data', res.data)
        audioCtx.decodeAudioData(res.data, buffer => {
          resolve(buffer)
        }, err => {
          console.error('decodeAudioData fail', err)
          reject()
        })
      },
      fail: res => {
        console.error('request fail', res)
        reject()
      }
    })
  })
}

const play = () => {
  loadAudio('xxx-test.mp3').then(buffer => {
    let source = audioCtx.createBufferSource()
    source.buffer = buffer
    source.connect(audioCtx.destination)
    source.start()
  }).catch(() => {
    console.log('fail')
  })
}

play()

2.7、MediaAudioPlayer wx.createMediaAudioPlayer()

创建媒体音频播放器对象 MediaAudioPlayer 对象,可用于播放视频解码器 VideoDecoder 输出的音频。

js 复制代码
  // 创建视频解码器,具体参数见 createVideoDecoder 文档
  const videoDecoder = wx.createVideoDecoder()
  // 创建媒体音频播放器
  const mediaAudioPlayer = wx.createMediaAudioPlayer()
  // 启动视频解码器
  videoDecoder.start()
  // 启动播放器
  mediaAudioPlayer.start().then(() => {
    // 添加播放器音频来源
    mediaAudioPlayer.addAudioSource(videoDecoder).then(res => {
      videoDecoder.getFrameData() // 建议在 requestAnimationFrame 里获取每一帧视频数据
      console.log(res)
    })

    // 移除播放器音频来源
    mediaAudioPlayer.removeAudioSource(videoDecoder).then()
    // 停止播放器
    mediaAudioPlayer.stop().then()
    // 销毁播放器
    mediaAudioPlayer.destroy().then()
    // 设置播放器音量
    mediaAudioPlayer.volume = 0.5
  })

2.8、InnerAudioContext wx.createInnerAudioContext(Object object)

创建内部 audio 上下文 InnerAudioContext 对象。

参数:Object object

属性 类型 默认值 必填 说明
useWebAudioImplement boolean false 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项。

返回值:InnerAudioContext

InnerAudioContext 音频资源不会自动释放,因此如果不再需要使用音频,请及时调用 InnerAudioContext.destroy() 释放资源,避免内存泄漏。

js 复制代码
const innerAudioContext = wx.createInnerAudioContext({
  useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项
})
innerAudioContext.src = 'https://wx_test.mp3'

innerAudioContext.play() // 播放

innerAudioContext.pause() // 暂停

innerAudioContext.stop() // 停止

innerAudioContext.destroy() // 释放音频资源

2.9、AudioContext wx.createAudioContext(string id, Object this)

创建 audio 上下文 AudioContext 对象。

  • string id:audio 组件的 id
  • Object this:在自定义组件下,当前组件实例的this,以操作组件内 audio 组件

AudioContext常用函数如下:

接口 功能和用途
AudioContext.setSrc(string src) 设置音频地址
AudioContext.play() 播放音频
AudioContext.pause() 暂停音频
AudioContext.seek(number position) 跳转到指定位置

2.10、示例

html 复制代码
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<slider bindchange="change" min="0" max="160" value="{{time}}" color="blue" selected-color="red" show-value="true"></slider>
<button class="b1" type="primary" size="mini" bind:tap="audioPlay">播放</button>
<button class="b1" type="primary" size="mini" bind:tap="audioPause">暂停</button>
js 复制代码
Page({
  data: {
    time: 0,
    poster: "http://127.0.0.1:8080/download/xuwei.jpeg",
    name: "此时此刻",
    author: "许巍",
    src: "http://127.0.0.1:8080/download/111.mp3"
  },
  onReady: function() {
    this.audioCtx = wx.createAudioContext("myAudio")
  },
  audioPlay: function() {
    this.audioCtx.play()
  },
  audioPause: function() {
    this.audioCtx.pause()
  },
  audio14: function() {
    this.audio14.seek(0)
  },
  change: function(e) {
    this.audioCtx.seek(e.detail.value)
  }
})

三、背景音乐

3.1、wx.stopBackgroundAudio(Object object) (过期)

停止播放音乐。

参数:Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.stopBackgroundAudio()

3.2、wx.seekBackgroundAudio(Object object)(过期)

控制音乐播放进度。

参数:Object object

属性 类型 默认值 必填 说明
position number 音乐位置,单位:秒
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.seekBackgroundAudio({
  position: 30
})

3.3、wx.playBackgroundAudio(Object object)(过期)

使用后台播放器播放音乐。对于微信客户端来说,只能同时有一个后台音乐在播放。当用户离开小程序后,音乐将暂停播放;当用户在其他小程序占用了音乐播放器,原有小程序内的音乐将停止播放。

参数:Object object

属性 类型 默认值 必填 说明
dataUrl string 音乐链接,目前支持的格式有 m4a, aac, mp3, wav
title string 音乐标题
coverImgUrl string 封面URL
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.playBackgroundAudio({
  dataUrl: '',
  title: '',
  coverImgUrl: ''
})

3.4、wx.pauseBackgroundAudio(Object object)(过期)

暂停播放音乐。

参数:Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.pauseBackgroundAudio()

3.5、wx.onBackgroundAudioStop(function listener)(过期)

监听音乐停止事件。

3.6、wx.onBackgroundAudioPlay(function listener)(过期)

监听音乐播放事件。

3.7、wx.onBackgroundAudioPause(function listener)

监听音乐暂停事件。

3.8、wx.getBackgroundAudioPlayerState(Object object)(过期)

获取后台音乐播放状态。

参数:Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
js 复制代码
wx.getBackgroundAudioPlayerState({
  success (res) {
    const status = res.status
    const dataUrl = res.dataUrl
    const currentPosition = res.currentPosition
    const duration = res.duration
    const downloadPercent = res.downloadPercent
  }
})

3.9、BackgroundAudioManager wx.getBackgroundAudioManager()

获取全局唯一的背景音频管理器。 小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。

从微信客户端6.7.2版本开始,若需要在小程序切后台后继续播放音频,需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效,正式版还需通过审核。

返回值:BackgroundAudioManager

3.10、BackgroundAudioManager

BackgroundAudioManager实例对象是通过wx.getBackgroundAudioManager()接口

获取的,它是小程序官方发布的接口,功能强大,包含其他背景音乐处理接口的所有功能。

BackgroundAudioManager属性如下:

类型 属性 说明
string src 音频的数据源(2.2.3 开始支持云文件ID)。默认为空字符串,当设置了新的 src 时,会自动开始播放,目前支持的格式有 m4a, aac, mp3, wav。
number startTime 音频开始播放的位置(单位:s)
string title 音频标题,用于原生音频播放器音频标题(必填)。原生音频播放器中的分享功能,分享出去的卡片标题,也将使用该值。
string epname 专辑名,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。
string singer 歌手名,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。
string coverImgUrl 封面图 URL,用于做原生音频播放器背景图。原生音频播放器中的分享功能,分享出去的卡片配图及背景也将使用该图。
string webUrl 页面链接,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。
string protocol 音频协议。默认值为 'http',设置 'hls' 可以支持播放 HLS 协议的直播音频。
number playbackRate 播放速度。范围 0.5-2.0,默认为 1。(Android 需要 6 及以上版本)
number duration 当前音频的长度(单位:s),只有在有合法 src 时返回。(只读)
number currentTime 当前音频的播放位置(单位:s),只有在有合法 src 时返回。(只读)
boolean paused 当前是否暂停或停止。(只读)
number buffered 音频已缓冲的时间,仅保证当前播放时间点到此时间点内容已缓冲。(只读)
string referrerPolicy origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;
string referrerPath 关联页面路径。设置后,当点击播放器上的小程序跳转链接时,将跳转到这个关联页面路径(实验特性,目前仅Android端支持)
string audioType 音频类型。可设置 "audio" 和 "music" 两种值,默认为 "audio"。不同音频类型对应的播放器样式不一样(实验特性,目前仅iOS和Android端支持)

BackgroundAudioManager方法如下:

方法 说明
BackgroundAudioManager.play() 播放音乐
BackgroundAudioManager.pause() 暂停音乐
BackgroundAudioManager.seek(number currentTime) 跳转到指定位置
BackgroundAudioManager.stop() 停止音乐
BackgroundAudioManager.onCanplay(function listener) 监听背景音频进入可播放状态事件。 但不保证后面可以流畅播放
BackgroundAudioManager.onWaiting(function listener) 监听音频加载中事件。当音频因为数据不足,需要停下来加载时会触发
BackgroundAudioManager.onError(function listener) 监听背景音频播放错误事件
BackgroundAudioManager.onPlay(function listener) 监听背景音频播放事件
BackgroundAudioManager.onPause(function listener) 监听背景音频暂停事件
BackgroundAudioManager.onSeeking(function listener) 监听背景音频开始跳转操作事件
BackgroundAudioManager.onSeeked(function listener) 监听背景音频完成跳转操作事件
BackgroundAudioManager.onEnded(function listener) 监听背景音频自然播放结束事件
BackgroundAudioManager.onStop(function listener) 监听背景音频停止事件
BackgroundAudioManager.onTimeUpdate(function listener) 监听背景音频播放进度更新事件,只有小程序在前台时会回调。
BackgroundAudioManager.onNext(function listener) 监听用户在系统音乐播放面板点击下一曲事件
BackgroundAudioManager.onPrev(function listener) 监听用户在系统音乐播放面板点击上一曲事件
js 复制代码
const backgroundAudioManager = wx.getBackgroundAudioManager()

backgroundAudioManager.title = '此时此刻'
backgroundAudioManager.epname = '此时此刻'
backgroundAudioManager.singer = '许巍'
backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
// 设置了 src 之后会自动播放
backgroundAudioManager.src = 'https://wx_test.mp3'

3.11、示例

本例在古诗《将进酒》页面中添加朗读古诗的背景音乐,实现开始朗读、暂停朗读和继续朗读3个功能。程序是通过backgroundAudioManager实例调用播放接口和暂停接口来实现上述功能。

html 复制代码
<view class="zong">
  <view>将进酒</view>
  <view class="zz">唐代:李白</view>
  <view class="content">
    <view>君不见,黄河之水天上来,奔流到海不复回。</view>
    <view>君不见,高堂明镜悲白发,朝如青丝暮成雪。</view>
    <view>人生得意须尽欢,莫使金樽空对月。</view>
    <view>天生我材必有用,千金散尽还复来。</view>
    <view>烹羊宰牛且为乐,会须一饮三百杯。</view>
    <view>岑夫子,丹丘生,将进酒,杯莫停。</view>
    <view>与君歌一曲,请君为我倾耳听。</view>
    <view>钟鼓馔玉不足贵,但愿长醉不复醒。</view>
    <view>古来圣贤皆寂寞,惟有饮者留其名。</view>
    <view>陈王昔时宴平乐,斗酒十千恣欢谑。</view>
    <view>主人何为言少钱,径须沽取对君酌。</view>
    <view>五花马,千金裘</view>
    <view>呼儿将出换美酒,与尔同销万古愁。</view>
  </view>
</view>
<view class="bg">
  <button type="primary" class="bg1" bind:tap="play">
    听朗读
  </button>
  <button type="primary"  class="bg2" bind:tap="pause">
    暂停朗读
  </button>
  <button type="primary" class="bg3" bind:tap="continue">
    继续朗读
  </button>
</view>
js 复制代码
const backgroundAudioManager = wx.getBackgroundAudioManager()
backgroundAudioManager.title = "将进酒"
backgroundAudioManager.epname = "将进酒"
backgroundAudioManager.singer = "李白"
Page({
  data: {

  },
  onShow: function() {

  },
  play: function() {
    //设置了src后会自动播放
    backgroundAudioManager.src = "http://127.0.0.1:8080/download/111.mp3"
  },
  pause: function() {
    backgroundAudioManager.pause()
  },
  continue: function() {
    backgroundAudioManager.play()
  }
})
css 复制代码
view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
button {
  margin-top: 20rpx;
}
相关推荐
吴声子夜歌3 小时前
小程序——图片
小程序
kisshuan123963 小时前
[特殊字符] RollingDepth:单目视频深度估计算法解析
算法·音视频
DolphinScheduler社区3 小时前
Apache DolphinScheduler 2 月社区动态:功能升级与优化齐飞
开源·apache·任务调度·开源社区·海豚调度·大数据工作流调度
学术 学术 Fun3 小时前
图生视频还带声音?我把LTX 2.3塞进了自己的显卡里
音视频
杰建云1673 小时前
门店小程序是否有必要做
小程序·小程序搭建
Greg_Zhong3 小时前
小程序中页面和组件的区别
小程序
小马_xiaoen3 小时前
常规优化已用尽?小程序体积深层次优化实战!!!
前端·小程序·uniapp
jgyzl3 小时前
2026.3.10 Apache POI的学习及思考
学习·apache
2501_915918413 小时前
iOS App HTTPS 抓包工具,代理抓包和数据线直连 iPhone 抓包的流程
android·ios·小程序·https·uni-app·iphone·webview
TE-茶叶蛋3 小时前
从零实现H5 表格协同编辑:Yjs + WebSocket 实战
websocket·小程序·excel