第9次课 - 音频与媒体API - 微信小程序开发实战

1

教学目标

掌握InnerAudioContext音频播放
理解背景音频管理器的使用
掌握图片选择与预览API
了解录音API的使用
案例：案例4-1 音乐播放器、案例4-2 录音机

2

重点、难点与课时分配

◎

教学重点

音频播放、背景音频、图片操作、录音

△

教学难点

音频状态管理、后台播放

课时分配（共 3 学时）

理论 1 学时

实践 2 学时

音频 API 讲解 1 学时，案例 4-1/4-2 实操 2 学时

3

课件要点

InnerAudioContext 音频播放

wx.createInnerAudioContext() 创建实例

src — 音频资源地址

autoplay / loop / volume 属性

play() / pause() / stop() 方法

onPlay / onPause / onEnded / onError 事件

BackgroundAudioManager 背景音频

wx.getBackgroundAudioManager() 获取实例

支持后台播放(小程序切到后台继续播放)

必须设置title属性才能播放

singer / coverImgUrl / epname 元数据

onPrev / onNext 事件(锁屏控制)

图片API

wx.chooseMedia — 选择图片/视频(新版)

wx.previewImage — 全屏预览图片

wx.getImageInfo — 获取图片信息

wx.saveImageToPhotosAlbum — 保存到相册

count/sizeType/sourceType 参数配置

案例4-1 音乐播放器 / 案例4-2 录音机

案例4-1 音乐播放器 — InnerAudioContext 实现播放、暂停、进度跳转

案例4-2 录音机 — wx.getRecorderManager() 录音，再用 InnerAudioContext 回放

录音管理器方法：start / pause / resume / stop，onStop 回调中拿到 tempFilePath

录音授权：scope.record 权限申请，被拒后用 wx.openSetting 引导

综合运用音频 API 完成播放与录制两个教材案例

4

代码示例与讲解

InnerAudioContext

                inner-audio.js
                InnerAudio 播放器
              
1// 创建内部音频上下文
2const innerAudio = wx.createInnerAudioContext()
3
4// 设置音频源
5innerAudio.src = 'https://example.com/music.mp3'
6
7// 播放控制
8innerAudio.play()
9innerAudio.pause()
10innerAudio.stop()
11innerAudio.seek(30)
12
13// 常用属性
14innerAudio.autoplay = true
15innerAudio.loop = true
16innerAudio.volume = 0.8
17innerAudio.startTime = 0
18
19// 监听事件
20innerAudio.onPlay(() => {
21  console.log('开始播放')
22})
23innerAudio.onPause(() => {
24  console.log('暂停播放')
25})
26innerAudio.onStop(() => {
27  console.log('停止播放')
28})
29innerAudio.onEnded(() => {
30  console.log('自然播放结束')
31})
32innerAudio.onTimeUpdate(() => {
33  console.log(innerAudio.currentTime, innerAudio.duration)
34})
35
36// ⚠️ 销毁实例释放资源
37innerAudio.destroy()

wx.createInnerAudioContext 创建内部音频实例，适用于短音频播放。设置 src 指定音频地址，调用 play/pause/stop 控制播放。常用属性有 autoplay 自动播放、loop 循环、volume 音量。通过 onPlay/onPause/onEnded/onTimeUpdate 监听播放状态，onTimeUpdate 可获取当前时间和总时长实现进度条。注意 InnerAudio 不支持后台播放，页面隐藏即暂停，用完需调用 destroy 释放资源。

BackgroundAudioManager

                bg-audio.js
                后台音频播放
              
1// 获取全局唯一的后台音频管理器
2const bgAudio = wx.getBackgroundAudioManager()
3
4// 必须设置 title 和 src 才能播放
5bgAudio.title = '夜曲'
6bgAudio.singer = '周杰伦'
7bgAudio.epname = '十一月的萧邦'
8bgAudio.coverImgUrl = 'https://example.com/cover.jpg'
9bgAudio.src = 'https://example.com/yequ.mp3'
10
11// 播放控制（与 InnerAudio 类似）
12bgAudio.play()
13bgAudio.pause()
14bgAudio.stop()
15bgAudio.seek(60)
16
17// 监听事件
18bgAudio.onPlay(() => console.log('播放中'))
19bgAudio.onPause(() => console.log('已暂停'))
20bgAudio.onStop(() => console.log('已停止'))
21bgAudio.onEnded(() => console.log('播放结束'))
22bgAudio.onTimeUpdate(() => {
23  console.log(bgAudio.currentTime, bgAudio.duration)
24})
25
26// ✅ 支持后台播放
27// 退出小程序后仍可在系统通知栏控制
28// 全局唯一，无需 destroy
29
30// ⚠️ 与 InnerAudio 的区别：
31// 1. 必须设置 title 才能播放
32// 2. 支持后台播放，系统通知栏可控
33// 3. 全局唯一实例，无需创建和销毁
34// 4. iOS 可被电话等中断后自动恢复

wx.getBackgroundAudioManager 获取后台音频管理器，适用于音乐类应用。与 InnerAudio 的关键区别：必须设置 title 才能播放；支持后台播放，退出小程序后可在系统通知栏控制；全局唯一实例，不需要创建和销毁；iOS 上被电话中断后可自动恢复。还需设置 singer、coverImgUrl 等元数据显示在通知栏和锁屏界面。

图片API

                image-api.js
                图片API流程
              
1// 选择图片/视频（推荐使用 chooseMedia）
2wx.chooseMedia({
3  count: 9,
4  mediaType: ['image'],
5  sourceType: ['album', 'camera'],
6  sizeType: ['compressed'],
7  success(res) {
8    const tempFiles = res.tempFiles
9    console.log(tempFiles[0].tempFilePath)
10    console.log(tempFiles[0].size)
11  }
12})
13
14// 预览图片
15wx.previewImage({
16  current: 'https://example.com/img1.jpg',
17  urls: [
18    'https://example.com/img1.jpg',
19    'https://example.com/img2.jpg',
20    'https://example.com/img3.jpg'
21  ]
22})
23
24// 保存图片到相册
25wx.saveImageToPhotosAlbum({
26  filePath: tempFilePath,
27  success() {
28    wx.showToast({ title: '保存成功' })
29  },
30  fail() {
31    // 用户拒绝授权，引导开启
32    wx.showModal({ 
33      title: '提示',
34      content: '需要您授权保存图片到相册'
35    })
36  }
37})
38
39// ⚠️ 保存到相册需要用户授权 scope.writePhotosAlbum

图片三大 API：wx.chooseMedia 选择图片或视频，替代了旧版 chooseImage，支持 mediaType 指定类型、sourceType 指定来源（相册/相机）、count 限制数量，返回临时文件路径；wx.previewImage 全屏预览图片，current 指定当前显示，urls 数组支持左右滑动浏览；wx.saveImageToPhotosAlbum 保存图片到相册，需要用户授权 scope.writePhotosAlbum，拒绝时应引导用户开启。

案例4-1音乐播放器

                index.js
                音乐播放器界面
              
1// 案例4-1：音乐播放器 index.js
2const audioBgm = wx.getBackgroundAudioManager()
3
4Page({
data: {
  musicList: [
    { id: 1, title: '夜曲', singer: '周杰伦',
      src: 'https://example.com/yequ.mp3',
      cover: 'https://example.com/cover1.jpg' },
    { id: 2, title: '晴天', singer: '周杰伦',
      src: 'https://example.com/qingtian.mp3',
      cover: 'https://example.com/cover2.jpg' }
  ],
  currentIndex: 0,
  isPlaying: false,
  currentTime: '00:00',
  duration: '00:00',
  progress: 0
},
20
onLoad() {
  this.setupAudioEvents()
},
24
setupAudioEvents() {
  audioBgm.onPlay(() => {
    this.setData({ isPlaying: true })
  })
  audioBgm.onPause(() => {
    this.setData({ isPlaying: false })
  })
  audioBgm.onTimeUpdate(() => {
    const { currentTime, duration } = audioBgm
    this.setData({
      currentTime: this.formatTime(currentTime),
      duration: this.formatTime(duration),
      progress: currentTime / duration * 100
    })
  })
  audioBgm.onEnded(() => {
    this.playNext()
  })
},
44
playMusic() {
  const music = this.data.musicList[this.data.currentIndex]
  audioBgm.title = music.title
  audioBgm.singer = music.singer
  audioBgm.coverImgUrl = music.cover
  audioBgm.src = music.src
},
52
togglePlay() {
  if (audioBgm.src) {
    this.data.isPlaying ? audioBgm.pause() : audioBgm.play()
  } else {
    this.playMusic()
  }
},
60
playNext() {
  const idx = (this.data.currentIndex + 1) % this.data.musicList.length
  this.setData({ currentIndex: idx })
  this.playMusic()
}
66})

案例4-1音乐播放器使用 getBackgroundAudioManager 实现后台播放。核心逻辑：在 setupAudioEvents 中注册所有事件监听，onTimeUpdate 实时更新播放进度和时间显示；onEnded 自动播放下一首；playMusic 设置 title、singer、coverImgUrl、src 后自动播放；togglePlay 切换播放/暂停状态。时间格式化用 formatTime 将秒转为 mm:ss。

5

课件预览与下载