前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >开发 | 小程序音频接口全攻略!一篇文章教你玩转它们

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

作者头像
知晓君
发布2018-07-27 14:48:38
1.5K0
发布2018-07-27 14:48:38
举报
文章被收录于专栏:知晓程序知晓程序

作者:邬泉

知晓程序注:

想要在小程序里插入音频或音乐,你需要用到小程序的音频播放组件或是 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。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-11-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档