前言

在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例:

const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
innerAudioContext.onPlay(() => {console.log('开始播放')
})
innerAudioContext.onError((res) => {console.log(res.errMsg)console.log(res.errCode)
})

然而此时就出现了,无论按多少下都是重复播放同一条语音的情况!

从 https://blog.csdn.net/qq_39364032/article/details/79742120 得知,wx.createInnerAudioContext()这个api新建了一个实例之后,需要销毁实例,才能重新new一个实例。所以,我做了以下改动:

const innerAudioContext = wx.createInnerAudioContext()innerAudioContext.autoplay = trueinnerAudioContext.src = res.tempFilePathinnerAudioContext.onPlay(() => {console.log('开始播放')})innerAudioContext.onStop(() => {console.log('i am onStop')innerAudioContext.stop()//播放停止,销毁该实例innerAudioContext.destroy()})innerAudioContext.onEnded(() => {console.log('i am onEnded')//播放结束,销毁该实例innerAudioContext.destroy()console.log('已执行destory()')})innerAudioContext.onError((res) => {console.log(res.errMsg)console.log(res.errCode)innerAudioContext.destroy()})

最终解决方案

然而!无论我执行多少次,还是播放第一条语音!从我的后台来看,每次返回的语音文件都是不同的,甚至我把服务器上的文件下载到本地,也是不同的!于是我就怀疑它下载过一次这个地址就不再下载了。所以我又换一种写法,在上面加上wx.downloadFile这个api。

wx.downloadFile({url: 'http://47.106.74.22:8081/voice/download_audio', //仅为示例,并非真实的资源success: function (res) {// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {const innerAudioContext = wx.createInnerAudioContext()innerAudioContext.autoplay = trueinnerAudioContext.src = res.tempFilePathinnerAudioContext.onPlay(() => {console.log('开始播放')})innerAudioContext.onStop(() => {console.log('i am onStop')innerAudioContext.stop()//播放停止,销毁该实例innerAudioContext.destroy()})innerAudioContext.onEnded(() => {console.log('i am onEnded')//播放结束,销毁该实例innerAudioContext.destroy()console.log('已执行destory()')})innerAudioContext.onError((res) => {console.log(res.errMsg)console.log(res.errCode)innerAudioContext.destroy()})}}})

到这里,终于解决这个问题

注意的是,wx.createInnerAudioContext()无法播放wav文件,于是这里我用的是MP3文件。而wx.playVoice(OBJECT)也无法播放mp3文件。

转载于:https://www.cnblogs.com/whomhim/p/10518692.html

微信小程序-音频播放-wx.createInnerAudioContext() 每次都是重复播放同一条录音相关推荐

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

    前言 在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...

  2. uniapp实现微信小程序音频播放倒计时的功能,类似微信语音条

    uniapp实现微信小程序音频播放功能 最近需要有个项目需要用到音频播放,第一个想到的是audio标签,但是查阅了uniapp官方文档,发现audio组件已经不维护了. 官网推荐使用uni.creat ...

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

    我刚开始用wx.createInnerAudioContext(),是将此方法写在了我的播放语音函数里,发现怎么暂停和取消都不好使 经过踩坑,得出结论!!! 1.将此方法声明在onLoad中,(如果声 ...

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

    原理就是创建5个 innerAudioContext实例化对象,轮流调用.(小程序只能同时存在5个音频实例). 附上demo: const innerAudioContext1 = wx.create ...

  5. 微信小程序音频播放,可拖动进度条,可有时间显示

    首先来展示一下效果: 中间的播放条以及下面的浮窗就是我们呈现的最终效果. 音频播放使用的组件是: wx.getBackgroundAudioManager(); 在wx.request()中首先初始音 ...

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

    前言 网上有很多关于 InnerAudioContext.onTimeUpdate 不执行.失效的问题,都导致播放进度条无法做了,本文完美解决. 本文实现了 自定义播放音频控件样式,且支持播放进度条显 ...

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

    微信小程序 音频播放功能createInnerAudioContext 效果: 前端界面代码: <view class="cu-modal {{ModalName=='DialogMo ...

  8. 微信小程序音频相关问题:播放,录音等相关

    其实我也知道音频问题,十分尴尬,可以参考的资料极少,研究者也不多,所处的教程也基本是基础的内容,稍微深入几乎一篇都没有:所以前段时间我就准备弄的东西,一直没弄,因为没资料去弄,但是今天,看到一个同学遇 ...

  9. 微信小程序音乐播放器

    趁周末做一个简单的微信小程序音乐播放器,源码已留. 播放列表首页wxml <swiper class="swiper" indicator-dots='{{swipterSe ...

最新文章

  1. 不用ajax 后台的异步实现,js 怎么避免重复的异步操作(不问了,目前没办法后台做到,只能改造前端了)...
  2. springboot整合shiro地址栏JSESSIONID问题
  3. foursquare nyc数据集_炫酷的python地理数据可视化
  4. Android无法生成R文件的终极解决办法
  5. RTF文件格式【转】
  6. Vue前后端交互实现图书管理功能
  7. 【机器人】机械臂与动捕Nokov的深入了解
  8. excel 单元格内换行
  9. 5万字、97 张图总结操作系统核心知识点
  10. Disease Ontology:人类疾病分类数据库
  11. 计算机控制软件流程图,计算机控制系统的组成
  12. 【SpringBoot整合缓存】-----jetcache以及j2cache篇
  13. 1寸2寸3寸5寸6寸8寸10寸照片的具体尺寸(附常用照片尺寸对照表)
  14. neural-style风格迁移模型实战
  15. DAY01.使用JAVA从国家统计局爬取2020年全国统计用区划代码和城乡划分代码(省市区数据)
  16. 思维导图网页版推荐,这两个网站建议收藏
  17. 自己的应用跳转到应用宝评分界面
  18. 车载异构网络接入matlab,车载移动异构无线网络架构及关键技术
  19. 个人免费申请微信支付小微商户指南
  20. 【黑曼巴】菜鸟HTML

热门文章

  1. 爬虫那些事儿-- 简介
  2. 可恶,谁占用了我的80端口?
  3. 服务器返回值 解释 ajax提交方式 后台数据刷进前端
  4. 字符驱动之按键(四:poll机制)
  5. C#设计模式(19)——状态者模式(State Pattern)
  6. mysql-5.7中的innodb_buffer_pool_prefetching(read-ahead)详解
  7. work2的code和问题
  8. RDIFramework.NET(.NET快速开发框架) 答客户问(2014-02-23)
  9. 菜鸟学数据库(四)——超键、候选键、主键、外键
  10. 超棒的视差滚动效果javascript类库 - Jarallax