Webpack file-loader读取音频文件时只能读取为base64吗

Question

目前在src目录中有music目录 目的是将music目录中的音频文件打包

1. 先在vue-config.js中配置了file-loader 代码如下

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {

    // 添加文件loader
    config.module
      .rule('music')
      .test(/\.mp3$/)
      .include.add(resolve('src/music/'))
      .end()
      .use('file-loader')
      .loader('file-loader')
      .options({
        limit: false,
        name: 'music-[name]'
      })
  }
}

2. 在main.js中测试引入

const requireAll = (requireContext) => requireContext.keys().map(requireContext)
const req = require.context('./music', false, /\.mp3$/)
const list = requireAll(req)
console.log(list)

3. 浏览器打印是base64
   

无法用base64作为src进行播放
在file-loader中已经配置了limit值 但是并没有生效，所有文件都只能读取为base64
请问如何解决

Answer 1

base64 可以放入 src 进行播放

---

测试代码

fetch('http://www.lilnong.top/static/audio/1547430960867SSD0MSW4C.mp3')
    .then(v=>v.blob())
    .then(v=>{
        fr = new FileReader();
        fr.readAsDataURL(v)
        fr.onload = ()=>{
            el = document.createElement('audio')
            el.src = fr.result;
            el.controls = true;
            document.body.appendChild(el)
        }
    })

Answer 2

为什么音频数据信号要浏览器打印出来？
音频数据是二进制信号，要打印输出，估计只能转换成BASE64这种全由可打印字符处理的格式啦。