优化微信小程序音频播放，实现多音频同时播放，互不干扰。

最新推荐文章于 2024-08-21 16:46:11 发布
最新推荐文章于 2024-08-21 16:46:11 发布
阅读量1.1w 收藏 5
点赞数 1
文章标签： 小程序音频 音频卡顿 微信 多音频 同时播放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41710574/article/details/79256935
版权
通过创建5个innerAudioContext实例，实现微信小程序中多音频同时播放且互不干扰，解决音频卡顿问题。点击触发vioce()函数，依次设置不同音频源并播放，确保最多5个音频实例存在。
摘要由CSDN通过智能技术生成
原理就是创建5个 innerAudioContext实例化对象，轮流调用。(小程序只能同时存在5个音频实例）。
附上demo：
const innerAudioContext1 = wx.createInnerAudioContext(),
innerAudioContext2 = wx.createInnerAudioContext(),
innerAudioContext3 = wx.createInnerAudioContext(),
innerAudioContext4 = wx.createInnerAudioContext(),
innerAudioContext5 = wx.createInnerAudioContext();

Page({
最低0.47元/天 解锁文章
黄思威
关注
微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行
王佳斌
10-27 3331
微信小程序播放音频怎么显示出进度条，音乐播放器组件，wx.createAudioContext 配合 slider 显示播放进度条，用wx.createInnerAudioContext怎么写进度条？onTimeUpdate 怎么做音乐进度条，完美解决微信小程序InnerAudioContext.onTimeUpdate 失效问题，解决InnerAudioContext.onTimeUpdate不执行的问题，seek()方法执行后不走，InnerAudioContext.onTimeUpdate不触发小程序
微信小程序 - 最新详细实现音乐播放列表，点击播放/暂停、切换音乐、暂停续播、播放结束、进度监听功能，支持本地或在线音频播放地址MP3、WAV、AAC、WMA音频格式或文件流，歌名列表点击播放切换歌曲
王佳斌
08-07 4094
微信小程序，vue2，vue3，音乐列表，音频列表，音乐播放器，小程序音乐列表，播放音频，暂停音频后如何继续播放，而不是从头播放，播放进度，微信小程序音乐播放列表点击播放暂停，切换音乐歌曲，暂停保留歌曲及恢复功能，苹果ios系统手机，安卓系统，暂停不了，监听音频播放完成，createInnerAudioContext，微信小程序播放mp3文件，播放音频，如何播放本地mp3文件，在线音乐，暂停不了，音频文件流播放，播放缓存，如何缓存音频播放的进度，播放很卡，加载很慢，音乐的播放、暂停，下一曲的切换，inner
微信小程序多音频播放进度条问题
10-18
小程序的音频组件居然没有进度控制的功能，需要我们自己实现，下面脚本之家小编给大家带来了微信小程序多音频播放进度条问题，感兴趣的朋友一起看看吧
微信小程序从后端获取音频数据流并播放
最新发布
qq_55946937的博客
08-21 388
【代码】微信小程序从后端获取音频数据流并播放。
微信小程序多音频场景处理
xccjk的博客
03-28 1170
微信小程序多音频场景处理 背景：页面中有多条数据，每条数据都可以单独播放，不同时播放 核心逻辑就是每个音频单独初始化一个方法，每个音频播放的进度等信息都单独控制 通过wx.createInnerAudioContext来控制 // wxml <view wx:for="{{list}}" wx:key="id"> <view play="{{play}}" url="{{item.url}}" id="{{item.id}}">播放</view> </view&
微信小程序，类似微信点击语音播放效果，不会互相干扰播放状态
阿里巴啦的博客
08-02 1万+
类似平常微信语音聊天的效果…. 根据开发的需求，先理清一下思路，点击语音播放与暂停/停止，切换下一个语音等； 小程序对于audio的组件的一些api方法已经不支持了，详情可以参看：微信小程序audio组件文档 嗯嗯，这下子，该怎么办呢？ 就如上面提到，小程序1.60版本后，给开发者提供了这个wx.createInnerAudioContext()api…具体使用可以看文档； 好的...
解决AudioContext同时播放多个音频的问题（顺序播放音频流）
qq_54331236的博客
04-08 943
解决AudioContext同时播放多个音频的问题，实现在SSE推送模式中，根据后端传输的byte流，可以流式播放语音的效果
软件架构设计与模式之：模块化设计与组件化架构
AI天才研究院
10-29 661
模块化与组件化是现代软件工程的一个重要发展方向。模块化设计是一种将复杂系统划分为多个相对独立、功能完整、可替换和可维护的模块的方式，它能够使复杂的软件系统更容易理解、开发、测试、修改和扩展。而组件化设计则在这一基础上进一步提出将复杂的软件系统由单个大型软件拆分成不同层次的小型软件组件的观点。模块化与组件化设计都是为了解决软件系统复杂性问题。它们的关键是通过结构化的方式将复杂的软件系统分解成多个相互协作的模块或组件。但是，两者也存在着一些区别，下面我们就分别阐述一下二者之间的差异。模块（Module）
Qt开发经验总结
草上爬的博客
12-02 8470
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
JAVA SE学习笔记(七)：终章：Java程序设计基础笔记（全10万字）
热门推荐
宇智波Akali的博客
04-18 2万+
Java程序设计入门 ​ copyright © 2020 by 宇智波Akali 目录 文章目录第1章 Java基础语法1、数据类型​​1.1 八种基本数据类型1....
潜藏在手机中的新威胁：免安装应用安全指北
OPPO数智技术
11-17 5086
OPPO子午实验室在Black Hat Asia黑帽大会上分享了针对免安装应用的研究与分析成果，如何从普通接口调用到应用权限的远程命令执行，我们将在本篇文章中进行更为详尽的分析。
微信小程序：音频悬浮、隐藏、中断播放的逻辑处理，音频播放的bug
lessCoder的博客
01-14 3354
问题：小程序悬浮时，工程文件的音频不能够持续播放。重新显示程序界面，此时的页面显示仍旧是播放样式（应该是暂停样式），故而需要对其做个处理。 小程序目前不提供悬浮事件监听函数，故而需要自行处理。 分析加载逻辑： 初次加载顺序： App onLaunch() App onShow() Page onShow() 页面悬浮，或者切换到其他App，或者黑屏，导致页面隐藏： Page onHide() App onHide() 重新恢复到小程序界面： App onShow()
微信小程序中音频播放
qq_45219069的博客
03-21 6661
如何在小程序中实现音频播放 需要注意几点 由于现在官方不再维护 audio 组件 ，所以音频播放尽可能采取 wx.createInnerAudioContext() 接口 （ 若需要在后台播放，则采用 wx.getBackgroundAudioManager() ） 音频播放，只有在播放时才可以获取到音频长度（参考了多个带音频的小程序 qq音乐，百度网盘等，都是采取自动播放的方式，以获取...
wx.createInnerAudioContext多个音频播放
weixin_51172395的博客
12-03 2919
想做一个页面里多种小鸟，点不同的鸟播放不同的声音。一般都是用audio，但小程序文档提示：音频。1.6.0版本开始，该组件不再维护。建议使用能力更强的wx.createInnerAudioContext接口。 InnerAudioContext | 微信开放文档 结果发现这文档写的真好啊，如同没写一般。 废话不多说，上代码。 <view class="" bindtap="playSound" data-sound="{{item.sound}}">2播放</view> ..
微信小程序~wx.createInnerAudioContext的使用
qq_46568665的博客
04-20 1680
微信小程序~wx.createInnerAudioContext，音频播放的使用
小程序[InnerAudioContext]重复播放n次音频
weixin_33962923的博客
04-28 3831
结果 function loopVoice(srcs,maxtimes) { let secondIAC = wx.createInnerAudioContext() secondIAC.obeyMuteSwitch = false secondIAC.onError(() => { showToast({ icon: 'none', title:...
微信小程序：解决wx.createInnerAudioContext()播放语音的坑
干饭搬砖两不误。
03-26 5167
简介 微信小程序中用wx.createInnerAudioContext()，发现怎么暂停和取消的效果都差强人意，原因是将此方法写在了我的播放语音函数里。然后就参考了网上的解决方案。 具体实现 将此方法声明在onLoad中，（如果声明在page外部，每次进此页面执行语言操作都会多次执行）。 注意，页面播放按钮，除了点击事件，还需要绑定两个属性（文件路径、所点击的下标），即data-recordur...
cocos creator&微信小游戏音频播放数量限制问题
soul0921的博客
04-25 833
cocos creator&微信小游戏，控制音频播放量的方法
【微信小程序剪辑音频】
weixin_50991228的博客
12-26 517
【代码】【微信小程序剪辑音频】
android 多app录音
11-12
在Android上，实现多App录音需要使用音频录制的权限和合适的录音API。下面是实现多App录音的一种可能方法： 首先，需要在AndroidManifest.xml文件中为应用程序添加录音权限。在`<manifest>`标签内添加以下代码： ``` <uses-permission android:name="android.permission.RECORD_AUDIO" /> ``` 接下来，在应用程序代码中，可以使用`MediaRecorder`类来进行录音。可以创建一个录音管理类，处理不同App之间的录音调用。以下是一个示例： ```java public class RecorderManager { private MediaRecorder mediaRecorder; public void startRecording(String outputFile) { try { mediaRecorder = new MediaRecorder(); mediaRecorder.setAudioSource(MediaRecorder.AudioSource.MIC); mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4); mediaRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AAC); mediaRecorder.setOutputFile(outputFile); mediaRecorder.prepare(); mediaRecorder.start(); } catch (IOException e) { e.printStackTrace(); } } public void stopRecording() { if (mediaRecorder != null) { mediaRecorder.stop(); mediaRecorder.release(); mediaRecorder = null; } } } ``` 在需要录音的App中，可以实例化`RecorderManager`类并调用其方法来启动和停止录音。例如： ```java RecorderManager recorderManager = new RecorderManager(); recorderManager.startRecording("output_file.mp3"); // ... recorderManager.stopRecording(); ``` 如果需要多个App同时录音，可以将`RecorderManager`类设计为单例类，并在不同的App中共享这个实例。这样，多个App就可以使用同一个录音管理类来进行录音，实现多App同时录音的功能。 需要注意的是，有些机型的系统可能会限制同时进行多个App的录音操作，所以在实际场景中可能需要测试不同的设备和系统版本来确定是否支持多App录音。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值