# 开发 \| 小程序音频接口全攻略！一篇文章教你玩转它们

- 作者：知晓程序
- 发布时间：2017-11-08 20:00
- 原文：https://www.ifanr.com/minapp/935761

![](https://s3.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg)

**知晓程序注：**

想要在小程序里插入音频或音乐，你需要用到小程序的音频播放组件或是 API。

那么，这些组件、API 该如何使用？使用时，有什么需要注意的地方？

知晓程序（微信号 zxcx0101）分享的这篇文章，就来告诉你如何正确地让小程序播放音频。

关注「知晓程序」微信公众号，回复「开发」，获取小程序开发全套经验。

---

文 \| 邬泉

音频文件的加入是丰富小程序的常见手段。

向微信小程序中插入音频文件，可以通过 `<audio>` 音频组件，或是 `wx.playBackgroundAudio()` API，**但这两者的使用场合（生命周期）有些不同**。

`<audio>` 音频组件的标记语法如下：

```
<audio poster="{{poster}}" name="{{name}}" 
  author="{{author}}" src="{{src}}" id="myAudio" 
  controls="true" loop="false">
</audio>
```

其属性列表如下：

![](https://s3.ifanr.com/wp-content/uploads/2017/11/Artboard-28.jpg)

**这些属性中，`controls` 属性尤为重要。**其默认值为 `false`，表示控制窗口默认情况下不出现。推荐在小程序里，将其值设置为 `true`，就可以将播放界面显示出来。

![](https://s3.ifanr.com/wp-content/uploads/2017/11/Artboard-29.jpg)

对于实现简单音频播放的，只需利用 JS 代码实现数据绑定即可。接口所需的信息如下：

```
data: {
  poster: 'https://images.com/path/to/poster.png',
  name: '自挂东南枝',
  author: '西早禾希',
  src: 'https://music.com/path/to/music.mp3',
},
```

如果需要进行复杂的音频操作，则需要配合音频控制相关 API。

以往，我们常用 `wx.createAudioContext('ID')` 这个 API，但从 1.6.0 版本开始，微信开始建议使用能力更强的 `wx.createInnerAudioContext()` 接口。

**一个小程中若使用多个 `<audio>` 音频组件的话，几个 `<audio>` 音频组件能同时工作**（神奇！）。

`<audio>` 音频组件的使用并非万能。**当微信后台或退出小程序时，`<audio>` 音频组件播放音频会立即被暂停。**在上述情况中，若希望音频继续播放，就要用到 `wx.playVoice()`。

`wx.playBackgroundAudio()` 在 JS 中使用语法如下：

```
wx.playBackgroundAudio({
 dataUrl: 'https://music.com/path/to/music.mp3',
 title: '卜卦',
 coverImgUrl: 'https://images.com/path/to/cover.png'
})
```

其属性列表如下：

![](https://s3.ifanr.com/wp-content/uploads/2017/11/Artboard-30.jpg)

背景播放效果图如下：

![](https://s3.ifanr.com/wp-content/uploads/2017/11/Artboard-31.jpg)

**使用 `wx.playBackgroundAudio()` 播放的音频，无论是微信放入后台，或是退出小程序，音频依然会正常播放。**但若微信退出，音频的播放也会停止。

如若只需要简单地播放音频文件，单独使用 `wx.playBackgroundAudio()` 就足够。**要对播放的音频进行操作，就得依赖以下音乐播放控制 API。**

![](https://s3.ifanr.com/wp-content/uploads/2017/11/Artboard-32.jpg)

**关注「知晓程序」公众号 ，在微信后台回复「开发」，获取小程序开发全套经验。**

**![](https://s3.ifanr.com/wp-content/uploads/2017/11/20171101173458.jpg)**

![](https://s3.ifanr.com/wp-content/uploads/2017/09/bottomqrcode.gif)