Загрузка файла MP3 с помощью веб-пакета - PullRequest
2 голосов
/ 07 апреля 2019

Я пытаюсь загрузить короткий mp3-файл в моем приложении, которое использует веб-пакет.Однако я не могу заставить его работать.Это ошибка, которую я получаю.

HTTP load failed with status 404. Load of media resource     http://127.0.0.1:5000/dist022e7b776a752949ddcf677722cde8fb.mp3 failed.

Это мой webpack.congfig

var path = require('path');
var webpack = require('webpack');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        index: './js/index.js',
        topics: './js/topics.js',
        plans: './js/plans.js',
        audio_processor: './js/audio_processor.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        publicPath: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(ogg|mp3|wav|mpe?g)$/i,
                use: 'file-loader'
            }
         ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            JQuery: 'jquery'
        }),
        new CleanWebpackPlugin()
    ]
};

Вот как я пытаюсь получить доступ к файлу.

let click_sound = require('../audio/click_sound.mp3');
let audio = new Audio(click_sound);

Вот структура папок.Вроде бы создать mp3 в папке dist нормально.Я пытаюсь получить доступ к mp3-файлу из файла audio_recorder.js.

|-- audio
|   `-- click_sound.mp3
|-- css
|   |-- bootstrap.css
|   |-- main.css
|   `-- starter-template.css
|-- dist
|   |-- 022e7b776a752949ddcf677722cde8fb.mp3
|   |-- audio_processor.bundle.js
|   |-- index.bundle.js
|   |-- plans.bundle.js
|   `-- topics.bundle.js
|-- js
|   |-- PlaybackController.js
|   |-- audio_processor.js
|   |-- audio_recorder.js
|   |-- config.json
|   |-- index.js
|   |-- lesson_feedback.js
|   |-- lesson_notation.js
|   |-- plans.js
|   `-- topics.js

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...