微信小程序完美解决wx.createInnerAudioContext()坑

最新推荐文章于 2025-03-28 09:43:58 发布

置顶

ajaxPost293614

最新推荐文章于 2025-03-28 09:43:58 发布

阅读量2.3w

点赞数 7

分类专栏：小程序 JavaScript 小技巧文章标签： javascript 小程序

本文链接：https://blog.csdn.net/caoyan0829/article/details/97296824

版权

在使用微信小程序的wx.createInnerAudioContext()时遇到了暂停和取消无效的问题。解决方案包括：在onLoad中声明该方法以避免多次执行，将API方法也声明在onLoad中，以减少不必要的回调事件创建。此外，推荐了官方的相关课程进行学习。

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

我刚开始用wx.createInnerAudioContext()，是将此方法写在了我的播放语音函数里，发现怎么暂停和取消都不好使

经过踩坑，得出结论！！！

1.将此方法声明在onLoad中，（如果声明在page外部，每次进此页面执行语言操作都会多次执行。）

2.将api方法也都声明在onLoad中（不需要一直去创建回调事件）

3.播放语言操作

  /**
   * 播放音频
   */
  playAudio(e) {
    const _this = this;
    wx.stopVoice()
    showToast('text', '播放中', {
      duration: 120 * 1000,

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ajaxPost293614

关注关注

7
点赞
踩
18

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序wx.createInnerAudioContext()在安卓手机不能播放语音文件问题解决

wujize的博客

07-01

5437

本文介绍小程序安卓手机播放语音文件错误问题的分析过程与解决方案，该问题出现较多，问题隐藏较深，按本文方案可以解决该问题。一、问题现象 微信小程序已经放弃了基于wx.createAudioContext()的audio组件，要求开发人员使用功能更强大的wx.createInnerAudioContext()组件，新的给件功能的确要强大得多，不需要在页面上布置组件，旧的组件只有play、pause、seek三个事件，功能是比较弱，新的Inner组件增加了很多事件，并且还有监控事件，可以自己定义UI界面，通过监

微信小程序：解决wx.createInnerAudioContext()播放语音的坑

干饭搬砖两不误。

03-26

5445

简介 微信小程序中用wx.createInnerAudioContext()，发现怎么暂停和取消的效果都差强人意，原因是将此方法写在了我的播放语音函数里。然后就参考了网上的解决方案。具体实现将此方法声明在onLoad中，（如果声明在page外部，每次进此页面执行语言操作都会多次执行）。注意，页面播放按钮，除了点击事件，还需要绑定两个属性（文件路径、所点击的下标），即data-recordur...

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

uni.createInnerAudioContext 或小程序wx.createInnerAudioContext 仅播放一次

weixin_41013858的博客

06-13

1910

想要给小程序端用户有一个消息提示音，然后很自然的定义了一个 const 像这个样子，const innerAudioContext = uni.createInnerAudioContext(); 然后在方法中去调用他，结果发现只有在首次加载的时候，才能提示一次，之后便不在提示了，找了一下网上的原因，说的比较多，试了几个也没用，然后看了一个说是有可能是实例的原因，导致的这种问题。所以解决办法来了 =======》把这个const 全局的改为局部的，就是在方法里面定义成变量，也就是说，每调用一次播放音..

小程序语音识别功能 wx.createInnerAudioContext

最新发布

weixin_43612234的博客

03-28

584

【代码】小程序语音识别功能 wx.createInnerAudioContext。

微信小程序播放背景音乐（wx.createInnerAudioContext）

weixin_43988116的博客

08-29

2960

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html。功能依托于微信小程序内置的 wx.createInnerAudioContext() 方法，相关更多方式使用可参考官方文档。简单记录如有问题或更优解还请不要吝啬的分享出来，此结。业务脚本js使用举例。...

小程序笔记-关于wx.createInnerAudioContext() /InnerAudioContext的使用与踩坑

A88552211的博客

07-09

1808

使用用方法封装，也可以不封装 /** * 操控音频播放 * @params: Audios: 音频地址列表 * */ handleAudio(Audios){ AppMusic.destroy() //销毁上次的实例（必须有）AppMusic是全局实例 AppMusic = wx.createInnerAudioContext() //创建实例（记住一定放这里，因为每次新播放音频都要新建实例，否则会播放上次和本次的音频） AppMusic.

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

胡世林的博客

03-29

2万+

百度了一下，很多都是使用的createAudioContext对于使用createInnerAudioContext 的反倒比较少，但是人家那儿写着升级版，所以想了下还是使用的createInnerAudioContext比较好点wxml代码如下： <view style="width:250rpx;height:250rpx;left:250r...

微信小程序-音频播放每次都是重复播放同一条录音

Himhim的笔记

08-02

9756

前言在调试微信小程序音频播放时，刚开始我也是直接复制官方文档的实例： const innerAudioContext = wx.createInnerAudioContext() innerAudioContext.autoplay = true innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21x...

微信小程序 用wx.getRecorderManager()和wx.createInnerAudioContext()制作一个简单的录音播放器（录制以及播放）

m0_50516958的博客

08-31

1749

音频录制、播放音频、暂停音频、计时器、简易

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

09-01

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

wx.createInnerAudioContext()播放暂停一次，再播放才有声音

abccbatqw的博客

12-05

625

【代码】wx.createInnerAudioContext()播放暂停一次，再播放才有声音。

wx.createInnerAudioContext多个音频播放

weixin_51172395的博客

12-03

3245

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

微信小程序之音频播放-wx.createInnerAudioContext()注意点

热门推荐

Sourcemyx的博客

03-02

5万+

咱们先看看官方示例地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html 创建innerAudioContext对象。 autoplay自动播放开启， src音频路径 onPlay()以及onError()播放以及错误回调。以上理解的不难懂。那么问题来。大部分人...

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

qq_46568665的博客

04-20

3238

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

微信小程序--解决wx.createInnerAudioContext()无法停止播放问题

Sriven的博客

07-10

6420

解决方案： 1.首先定义一个全局变量 let innerAudioContext = null; 2.在onLoad方法中获取innerAudioContext对象实例,再次进入页面时在onload再次创建实例，可以防止wx.createInnerAudioContext()监听回调多次触发 onLoad:function(options){ innerAudioContext...

微信小程序 音频播放功能createInnerAudioContext

一个专注于技术研究创新的程序员

06-30

4613

微信小程序 音频播放功能createInnerAudioContext

关于 uni.createInnerAudioContext 或者 wx.createInnerAudioContext 播放本地音频

weixin_41013858的博客

06-04

3394

今天有个需求，就是播放本地的音频，但是，网上找了一圈，都说的是播放网络音频。幸运的是，在微信公众社区里面找到了解决的办法，就是直接用绝对路径，比如 “/static/mp3/XXX.mp3”,这样就可以播放了，不管是uni.createInnerAudioContext 还是wx.createInnerAudioContext 都没问题了。之前写的是 “@/static/mp3/XXX.mp3” 和"../../static/mp3/XXX.mp3" 都不能播放 ...

小程序安卓端播放不了音频解决方法wx.createInnerAudioContext()

qq_42459843的博客

03-16

2911

简书：原文地址在小程序播放音频时，使用组件wx.createInnerAudioContext()，安卓端无法播放音频。我的情况：播放服务器上传来的音频，格式为mp3。首先查看你的格式是否符合文档要求在安卓端进行测试，有些mp3可播放（极少），大部分是不可以播放的。所以选择了先将服务器端传来的mp3音频下载到本地临时地址，再进行播放。第一步：对你的服务器域名设置在downloadFile合法域名中第二步：设置点击播放时，传入服务器地址进行下载到本地，播放此时测试，安卓端已经可以进行播放。

微信小程序-音频createInnerAudioContext

weixin_43843679的博客

08-01

1422

微信小程序-音频createInnerAudioContext

uniapp微信小程序安卓正常，苹果手机 wx.createInnerAudioContext()不能播放

12-06

在uniapp开发微信小程序时，遇到`wx.createInnerAudioContext()`在安卓手机上正常播放，但在苹果手机上无法播放的问题，可能有以下几个原因和解决方法： 1. **音频格式问题**： - 苹果设备对音频格式的支持有限，确保你使用的音频格式是苹果设备支持的常见格式，如MP3、AAC等。 2. **音频文件路径问题**： - 确保音频文件的路径是正确的。在苹果设备上，路径问题可能导致无法找到音频文件。可以尝试使用相对路径或网络URL来加载音频。 3. **权限问题**： - 苹果设备对应用的权限管理较为严格，确保在`manifest.json`中正确配置了音频播放的权限。 4. **音频播放代码问题**： - 确保在创建`InnerAudioContext`对象后，正确调用了`play()`方法。例如： ```javascript const innerAudioContext = wx.createInnerAudioContext(); innerAudioContext.src = 'your-audio-file-path.mp3'; // 确保路径正确 innerAudioContext.play(); ``` 5. **调试和日志**： - 使用真机调试，查看控制台日志，检查是否有报错信息。苹果设备的调试信息可能与安卓设备不同，需要仔细查看。 6. **缓存问题**： - 有时缓存可能导致音频无法播放，尝试清除应用缓存或重新安装应用。 7. **网络问题**： - 如果音频文件是通过网络加载的，确保网络连接正常，并且音频文件可以通过浏览器或其他工具正常访问。通过以上几个方面的检查和调试，应该可以解决`wx.createInnerAudioContext()`在苹果设备上无法播放的问题。