播放音频的audio组件-微信小程序与云开发(上)

当前位置:　首页>> 技术小册>> 微信小程序与云开发(上)

### 播放音频的audio组件

在微信小程序中，`audio` 组件是实现音频播放功能的重要元素之一，它允许开发者在小程序内嵌入音频文件，为用户提供丰富的听觉体验。本章将详细介绍微信小程序中 `audio` 组件的使用方法，包括其基本属性、事件处理、样式定制以及结合云开发实现音频文件的上传、存储与播放等高级功能。

#### 一、`audio` 组件基础

##### 1.1 组件引入

在小程序的 WXML 文件中，你可以通过 `<audio>` 标签直接引入 `audio` 组件。这个组件支持多种音频格式，如 MP3、AAC 等，但具体支持的格式可能会受到平台或微信版本的影响。

```xml
<audio src="http://example.com/audio.mp3" controls></audio>
```

##### 1.2 基本属性

- `src`：音频的数据源，可以是网络地址或本地文件路径。
- `controls`：是否显示默认控件，包括播放/暂停按钮、播放进度、音量控制等。
- `autoplay`：是否自动播放。需要注意的是，由于自动播放可能会影响用户体验，微信小程序对自动播放有一定的限制，如必须在用户触发某个动作后才能开始播放。
- `loop`：是否循环播放。
- `muted`：是否静音播放。
- `poster`：音频封面的图片网络资源地址，如果设置了 `controls` 属性，则封面会显示在默认控件上。
- `name`：音频的名称，用于原生音频播放器显示（部分 Android 机型支持）。
- `author`：音频的作者，用于原生音频播放器显示（部分 Android 机型支持）。

##### 1.3 常用事件

- `bindplay`：当开始/继续播放时触发。
- `bindpause`：当暂停播放时触发。
- `bindended`：当播放结束时触发。
- `bindtimeupdate`：播放进度变化时触发，可以通过 `detail` 中的 `currentTime` 获取当前播放位置（单位：秒）。
- `binderror`：播放出错时触发，可以通过 `detail` 中的 `errMsg` 获取错误信息。

#### 二、`audio` 组件的样式定制

虽然 `audio` 组件提供了丰富的默认控件，但有时候开发者需要根据自己的设计需求进行样式定制。由于 `audio` 组件的默认控件样式是固定的，直接通过 CSS 修改其样式受限较大。不过，你可以通过以下几种方式来实现一定程度的定制：

- **隐藏默认控件**：通过设置 `controls="false"` 隐藏默认控件，然后使用自定义的按钮和逻辑来控制音频的播放、暂停、停止等。
- **自定义封面**：通过 `poster` 属性设置音频封面图片，或者使用自定义的视图层（如 `image` 组件）作为封面，并在点击时触发音频播放。
- **动态样式调整**：虽然不能直接修改默认控件的样式，但你可以根据音频的播放状态（如播放、暂停）动态调整周围元素的样式，以提供更直观的视觉反馈。

#### 三、结合云开发实现音频功能

微信小程序云开发提供了云存储、云函数等能力，使得开发者能够轻松实现音频文件的上传、存储与播放。

##### 3.1 上传音频文件到云存储

使用小程序云开发的云存储功能，你可以将用户上传的音频文件存储到云端，然后通过生成的云文件ID来访问这些音频文件。

1. **前端调用**：在小程序前端，使用 `wx.chooseMessageFile` 或 `wx.chooseAudio` 等 API 让用户选择音频文件，然后使用 `wx.cloud.uploadFile` 将文件上传到云存储。

```javascript
   wx.chooseAudio({
     success: function(res) {
       const tempFilePath = res.tempFilePath;
       wx.cloud.uploadFile({
         cloudPath: new Date().getTime() + '.mp3', // 文件名
         filePath: tempFilePath, // 小程序临时文件路径
         success: res => {
           // 返回文件 ID
           console.log(res.fileID)
         },
         fail: console.error
       })
     }
   })
   ```

2. **云函数处理**（可选）：虽然直接在小程序前端调用 `wx.cloud.uploadFile` 足够处理大多数上传场景，但在需要更复杂的文件处理逻辑时，可以通过云函数来实现。

##### 3.2 存储音频文件信息

除了将音频文件存储在云存储中，你可能还需要在云数据库中记录音频文件的相关信息，如文件名、上传时间、作者等，以便后续管理和查询。

##### 3.3 播放云存储中的音频文件

在播放存储在云存储中的音频文件时，你需要将云文件ID转换为可访问的URL，然后将其设置为 `audio` 组件的 `src` 属性。

1. **获取音频文件URL**：使用 `wx.cloud.getTempFileURL` API 可以获取云存储中文件的临时访问链接。

```javascript
   wx.cloud.getTempFileURL({
     fileList: ['CLOUD_FILE_ID'], // 传入一个包含云文件ID的数组
     success: res => {
       // res.fileList 是一个包含文件临时网络链接的数组
       const audioUrl = res.fileList[0].tempFileURL;
       // 将 audioUrl 设置为 audio 组件的 src 属性
     }
   })
   ```

2. **在 `audio` 组件中使用**：获取到音频文件的URL后，就可以将其设置为 `audio` 组件的 `src` 属性进行播放了。

#### 四、进阶应用与最佳实践

##### 4.1 播放列表管理

对于需要播放多个音频的场景，可以维护一个播放列表，通过监听用户的操作（如点击播放、切换歌曲等）来更新播放列表和 `audio` 组件的播放状态。

##### 4.2 播放进度控制

通过监听 `audio` 组件的 `bindtimeupdate` 事件，可以实时获取音频的播放进度，并据此更新界面上的播放进度条。

##### 4.3 背景播放与暂停

微信小程序支持音频在后台播放，但需要注意处理应用进入后台和回到前台时的播放状态。可以通过监听小程序的 `onHide` 和 `onShow` 事件来暂停和恢复播放。

##### 4.4 性能优化

- **预加载**：对于即将播放的音频，可以提前调用 `wx.createInnerAudioContext` 创建音频上下文进行预加载，以减少播放时的加载时间。
- **缓存处理**：对于重复播放的音频，可以利用小程序的本地缓存机制，减少从云存储或网络加载的次数。

#### 五、总结

通过本章的学习，我们了解了微信小程序中 `audio` 组件的基本使用方法，包括其属性、事件处理以及样式定制。同时，我们也探讨了如何结合云开发实现音频文件的上传、存储与播放，并分享了一些进阶应用和最佳实践。掌握这些知识和技巧，将有助于你在微信小程序中构建出更加丰富和用户体验更好的音频播放功能。

该分类下的相关小册推荐：

微信小程序底层框架实现原理

微信小程序全栈开发实战(中)

微信小程序全栈开发实战(上)

微信小程序与云开发(中)

微信小程序与云开发(下)

微信小程序全栈开发实战(下)