将 mp3 文件作为 npm 包的一部分提供

Question

我创建了一个使用 mp3 文件的 NPM 包，并使用 howler.js.

播放它们

当我将包安装为另一个项目的依赖项时，我似乎无法播放 node_modules 文件夹中的文件。

我试过单独使用 babel 和 webpack 与 babel, file-loader, url-loader.

需要文件的代码

    const filePath = path.join(__dirname, 'dist/public/Media/' + note.instrument + '/' + 'FF_' + notes['b'][notes[note.lang].indexOf(note._note)] + note._octave + '.mp3')
    sounds.set(key, new Howl({
        src: [filePath]
    }))

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

错误

Access to XMLHttpRequest at 'file:///dist/public/Media/Piano/FF_C1.mp3' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes

如何捆绑和解析静态资产以供在另一个项目中使用？

Answer 1

万一有人想知道，我最终通过创建一个 Rest API 来解决这个问题，它提供文件并在需要时获取它们。

将 mp3 文件作为 npm 包的一部分提供

Serving mp3 files as part of a npm package

javascript

mp3

npm

webpack

babel-loader