在load时播放音频而不是在click时播放（涉及webpack）

Question

我正在制作一个音符音序器网络应用程序，目前我正在尝试实现按下与音符对应的按钮时播放音符的功能。我目前正在使用测试声音来了解播放音频的工作原理，因为这是我第一次处理 HTML 中的音频。

我也在使用 webpack，一开始我的问题是让 webpack 识别 mp3 文件，但我很快通过使用

file-loader

解决了这个问题。

现在我的问题在于，我使用的测试音频不能在单击按钮时播放，但在网站加载时可以完美播放。控制台没有给我任何错误。

这是

script.js

：（注意：在我理解这个问题的同时，这可能写得不好）

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");
const testaudio = new Audio();
testaudio.src = myAudioResource;
testbutton.addEventListener('click', 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);

我想让

testaudio

在点击

testbutton

时播放，而不是加载网站。

这是

webpack.config.js

：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: "./src/script.js",
  devtool: 'inline-source-map',
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Leitmotif',
      filename: 'index.html',
      template: './src/template.html',
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.mp3/,
        loader: 'file-loader',
      },
    ],
  },
};

我尝试了这个论坛中的一些解决方案，但没有成功。

我确实相信这可能是我编写程序的方式的问题，考虑到我还必须确保 webpack 的一切都能正常工作。我尝试了不同的语法并创建了单独的函数来播放音频，但所有这些最终都只是再次在加载时播放音频。

有人可以帮忙吗？

Answer 1

尝试用

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

 代替 

testbutton.addEventListener('click', () => {testaudio.play()})