我正在尝试创建一个仅播放mp3文件的音乐播放器。
我不知道如何通过webpack将mp3文件提供给Audio Element构造函数。我已经为webpack中的mp3文件设置了文件加载器。向mp3文件提供相关的网址将不起作用，因为不会尝试“导入” 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？