HTML CSS JS

<button>Play</button>

body {
    height: 100dvh;
    margin: 0;

    display: grid;
    place-items: center;
  }

  button {
    padding: 0.25rem;

    font-size: 1.5rem;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;

    background-color: azure;
    color: hsl(180, 100%, 15%);

    border: 1px solid hsl(180, 100%, 70%);
    border-radius: 4px;

    box-shadow: 0 0 2px hsla(180, 100%, 10%, 0.3),
      0 0 5px hsla(180, 100%, 10%, 0.15);
  }

let track = new Audio("/assets/audio/beep.mp4");
  let button = document.querySelector("button");

  button.addEventListener("click", async (event) => {
    await playAudio(track);
  });

  async function playAudio(track) {
    track.volume = 0.2; // keep this low

    try {
      await track.play();
    } catch (error) {
      console.error(error);
    }
  }