小程序 音频API采坑完全手册
最近打算做了个音频自定义播放器,录音跟音频播放的功能点踩各种莫名其妙的坑,社区也有不少人在提问,特写此文祭天
基于WEPY开发。
录音功能
相关api wx.getRecorderManager
WXML 模板
... 除了低版本样式兼容,没啥坑。
JS 交互逻辑
录音坑之一
部分手机无法上传录音文件。
原因:服务端上传文件大小限制
解决:sampleRate,encodeBitRate两者有对应要求,具体看文档,尽量调质中低音质,公司财大气粗忽略,顶配服务器跑起来。
音质越高文件文件越大,相同参数ios系统的录音文件更大。
const recorderManager = wepy.getRecorderManager()
const options = {duration: 600000, // 是的没看错 10分钟...sampleRate: 8000,encodeBitRate: 20000,...
}
复制代码
录音坑之二
部分用户录音之后无法试听。
原因:用户拒绝授权,录音代码无做校验(不严谨哈);苹果手机用户开了静音功能(就是左上角那个开关,这真无力吐槽吖);内存不足,开启蓝牙; 解决:录音开始前先查看麦克风授权情况,无授权不录音。代码如下
设置播放实例obeyMuteSwitch
属性(暂只支持ios)..
第三,我也不知道,一般建议重启。。。就是这么美妙。
...
methods = {// 开始录音recording() {wepy.getSetting().then((res) => {if (!res.authSetting['scope.record']) {wepy.authorize({scope: 'scope.record'}).then(() => {recorderManager.start(options)this.startTimer()this.$apply()}, (e) => {wepy.openSetting()})} else {recorderManager.start(options)this.startTimer()this.$apply()}})},
}
...
复制代码
录音坑之三
录音时长不准(该参数列表需要)
原因:手机卡顿,延迟导致部分用户录音跟计时器不同步(你永远不知道用户用的是啥手机,我只能说蓝绿厂大坑)
解决:调用onStop
方法回调录音时长。按理来说最长也就600s,但是后台看到有段录音时长是10000多s,目前还不知道啥原因,求解。
onLoad () {recorderManager.onStop(({tempFilePath, duration})=>{//do somethingthis.duration = parseInt(duration / 1000)}) }// 计时器startTimer (){// do something}
复制代码
录音坑之四
录音不完整
原因:录音过程中自动锁屏功能,来电等外部原因导致录音中断。
解决:提醒用户保持小程序运行状态;按住录音。不过我们10分钟,我怕用户手抽筋;wx.setKeepScreenOn()接口。
音频播放功能
相关api wx.createInnerAudioContext
JS 交互逻辑
audio组件不好用吗?自定义好看多啦~
播放的坑相对较少一点,建议页面只注册一个播放器,动态修改音源,相关事件只在页面onLoad注册
*动态修改音源,无法获取当前音源duration,异步!?
const innerAudioContext = wepy.createInnerAudioContext()
...
onLoad ({classId, date}) {innerAudioContext.onEnded(() => {//do something})innerAudioContext.onPlay(() => {})innerAudioContext.onTimeUpdate(()=>{//update Progress bar})...
}
// 计时器
startTimer (){// do something
}
复制代码
播放坑
听不到(好想除了听不到也没啥坑了吧),canpaly状态需要主动触发
原因:同上,ios用户开了静音模式自己;网络原因,进度条同定时器更新,文件没有缓存至可播放状态,导致进度条播放不同步;https,https,https..部分ios无法播放https协议的资源。 解决:进度条再onTimeUpdate
方法中更新。采用http的资源。
后续
10分钟的录音,用户试听的时候缺少拖放功能,不方便。待完善。。。
看下热度。开源自定义播放器。
转载于:https://juejin.im/post/5af53a6d51882542706404a9
小程序 音频API采坑完全手册相关推荐
- 一次使用wxcharts做微信小程序图表功能采到的坑
谈一次使用wxcharts做微信小程序图表功能采到的坑 铃木千夏-前端小白 第一次写博客,记录自己采到的坑,希望下次再遇到类似的不会这么头疼,也希望你们能少走些弯路. wxcharts柱状图 从网上找 ...
- 微信小程序音频相关问题:播放,录音等相关
其实我也知道音频问题,十分尴尬,可以参考的资料极少,研究者也不多,所处的教程也基本是基础的内容,稍微深入几乎一篇都没有:所以前段时间我就准备弄的东西,一直没弄,因为没资料去弄,但是今天,看到一个同学遇 ...
- api 定位 微信小程序 精度_小程序的api是什么
微信小程序API(Application Programming Interface),应用程序编程接口,也是程序员口中常说的接口.其实api并不专属于小程序,任何编程语言或程序形态都有相对应的api ...
- 微信小程序-音频播放-wx.createInnerAudioContext() 每次都是重复播放同一条录音
前言 在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...
- 微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑 如何使用 第二个坑 如何使用 微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
- uniapp实现微信小程序音频播放倒计时的功能,类似微信语音条
uniapp实现微信小程序音频播放功能 最近需要有个项目需要用到音频播放,第一个想到的是audio标签,但是查阅了uniapp官方文档,发现audio组件已经不维护了. 官网推荐使用uni.creat ...
- 微信小程序-音频播放 每次都是重复播放同一条录音
前言 在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...
- 小程序项目之填坑小记
作者:首席填坑官∙苏南 公众号:honeyBadger8,本文原创,著作权归作者所有,转载请注明原链接及出处. 简诉 是的,真的,你没有看错,我就是上次那个加薪的,但是现在问题来了,最近又搞了个小程序 ...
- 小程序云开发出坑系列(一)
小程序云开发出坑系列(一)-初识小程序开发 一.什么是小程序? 1.1 小程序简介 是一种不需要下载安装即可使用的应用,实现应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. ...
最新文章
- java实现递归下降分析_使用递归实现检查未知层级目录中的文件-Java实用技能
- 甘肃关于领取软考2021年上半年合格证书的通知
- uva1511(找规律。。。)
- angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
- leetcode 599. Minimum Index Sum of Two Lists | 599. 两个列表的最小索引总和
- mac环境下node.js和phonegap/cordova创建ios和android应用
- 图像处理基础系列-01
- JS实现表单多文件上传样式美化支持选中文件后删除相关项
- SimpleDateFormat 线程不安全原因及解决办法
- R读写Excel文件中数据的方法
- Java Hex 16进制的 byte String 转换类
- qq2018旧版本7.3.1下载_qq下载2020最新版下载安装-qq2020最新版下载V8.4.8-西西软件下载...
- springboot接口签名统一效验_Spring Boot 优雅地实现接口参数校验
- splay 模板 洛谷3369
- cpufreq 五种模式
- 一些关于HTML与CSS的总结与实际应用
- OpenStack 性能测试工具Rally使用
- OpenGL ES之三——绘制纯色背景
- python machine learning_Python Machine Learning
- Docker(安装常用命令)