最近工作的时候发现了这样的一个问题，amr格式的文件audio标签不能解码播放。
查了下mdn相关资料，发现确实是不支持amr后缀的文件
一般情况下是不会有这样的需求的，问题是当后端不愿意去做这个事的时候，就得想办法了。
上网查资料发现了这么一个解码amr的库
那我们要做的就是在此基础上提供的api来封装一个audio播放器，忽略UI因素，要满足如下几个场景
- 支持播放暂停
- 支持进度条显示
- amr和普通文件可以使用同一套api
于是基于原生audio的一些特性和解码库，封装了一个工具库
这里放一个基于vue二次封装使用的例子，有同样需求的朋友可以使用，欢迎提建议和star
<template>
<div class="player" v-loading="loading">
<i
:class="state==='pause'?'el-icon-video-play btn':'el-icon-video-pause btn'"
@click="playOrPause"
></i>
<el-progress :percentage="percentage" :show-text="false"></el-progress>
</div>
</template>
<script >
import { AudioPlayer } from "audio-amr-player";
export default {
data() {
return {
percentage: 0,
state: "pause",
loading: true
};
},
props: {
url: {
type: String
},
file: {
type: File,
validator(val) {
return val instanceof File;
}
}
},
watch: {
url() {
this.init();
},
file() {
this.init();
}
},
mounted() {
this.init();
},
methods: {
playOrPause() {
if (this.state === "pause") {
this.state = "play";
this.player.play();
} else {
this.state = "pause";
this.player.pause();
}
},
init() {
let _this = this;
this.player = new AudioPlayer({
url: this.url,
file: this.file,
afterInit() {
_this.loading = false;
}
});
this.player.onTimeUpdate(time => {
let rate =
time > this.player.duration ? 1 : time / this.player.duration;
this.percentage = rate * 100;
});
this.player.onEnd(() => {
this.state = "pause";
});
}
},
beforeDestroy() {
this.player.destroy();
}
};
</script>
