前端播放音频
使用audio播放音频
代码:
<style lang="less" scoped>
</style>
<template>
<div>
<audio id="audioId" style="height: 100px;width: 100px" autoPlay></audio>
</div>
</template>
<script>
import {base64Str} from "../../activiti/test/test"
export default {
components: {},
computed: {},
data() {
return {};
},
methods: {
base64ToBlob(base64, fileType) {
let typeHeader = 'data:application/' + fileType + ';base64,'; // 定义base64 头部文件类型
let audioSrc = typeHeader + base64; // 拼接最终的base64
let arr = audioSrc.split(',');
let array = arr[0].match(/:(.*?);/);
let mime = (array && array.length > 1 ? array[1] : type) || type;
// 去掉url的头,并转化为byte
let bytes = window.atob(arr[1]);
// 处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
// 生成视图(直接针对内存):8位无符号整数,长度1个字节
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: mime
});
},
playAudio() {
let audioBlob = this.base64ToBlob(base64Str, "mp3");
let audio = document.getElementById("audioId");
audio.src = window.URL.createObjectURL(audioBlob);
audio.addEventListener("canplay", () => {
window.URL.revokeObjectURL(audio.src);
});
}
},
mounted() {
this.playAudio()
},
};
</script>
声音来源是调用腾讯的实时语音api生成base64格式编码的文件
参考文章:
前端audio音频使用base64编码播放