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

• Z时代
• 2024-02-23
• 分类：IT

目前在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
请问如何解决

回答：

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)
        }
    })

回答：

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

以上是 Webpack file-loader读取音频文件时只能读取为base64吗 的全部内容， 来源链接： utcz.com/p/936673.html