前端播放音频vue，audio

Posted 2023-04-04 Leo的蕾奥拉

问题描述

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

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

解决过程

尝试打开

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

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

居然打开了，而且能播放

……

base64+blob

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

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

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

相关blob的音频类型

类型名称	类型	type
aac	AAC aduio	audio/aac
.mid .midi	Musicla Instrument Digital Interface（MIDI）	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();

vue中添加mp3音频文件，无法播放？

当我们需要在Vue项目中添加音频文件时，发现放到assets目录下的时候并不能播放。

 

两种常见的配置方法：

方法一：将音频文件放在static目录中，然后进行调用

<audio class=‘success‘ src="/static/audios/bgm.mp3"></audio>

缺点：打包后的dist文件中会有两份音乐文件，一件是打包后的media媒体文件中打包的音乐文件，还有一份是static中的自己audio的文件夹。可删除~

 

方法二：给项目配置mp3格式的解析器（推荐~）

1、在webpack.base.conf.js中添加加载器，如下：

{
  test: /.(mp3)(?.*)?$/,
  loader: ‘url-loader‘,
  options: {
       name: utils.assetsPath(‘assets/[name].[hash:7].[ext]‘)
   }
}

2、在vue-loader.conf.js文件中为audio的src属性添加转换属性选项，让vue-loader知道需要将audio的src 属性的内容转换为模块

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: [‘src‘, ‘poster‘],
    audio:‘src‘,  // 该属性
    source: ‘src‘,
    img: ‘src‘,
    image: ‘xlink:href‘
  }
}

3、在页面添加audio标签，引入资源即可，此时的资源放在assets目录下即可

<audio class=‘success‘ src="../assets/audios/bgm.mp3"></audio>

 

此时重新启动项目或者重新打包，即可听到声音