前端播放音频【vue，audio】

问题描述

项目要求做到前端播放音频后端现在将mp3文件转换成二进制通过网络传过来

是一大推乱码我需要将其转换成mp3播放出来

解决过程

尝试打开

看到这群乱码我陷入了沉思尝试右键复制去搜索一番寻找答案。于是发现了……

右键出现了在新标签页打开尝试一下

居然打开了而且能播放

……

base64+blob

开始不断的看相关的博客但是网上关于播放音频的相关博客太少了……

看了很多后发现了两个总是出现的词blob和base64

于是开始尝试将获取到的数据进行转换成blob

相关blob的音频类型

类型名称	类型	type
aac	AAC aduio	audio/aac
.mid .midi	Musicla Instrument Digital InterfaceMIDI	audio/midi audio/x-midi
.mp3	MP4 audio	audio/mpeg
.oga	OGG audio	audio/ogg
.wav	Waveform Audio Format	audio/wav
.weba	WEBM audio	audio/webm
.3gp	3GPP audio/video container	video/3gpp audio/3gpp不含视频

async playSoundmark(id) {
      const data = await this.$api.playSoundmark({
        params: {
          soundmarkId: id,
        },
      });

      let reader = new FileReader()
      reader.readAsDataURL(new Blob([data] , {type: 'audio/wav'}))
      reader.onload = function() {
        console.log(this.result);
      }

    },

最后得到了base64相关的信息就想着能不能转换成url

请添加图片描述

结果发现这就是DataUrl……无法渲染上去此路不通

……

修改axios截取url

结果我思前想后的发现只要我获取到当前请求的地址不就可以直接访问播放了吗……

首先对封装的axios的get方法进行修改截取当前请求的url

export function get(url) {
    return (data = {}, config) => Promise.resolve(
        web.get(url, data, config).then(response =>  {
            window.localStorage.setItem('url',`http://项目地址:8088${url}`);
            response.data
        })
    )
}

添加audio标签渲染

    <audio autoplay controls id="playMp3"></audio>
……

let playMp3 = document.getElementById("playMp3");
      playMp3.src = window.localStorage.getItem("url") + `?soundmarkId=${id}`;
      console.log(playMp3.src);
      playMp3.load();