填坑小能手——chrome播放gsm编码的wav文件

前言

最近同事碰到了一个问题,wav格式的录音在chrome不能播放,一时没啥办法解决就在群里询问,当时也没啥好思路,后面研究了一下,最起码能够播放了,下面来看一下实现思路。

思考

客户用的是谷歌浏览器,谷歌浏览器是支持wav格式录音的,但是该录音用audio标签播放没有数据,用系统带的多媒体播放器是可以正常播放的。最开始的想法是该录音本身不是wav格式,或者只是修改了后缀,想办法获取音频文件数据转换成blob数据应该就能播放了。

blob

前两天刚好看了crunker源码,可以使用相关方法,大致步骤如下:

  1. 用fetch获取arrayBuffer,并处理成AudioBuffer。
  2. 将AudioBuffer转为Float32Array缓冲区数据。
  3. 将Float32Array数据进行处理得到PCM数据。
  4. 利用new Blob跟type处理成wav格式的blob数据。
    首先实现第一步,我们先用fetch获取arrayBuffer,通过AudioContext的decodeAudioData解码成AudioBuffer。

该方法参数为音频地址,所以我们把wav音频地址当做参数传递进去,并且打印函数返回值。打开页面查看结果,会发现报错了。

报错信息提示不能解码此数据,我们在方法中打印一下该文件的arraybuffer,发现是有返回值的。

我们把音频换成可以正常播放的,就不会出现该错误。简单查阅了下可能是录音格式导致的,录音格式不支持解码数据。到此blob第一步就宣告失败,原本就想转换格式但又不支持解码,只能另想办法。

ffmpeg

确认了格式问题,又向同事了解下情况,同事说现场wav是gsm编码的,然后我查了下gsm编码,gsm是一种压缩率很高的编码格式,形成的wav文件内存小,能够节省磁盘空间。看来是chrome不支持播放gsm编码的录音,于是想到用ffmpeg进行录音格式转换。
FFmpeg是一种多媒体框架,能够对多媒体进行解码、转换。chrome就是使用ffmpeg进行音视频的处理。之前在探索chrome播放avi格式视频的时候用到过相关插件------ffmpeg.wasm,可以使用此插件将gsm编码的wav转换成mp3格式的。ffmpeg使用也非常简单,需要注意的是0.11与0.12+版本之间API发生了变化,并且两者对node版本的要求也不一样,可以根据node版本去下载对应的版本。

利用ffmpeg得到mp3格式的blobUrl,然后赋值给audio的src,打开页面就能看到可以正常播放的音频了。

总结

解决bug也是学习知识的一个过程,之前还不知道有gsm编码的wav,如果我们碰到了gsm编码的wav最好还是跟客户沟通下,换种编码格式,或者让后端进行转码处理,前端使用ffmpeg来处理的话过程会比较慢。

相关推荐
毕设源码-郭学长3 分钟前
【开题答辩全过程】以 基于Web的网上问诊系统的设计与实现为例,包含答辩的问题和答案
前端
酉鬼女又兒36 分钟前
零基础快速入门前端DOM 操作核心知识与实战解析(完整汇总版)(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·js
喝拿铁写前端1 小时前
一套面向 Web、H5、小程序与 Flutter 的多端一致性技术方案
前端·架构
yaaakaaang1 小时前
(一)前端,如此简单!---下载Nginx
前端·nginx
牛奶1 小时前
为什么全国人民都能秒开同一个视频?
前端·http·cdn
KongHen022 小时前
uniapp-x实现自定义tabbar
前端·javascript·uni-app·unix
汪子熙2 小时前
TS2320 错误的本质、触发场景与在 Angular / RxJS 项目中的系统化应对
前端·javascript·angular.js
我命由我123452 小时前
React - BrowserRouter 与 HashRouter、push 模式与 replace 模式、编程式导航、withRouter
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
Younglina2 小时前
用AI全自动生成连环画?我试了,效果惊艳!
前端·ai编程·claude
Devin_chen2 小时前
ES6 Class 渐进式详解
前端·javascript