javascript - 如何在 javascript ( w/ webpack) 中播放 mp3 文件？

Question

我正在尝试创建一个仅播放 mp3 文件的音乐播放器。

我不知道如何通过 webpack 将 mp3 文件提供给 Audio Element 构造函数。我已经为 webpack 中的 mp3 文件设置了一个文件加载器。向 mp3 文件提供相关 url 将不起作用，因为不会尝试“导入”mp3 文件并将其传递给构造函数。

我似乎无法找到有关音频元素的良好文档或 webpack 应该如何处理音频文件。

我这个页面的文件结构：

homePage: {
    player.js,
    homePage.js,
    template.html,
    intro.mp3}

在 player.js 中：

import { dom, fn } from '../../store'

function setupPlayer() {
    // DOM MANIPULATION (to-do)
    // 1. add the .paused class to dom.player
    // add the seeking class to dom.home.player when we are dragging
    // 2. dom.bar <- set the width from 0 to 100%
    // 3. dom.track for the song title
    // 4. dom.album for the album title
    // somehow grap the right 

    const h = dom.home

    let audio = new Audio( song )

    h.btn.addEventListener( 'click', e => {
        if ( audio.paused) {
            audio.play()
        } else {
            audio.pause()
        }
    })

    console.log(audio.src)

    audio.addEventListener( 'play', e => {

        // remove paused class
        h.player.classList.remove( 'paused' )

    })

    audio.addEventListener( 'pause' , e => {

        // add paused class
        h.player.classList.addEventListener( 'paused' )

    })


    // dom.bar.addEventListener( 'click')

}


export { setupPlayer }

webpack mp3 设置：

            {
                test: /\.(mp3|wav|wma|ogg)$/,
                use: {
                  loader: 'file-loader',
                  options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'assets/audio/',
                    publicPath: 'assets/audio/'
                  }
                }
              },

如何播放 intro.mp3？

标签： javascriptaudiowebpackmp3webpack-file-loader