Webpack环境下音频加载自动播放、点击按钮不播放的问题求助

你的核心问题出在事件绑定的写法上，直接导致音频在页面加载时自动播放，点击按钮却无反应。

错误原因 #

这段代码里：

testbutton.addEventListener('click', testaudio.play())

testaudio.play()会立即执行，并把执行结果（undefined）传给addEventListener作为回调函数。所以页面加载时音频就播放了，而点击按钮时没有实际的回调逻辑可以触发。

修正后的代码 #

把事件绑定改成以下两种方式之一：

方式1：用箭头函数包裹（推荐，写法直观）

import "./style.css";
import myAudioResource from './click-234708.mp3';

const CONTROL_BAR = document.createElement("div");
CONTROL_BAR.id = "control-bar";

const MAIN_BAR = document.createElement("div");
MAIN_BAR.id = "main-bar";

const testbutton = document.createElement("button");
testbutton.textContent = "播放测试音"; // 可以给按钮加个文字，方便点击
const testaudio = new Audio(myAudioResource); // 也可以直接在实例化时传入资源路径

// 修正事件绑定
testbutton.addEventListener('click', () => {
  testaudio.currentTime = 0; // 重置播放位置，避免重复点击时音频叠加
  testaudio.play();
})
MAIN_BAR.appendChild(testbutton);

const SCALE_BAR = document.createElement("div");
SCALE_BAR.id = "scale-bar";

const MAIN = document.createElement("div");
MAIN.id = "main";

MAIN.appendChild(CONTROL_BAR);
MAIN.appendChild(MAIN_BAR);
MAIN.appendChild(SCALE_BAR);
document.body.appendChild(MAIN);

方式2：用bind绑定this指向

// 替换事件绑定部分
testbutton.addEventListener('click', testaudio.play.bind(testaudio))

注：play方法内部需要正确的this指向Audio实例，所以必须用bind绑定，否则直接传testaudio.play会导致this指向错误，无法正常播放。

额外说明 #

• 现代浏览器有严格的自动播放政策，必须由用户主动交互（如点击）触发音频播放，修正后的写法完全符合这个要求。
• 你的Webpack配置没有问题，file-loader已经正确处理了MP3资源，无需修改。

内容的提问来源于stack exchange，提问作者Nebras777