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

 

时间:2017-11-09 来源:爱范儿

---

 

知晓程序注：

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

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

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

文 | 邬泉

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

向微信小程序中插入音频文件，可以通过

author="{{author}}" src="{{src}}" id="myAudio"

controls="true" loop="false">

其属性列表如下：

<div class="img finish" id="pic_0" "="" style="padding: 0px; margin: 0px; list-style: none; text-align: center; position: relative; overflow: hidden; z-index: 0; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255); width: 1317px; height: 535px;">

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

对于实现简单音频播放的，只需利用 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 接口。

一个小程中若使用多个 （神奇！）。

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

wx.playBackgroundAudio({

dataUrl: 'https://music.com/path/to/music.mp3',

title: '卜卦',

coverImgUrl: 'https://images.com/path/to/cover.png'

})

其属性列表如下：

背景播放效果图如下：

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

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

---