前端播放音频

---

使用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编码播放