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

遇到此问题的情形：
单位开发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是音频后台返回音频路径

<!-- <vue-plyr v-if="assess.audio":emit="['play','pause']"@play="play"@pause="pause"
><audio crossorigin playsinline><source width="100%" :src="assess.audio.path" type="audio/mp3" /></audio>
</vue-plyr> -->
<div class="audio" v-if="assess.audio" @click="play(assess.audio.path)"><img src="../../assets/img/playAud.png" alt="播放"><span>点击收听老师留言</span>
</div>

script部分

<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();}});}}
};
</script>

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

audio标签无法播放amr格式音频解决方案（benz-amr-recorder）相关推荐

JavaCV音视频开发宝典：基于JavaCV实现wav音频直播服务，wav在线FM电台直播服务，无需流媒体服务，浏览器原生audio标签直接播放wav直播音频
<JavaCV音视频开发宝典>专栏目录导航 <JavaCV音视频开发宝典>专栏介绍和目录前言之前写过了mp3实现FM电台直播服务:<JavaCV音视频开发宝典:J ...
html包含音频二进制,js如何将二进制流音频转为audio标签能播放的格式？
短的可以播放长的无法播放看下面的 data:audio/wav;base64,UklGRhZ/AABXQVZFZm10IBAAAAABAAEAgD4AAAB9AAACABAAZGF0YRBXAAAA ...
后端返回amr格式音频前端处理播放播放（个人笔迹）
问题:audio不能播放amr格式音频需要进行解码解决方案 npm install benz-amr-recorder
vue.js用benz-amr-recorder实现播放amr格式音频
vue.js实现播放amr格式音频安装引用实操 html部分初始化对象调用方法预览效果纯前端解码.播放.录音.编码 AMR 音频,无须服务器支持,基于 [amr.js] 注意:由于使用了 ...
谷歌浏览器audio标签自动播放音乐问题解决
前面一篇博客中有audio标签自动播放音乐的代码,可是后来再打开页面时音乐自动播放报错了: 看了网上的一些帖子才知道原来在4月份谷歌浏览器做了改革,不止谷歌, 其他浏览器好像也不支持自动播放了,现贴出 ...
HLS播放：html5下用video标签来播放m3u8格式的视频
HLS播放:html5下用video标签来播放m3u8格式的视频 <video class="tvhou" width="100%" height=&qu ...
java后台 amr格式音频转为mp3格式
最近项目用到读取amr格式的音频,但是h5不支持这种格式,前台处理不太擅长感觉太过麻烦,所以还是在后端转格式吧. 用到一个jar: jave.jar 网址:https://www.sauronsoft ...
AudioTrack播放pcm格式音频
AudioTrack播放pcm格式音频 package com.zero.demo;import android.content.Context; import android.media.Audio ...
window API播放pcm格式音频文件，函数waveOutOpen等
之前在我的博客中有一篇关于编写录音器的代码,可保存为pcm和wav格式,说白了其实两者是一个东西,只不过wav比pcm多了一个文件头,这个文件头一共占了44个字节.此处这个不是重点,重点是如何编写程序 ...

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

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

audio标签无法播放amr格式音频解决方案（benz-amr-recorder）相关推荐

最新文章

热门文章