audio标签无法播放amr格式音频解决方案（benz

您所在的位置：网站首页 › mp3播放格式不支持 › audio标签无法播放amr格式音频解决方案（benz

audio标签无法播放amr格式音频解决方案（benz

2023-11-27 20:39| 来源: 网络整理| 查看: 265

遇到此问题的情形：单位开发app采用的Hybrid混合开发模式，有些列表页，详情页都是H5页面，我这边的框架是vue写的。最近一个项目中涉及到了视频和音频的展示和播放，因为app有安卓端和ios端，视频和音频的上传都是原生去上传的，然后再详情页中需要展示出来，ios中音频没遇到问题，因为ios自己录音生成的是.mp3格式音频，所以用audio标签可以完美播放。（audio标签支持的格式只有MP3, Wav, 和 Ogg），*

问题就出在了安卓端，项目中发现安卓录音以后生成的音频格式是amr的，所以不能播放

这时候首先想到的是让安卓处理生成音频格式，但是安卓人员说比较麻烦不好弄，项目马上就要上线了没时间整，只能从我H5这边想想办法，好吧，谁叫咋是配合人家的呢。

当时我想到的解决思路，有大神有别的解决思路欢迎交流学习

前端接收到接口返回的amr音频后，做一个类型转换，amr转mp3，（虽然说一切二进制的东西都可以随便转换格式，但是本人水平有限，所以。。。）既然audio不能用，那就不用他，于是乎网上各种找资料，最后锁定benz-amr-recorder

代码部分首先下载依赖到项目中

npm install benz-amr-recorder

然后在需要的文件中引入，完成实例化

import BenzAMRRecorder from 'benz-amr-recorder' var amr = new BenzAMRRecorder();

最后通过click事件去控制音频的播放和暂停

play(url) { amr.initWithUrl(url).then(function() { // amr.isPlaying() 返回音频的播放状态是否正在播放返回boolean类型 console.log(amr.isPlaying()) if(amr.isPlaying()){ amr.stop(); } else { amr.play(); } }); },

完整代码 html部分，注释的部分是遇到问题的部分，assess.audio.path是音频后台返回音频路径

点击收听老师留言

script部分

import BenzAMRRecorder from 'benz-amr-recorder' var amr = new BenzAMRRecorder(); export default { name: "assessment", methods: { play(url) { amr.initWithUrl(url).then(function() { // amr.isPlaying() 返回音频的播放状态是否正在播放返回boolean类型 console.log(amr.isPlaying()) if(amr.isPlaying()){ amr.stop(); } else { amr.play(); } }); } } };

欢迎大神指点交流，不足之处欢迎留言评论，一起进步

【本文地址】

audio标签无法播放amr格式音频解决方案（benz

audio标签无法播放amr格式音频解决方案（benz

今日新闻

推荐新闻