Audio playing onload and not onclick (involves webpack)

I’m making a note sequencer web application and I am currently trying to implement the function of playing a note on pressing a button corresponding to the note. I am currently using a test sound to understand how playing audio works as this is my first time dealing with audio in HTML.

I am also using webpack, and my problem at first was getting webpack to recognize the mp3 file, but I quickly solved that by using file-loader.

Now my problem lies in the fact that the test audio I am using does not play on the click of a button, but does play perfectly fine onload of the site. There are no errors given to me by the console.

Here is script.js: (note: this may be poorly written for the meantime of me understanding this issue)

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);

I want to make testaudio play on clicking testbutton, and NOT onload of the site.

Here is 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',
      },
    ],
  },
};

I attempted some of the solutions in this forum but to no avail.

I do believe this could be a problem with the way I’ve written my program, considering I have to also ensure everything works well with webpack. I have tried different syntaxes and creating separate functions to play the audio, but all of it just ended up playing the audio on load again.

Can anyone help out here?