开发 | 微信小程序audio音频播放组件+api_wx.createAudioContext

最新推荐文章于 2025-02-18 15:08:50 发布

朝花吸食

最新推荐文章于 2025-02-18 15:08:50 发布

阅读量8.5k

点赞数 2

文章标签：小程序微信小程序小程序api 小程序音频小程序开发

本文链接：https://blog.youkuaiyun.com/jisuapp/article/details/79098010

版权

本文介绍了微信小程序中audio组件的使用，包括poster、name、author、src、id、controls等属性，并结合wx.createAudioContext API，展示了如何创建一个简易音频播放控制页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言：

audio是微信小程序中的音频组件，可以轻松实现小程序中播放/停止音频等自定义动作。

附上微信小程序audio组件的相关属性说明：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html

本次将通过小程序audio

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

朝花吸食

关注关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行

王佳斌

10-27

3486

微信小程序播放音频怎么显示出进度条，音乐播放器组件，wx.createAudioContext配合slider显示播放进度条，用wx.createInnerAudioContext怎么写进度条？onTimeUpdate怎么做音乐进度条，完美解决微信小程序InnerAudioContext.onTimeUpdate失效问题，解决InnerAudioContext.onTimeUpdate不执行的问题，seek()方法执行后不走，InnerAudioContext.onTimeUpdate不触发小程序

微信小程序-一个音乐播放器视频播放器小程序

08-08

音频播放器 >PS:这里音乐/图片(MP3/图片)来源是我本地电脑自己搭建的服务器. >用WAMP.把音乐放在根目录就可以了. >当然也可以返回网络上的数据 util.js getDataFromNet()返回音乐列表数据,模拟网络数据用setTimeOut 自动下一首添加截图

3 条评论您还未登录，请先登录后发表或查看评论

uni.createInnerAudioContext() 报错{“errMsg“:“MediaError“,“errCode“:-99}

最新发布

kentturing的博客

02-18

721

uniapp的uni.createInnerAudioContext不支持直接播放base64音频文件，所以需要把base64音频转为本地音频文件再播放，缺点是转换会导致延迟，音频播放会有延迟。utils文件夹下新建tool.js文件。在script下面导入。

微信小程序语音播放功能的实现

GotYoung的博客

05-21

8789

1.想要实现微信的语音播放需要在微信公众号后台下载微信同声传译插件，可以去微信服务平台搜索此插件并下载，指定对应的小程序号就行了。 2.下载完在 微信小程序后台--设置--第三方设置-- 插件管理-- 进入微信同声传译详情复制插件AppID 到 app.json 进行配置： app.json： "plugins": { "WechatSI": { "version": "0.3.5", "provider": "wx069...

wx.createInnerAudioContext多个音频播放

weixin_51172395的博客

12-03

3197

想做一个页面里多种小鸟，点不同的鸟播放不同的声音。一般都是用audio，但小程序文档提示：音频。1.6.0版本开始，该组件不再维护。建议使用能力更强的wx.createInnerAudioContext接口。 InnerAudioContext | 微信开放文档结果发现这文档写的真好啊，如同没写一般。废话不多说，上代码。 <view class="" bindtap="playSound" data-sound="{{item.sound}}">2播放</view> ..

微信小程序~wx.createInnerAudioContext的使用

qq_46568665的博客

04-20

3018

微信小程序~wx.createInnerAudioContext，音频播放的使用

上传声音 微信小程序_微信小程序 audio音频播放详解及实例_JavaScript_脚本之家...

weixin_39753674的博客

12-22

1003

微信小程序 audio音频播放audioaudio为音频组件，我们可以轻松的在小程序中播放音频。属性名类型默认值说明idStringvideo 组件的唯一标识符，srcString要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleantrue是否显示默认控件posterString默认控件上的音频封面的图片资源地址，如果 controls 属性值为 fals...

微信小程序 audio音频播放详解及实例

09-01

在微信小程序中，`audio` 是一个非常重要的组件，它允许开发者在小程序中实现音频的播放功能。通过合理的配置和编程，开发者可以为用户提供丰富的音频体验。以下是 `audio` 组件的主要知识点： 1. **属性配置**： ...

微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

10-17

主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下

微信小程序日历组件源码+使用说明.zip

06-28

微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+...

微信小程序开发—audio音频播放

03-29

微信小程序开发—audio音频播放功能实现。 (此图片来源于网络，如有侵权，请联系删除! ) 一.知识点（1）.audio为音频组件，我们可以轻松的在小程序中播放音频。 (此图片来源于网络，如有侵权，请联系...

微信小程序多音频播放进度条问题

10-18

小程序的音频组件居然没有进度控制的功能，需要我们自己实现，下面脚本之家小编给大家带来了微信小程序多音频播放进度条问题，感兴趣的朋友一起看看吧

微信小程序开发之录音机音频播放动画 (真机可用)(源代码+截图)

06-19

微信小程序开发之录音机音频播放动画 (真机可用)(源代码+截图)微信小程序开发之录音机音频播放动画 (真机可用)(源代码+截图)微信小程序开发之录音机音频播放动画 (真机可用)(源代码+截图)微信小程序开发之录音...

『从零开始学小程序』媒体组件audio组件

一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟

10-01

3255

audio组件：音频组件。在页面插入一段音频或者播放音乐有3种处理方法。简单的插入audio组件，并利用组件的属性控制播放利用AudioContext类，通过指定方法获取实例使用功能最全的InnerAudioContext下面我们来一一了解三种方法的使用。不过在基础库1.6.0版本之后就不再维护前两种方法了，我们实际开发还是用第三种InnerAudioContext。

基于微信小程序的音乐播放器设计

毕业作品网站

10-30

3533

根据网站的角色对网站角色分为3种类型，一种是未注册用户，一种是网站用户，以及网站的后台管理员。

微信小程序开发—(十五)audio音频播放

汉堡请不要欺负面条

05-17

4191

一.知识点（1）.audio为音频组件，我们可以轻松的在小程序中播放音频。整理下就是：（2）.API 1.wx.createAudioContext(audioId):创建并返回 audio 上下文 audioContext 对象 audioContext:audioContext 通过 audioId 跟一个组件绑定，通过它可以操作对应的组件

微信小程序audio音频播放组件+api_wx.createAudioContext

weixin_30591551的博客

02-11

552

微信小程序audio音频播放组件+api_wx.createAudioContext 引言： audio是微信小程序中的音频组件，可以轻松实现小程序中播放/停止音频等自定义动作。附上微信小程序audio组件的相关属性说明：https://mp.weixin.qq.com/debug/wxadoc/dev/component/aud...

微信小程序 封装自定义音频播放组件

weixin_52190942的博客

06-02

1552

4.如果此时出现运行不出来，不要怕，点击微信开发者工具最上面的一栏的清缓存（清除编译缓存），再点击编译就可以了。3.点击新建component输入名称点击回车，例如myaudio1。1.新建component文件夹（和pages同级）2.内部新建文件夹例如myaudio。3.在JS中加入音频地址。1.先在json中定义。在app.wxss加入。2.在wxml中使用。

小程序InnerAudioContext设置问题记录

Hassan的小博客!

11-12

1634

小程序innerAudioContext问题记录

微信小程序播放音频组件

12-28

### 微信小程序中播放音频的组件及其用法 #### 音频组件 `audio` `audio` 是微信小程序提供的用于播放音频文件的基础组件。通过该组件，开发者可以在页面上嵌入音频控件，允许用户控制音频的播放、暂停以及调整音量等功能[^1]。属性|说明 ---|--- src | 资源地址 controls | 是否显示默认播放器控件，默认为 true poster | 默认图片资源地址 name | 名字 author | 作者名字 bindplay | 开始/继续播放事件触发回调函数名 bindpause | 暂停事件触发回调函数名 bindended | 结束事件触发回调函数名示例如下： ```html <audio src="https://example.com/music.mp3" controls></audio> ``` #### API接口 `wx.createAudioContext` 对于更复杂的场景需求，比如动态控制音频行为而不依赖于界面上可见的 `<audio>` 组件时，则可以通过调用微信提供的 JavaScript 接口来创建一个 Audio 上下文对象来进行操作。此方式提供了更加灵活的操作选项，如设置循环播放、跳转到指定位置等特性。使用方法如下所示： ```javascript // 创建 audio 上下文实例 const audioCtx = wx.createAudioContext('myAudio'); // 控制 play 和 pause 方法 Page({ data: { isPlaying: false, }, handlePlay() { this.setData({isPlaying: !this.data.isPlaying}); if (this.data.isPlaying){ audioCtx.play(); } else { audioCtx.pause(); // 暂停后的音频再播放会从暂停处开始播放 } }, onLoad(){ console.log('page loaded'); } }) ``` 需要注意的是，在某些特定情况下（例如当自定义组件被移除时），应该记得停止正在运行中的音频流并且销毁对应的 InnerAudioContext 实例以防止内存泄漏等问题的发生[^3]。