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

最新推荐文章于 2025-11-12 12:05:18 发布
原创 最新推荐文章于 2025-11-12 12:05:18 发布 · 8.7k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #微信小程序 #小程序api #小程序音频 #小程序开发

本文介绍了微信小程序中audio组件的使用，包括poster、name、author、src、id、controls等属性，并结合wx.createAudioContext API，展示了如何创建一个简易音频播放控制页面。
最低0.47元/天 解锁文章
朝花吸食
关注
【微信小程序】媒体组件-audio组件
墨夶的博客
11-24 1218
audio组件允许开发者在微信小程序中嵌入音频播放功能。用户可以通过这个组件播放在线音频文件，并且可以控制播放、暂停、跳转等功能。audio组件支持多种配置选项，以满足不同的应用场景需求。
微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行
🏆 前端领域优质创作者
10-27 3731
微信小程序播放音频怎么显示出进度条，音乐播放器组件，wx.createAudioContext配合slider显示播放进度条，用wx.createInnerAudioContext怎么写进度条？onTimeUpdate怎么做音乐进度条，完美解决微信小程序InnerAudioContext.onTimeUpdate失效问题，解决InnerAudioContext.onTimeUpdate不执行的问题，seek()方法执行后不走，InnerAudioContext.onTimeUpdate不触发小程序
基于微信小程序的音乐播放组件开发实战
最新发布
weixin_42509720的博客
11-12 972
音频功能看似不起眼，但它直接影响用户的沉浸感和信任度。一段顺畅的播放、精准的进度、友好的错误提示，都在默默传递一个信息：“这个小程序很用心”。而这些“用心”，就藏在onCanplay的时机选择里，在setData的频率控制里，在每一次destroy()的清理里。技术没有银弹，只有不断打磨细节，才能让体验真正“丝滑”。所以，下次当你又要写一个语音播放功能时，不妨停下来问一句：“我是不是已经做到了最好？也许答案会让你重新打开编辑器，改掉那行曾经觉得“够用了”的代码。
微信小程序 - 解决 ＜audio＞ 音频播放组件无法设置宽度为 100% 的问题（组件无法 style 覆盖设置样式，无法撑满父元素宽度）
🏆 前端领域优质创作者
10-27 2173
Audio组件无法设置宽度,无法撑满100%宽度，微信小程序音频播放组件设置不了宽度怎么办，style设置宽度无效如何解决，小程序，小程序里的audio无法占满view层的宽度，导致无法自适应父容器宽度。微信小程序-解决音频播放组件无法设置宽度为100%的问题（组件无法style覆盖设置样式，无法撑满父元素宽度）
微信小程序-音频播放 每次都是重复播放同一条录音
Himhim的笔记
08-02 9948
前言 在调试微信小程序音频播放时，刚开始我也是直接复制官方文档的实例： const innerAudioContext = wx.createInnerAudioContext() innerAudioContext.autoplay = true innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21x...
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
weixin_30677617的博客
07-26 1242
小程序自定义音频组件，带滚动条 摘要：首先自定义音频组件，是因为产品有这样的需求，需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能，所以我们不考虑小程序的 audio 组件，即使官方推荐更强大的 wx.createInnerAudioContext 但是不符合需求，所以这里用到的是 backgroundAudioManager()...
微信小程序audio音频播放组件+api_wx.createAudioContext
weixin_30591551的博客
02-11 628
微信小程序audio音频播放组件+api_wx.createAudioContext 引言： audio是微信小程序中的音频组件，可以轻松实现小程序中播放/停止音频等自定义动作。 附上微信小程序audio组件的相关属性说明：https://mp.weixin.qq.com/debug/wxadoc/dev/component/aud...
微信小程序 audio音频播放详解及实例
09-01
【微信小程序 audio 音频播放详解】 在微信小程序中，`audio` 是一个非常重要的组件，它允许开发者在小程序中实现音频的播放功能。通过合理的配置和编程，开发者可以为用户提供丰富的音频体验。以下是 `audio` 组件...
精选资源
微信小程序开发—audio音频播放
03-29
微信小程序开发—audio音频播放功能实现。       (此图片来源于网络，如有侵权，请联系删除! )   一.知识点 （1）.audio为音频组件，我们可以轻松的在小程序中播放音频。 (此图片来源于网络，如有侵权，请联系...
微信小程序：wx.createInnerAudioContext的使用
热门推荐
胡世林的博客
03-29 2万+
百度了一下，很多都是使用的createAudioContext对于使用createInnerAudioContext  的反倒比较少，但是人家那儿写着升级版，所以想了下还是使用的createInnerAudioContext比较好点wxml代码如下：<!--当前为停止状态 --> <view style="width:250rpx;height:250rpx;left:250r...
微信小程序—audio(音频)
Afanbaby的博客
12-19 1万+
今天来介绍一下微信小程序中音频播放控件–audio 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html 1.效果图如下，2.index.js中： //index.js //获取应用实例 const app = getApp() var isLoop = true; var isControls = true; P
微信小程序音频的使用：wx.createInnerAudioContext的使用
lily2016n的博客
08-24 1万+
需求是一进来音乐就开始播放，本来以为只有wx.playBackgroundAudio（使用后台播放器播放音乐，对于微信客户端来说，只能同时有一个后台音乐在播放。当用户离开小程序后，音乐将暂停播放；当用户在其他小程序占用了音乐播放器，原有小程序内的音乐将停止播放。）才能实现。还是文档没仔细看。发现有更好用的wx.createInnerAudioContext。 由于自己是边写项目边看文档，发现自己...
微信小程序 音频播放器
weixin_30681121的博客
06-12 2372
最近在项目中有写到了一个音频，在这里总结一下 首先传送地址： https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html 上边是api 设计图： 主要功能有：点击播放，再点击关闭 按钮拖住控制音频 进度条 一、首先音频的播放：播放前你需要把你的音频链接写好，例...
微信小程序：音频播放器
爱拼才会赢～的博客
03-18 926
由于产品需求，需要做一个自定义音频播放器，现在也差不多做完了，接下来呢，给大家分享一下，大家先来看看效果图哦~ 这里呢，我选择的是 wx.createInnerAudioContext 这个方法，大家可以结合文档来看这篇文章哦~ wxml <view class="audios"> <view class="play_pause_btn" bindtap="stratPlay"> <image class="btn" wx:if="{{!isplay}}" .
微信小程序：使用InnerAudioContext做一个简单的音频播放器
immocha的博客
01-31 5160
官方已经不再维护audio 组件，推荐使用InnerAudioContext API 参考：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html
微信小程序组件：audio及api
jingsi1991的博客
01-06 9090
一、audio标签 audio为小程序中的音频组件，我们可以轻松的在小程序中播放音频。 下面是组件的相关属性的说明 属性 类型 默认值 说明 id String video 组件的唯一标识符 src String 要播放音频的资源地址 loop Boolean false 是否循环播放 con
微信小程序自定义播放器
Sylviaswefa的博客
04-09 1722
自定义微信小程序音频播放器 自定义audio组件
微信小程序开发audio音频播放控制
03-28
### 微信小程序 Audio 组件音频播放控制方法 #### 使用 `<audio>` 组件实现基本音频播放控制 微信小程序中的 `<audio>` 组件是一个核心工具，用于实现音频的播放、暂停和其他基础功能。该组件支持多种属性和事件，能够满足大多数开发需求。 以下是 `<audio>` 的一些常用属性及其作用： - `src`：指定音频文件的 URL 地址。 - `controls`：设置是否显示默认的播放控件。 - `loop`：决定音频是否循环播放。 - `autoplay`：设定音频是否自动开始播放。 同时，<audio> 支持丰富的交互事件，例如： - `bindplay`：当音频开始播放时触发。 - `bindpause`：当音频被暂停时触发。 - `bindended`：当音频自然结束时触发。 下面是一个简单的示例代码，展示了如何使用 `<audio>` 实现基本的音频播放控制： ```html <audio src="https://example.com/audio.mp3" controls="{{true}}" loop="{{false}}" autoplay="{{false}}" bindplay="onPlay" bindpause=".onPause" bindended="onEnded"> </audio> ``` 上述代码片段中设置了音频的基本行为并绑定了三个常见事件[^2]。 --- #### 利用 InnerAudioContext API 进行高级控制 对于更加复杂的场景，可以通过 `wx.createInnerAudioContext()` 创建一个 `InnerAudioContext` 对象来获得更强的音频控制能力。此对象允许开发者精确管理音频的状态，包括播放、暂停、停止、调整音量等功能。 以下是一些常用的 `InnerAudioContext` 方法： - `.play()`: 开始或继续播放音频。 - `.pause()`: 暂停当前正在播放的音频。 - `.stop()`: 停止播放并将进度重置到初始位置。 - `.seek(position)`: 跳转至指定的时间点（单位为秒）。 - `.setVolume(value)`: 设置全局音量大小 (范围为 0~1)。 下面是基于 `InnerAudioContext` 的一段完整示例代码： ```javascript Page({ data: { isPlaying: false, currentTime: '00:00', duration: '00:00' }, onLoad() { const innerAudioContext = wx.createInnerAudioContext(); innerAudioContext.src = 'https://example.com/audio.mp3'; innerAudioContext.autoplay = false; this.innerAudioContext = innerAudioContext; // 监听播放状态变化 innerAudioContext.onPlay(() => { this.setData({isPlaying: true}); }); innerAudioContext.onPause(() => { this.setData({isPlaying: false}); }); // 更新时间信息 innerAudioContext.onTimeUpdate(() => { let currentTimeFormatted = formatTime(innerAudioContext.currentTime); let durationFormatted = formatTime(innerAudioContext.duration); this.setData({ currentTime: currentTimeFormatted, duration: durationFormatted || '--:--' }); }); }, togglePlayback() { if (!this.data.isPlaying){ this.innerAudioContext.play(); } else{ this.innerAudioContext.pause(); } } }); // 时间格式化函数 function formatTime(seconds){ var minute = Math.floor(seconds / 60).toString().padStart(2, '0'); var second = Math.floor(seconds % 60).toString().padStart(2, '0'); return `${minute}:${second}`; } ``` 以上代码实现了动态切换播放/暂停状态，并实时更新音频的播放时间和总时长。 --- #### 自定义播放进度条与拖动控制 如果希望进一步增强用户体验，则可以考虑构建完全自定义样式的播放界面。这通常涉及手动绘制进度条以及监听用户的触摸动作完成精准定位。 具体来说，可借助 `wx.createAudioContext` 或者前述提到的 `InnerAudioContext` 来同步进度数据；再配合 WXML 和 WXSS 设计美观大方的操作面板。 这里给出一个简化版的例子说明如何制作带拖拽效果的进度条： ```wxml <view class="progress-container"> <slider value="{{currentTime * 100 / totalDuration}}" min="0" max="100" block-size="28" activeColor="#FFB90F" backgroundColor="#CCC" onChange="onChangeProgress"/> </view> <button type="primary" size="mini" onTap="togglePlayback">{{isPlaying ? 'Pause' : 'Play'}}</button> ``` 对应的逻辑部分如下所示： ```javascript Page({ data:{ currentTime: 0, totalDuration: 0, isPlaying: false }, onReady(){ const audioCtx = wx.createInnerAudioContext(); audioCtx.src='http://link-to-your-audio-file.mp3'; audioCtx.onCanplay(()=>{ this.setData({totalDuration: audioCtx.duration}) }) audioCtx.onTimeUpdate(()=>{ this.setData({currentTime: audioCtx.currentTime}) }) }, onChangeProgress(e){ const seekPosition = e.detail.value * this.data.totalDuration / 100; this.selectComponent('innerAudio').seek(seekPosition); }, togglePlayback(){ const {isPlaying} = this.data; !isPlaying? this.selectComponent('innerAudio').play(): this.selectComponent('innerAudio').pause(); } }) ``` 这段脚本不仅完成了常规的播放控制还加入了对滑块输入响应的支持[^3]。 ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值