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

作者:邬泉

知晓程序注:

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

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

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

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

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

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

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

其属性列表如下:

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

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

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

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

一个小程中若使用多个 <audio> 音频组件的话,几个 <audio> 音频组件能同时工作(神奇!)。

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

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

其属性列表如下:

背景播放效果图如下:

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

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

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-11-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

新手看Mockplus2.3

Mockplus是我从今年下半年开始使用的一款原型设计软件,我被它简单高效的特性深深吸引着。他最近迎来了一次大版本(2.3)的更新,作为一名新手,我看着他再度走...

2817
来自专栏程序员互动联盟

【专业技术】使用html5的十大原因

你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。HT...

34510
来自专栏ThoughtWorks

前端不止:请告诉我,你要什么样的图标

有一个英语成语叫做一画胜千言(A picture is worth a thousand words),不知道大家有没有听过?它是指的是一张静态的图片就可表达一...

3957
来自专栏yang0range

React Native在Android当中实践(一)——背景介绍

React Native For Android是伟大的互联网公司Facebook与2015年9月15日发布的,该可以让我们广大开发者使用JavaScript...

1022
来自专栏林德熙的博客

UWP 分享用那个图标

在 UWP ,选的是第一个。很多用户不知道这就是分享,他们会想,这个按钮是其它的。

1192
来自专栏程序员宝库

趣图:各种程序员的键盘热力图

2136
来自专栏SAP最佳业务实践

SAP最佳业务实践:ETO–项目装配(240)-15材料采购入库

ME29N下达采购订单 image.png 现在已经采购长提前期组件,您在此步骤中下达采购订单以便可以过帐该组件的收货。 角色采购经理 后勤 ® 物料管理 ®...

3988
来自专栏数据的力量

补一补产品基础知识:App各类导航设计适用场景及优劣势总结

1576
来自专栏九彩拼盘的叨叨叨

前端知识点列表

991
来自专栏程序员宝库

趣图:各种程序员的键盘热力图

图0:不保存不舒服斯基型 ? 图1:复制粘贴型 ? ? 图2:复制粘贴型专用键盘 ? 图3:Vim 党新手(内心OS:门在哪里,我要退出) ? 图4:Wind...

3497

扫码关注云+社区

领取腾讯云代金券