As @Unmitigated mentioned in the comment, user interaction is mandatory to play an audio. If you want to play the user interaction, modify the code as below

audio.addEventListener("canplaythrough", () => {
   audio.play().catch(e => {
      window.addEventListener('click', () => {
         audio.play()
      })
   })
});

Edited Add { once: true } to trigger only once.

audio.addEventListener("canplaythrough", () => {
   audio.play().catch(e => {
      window.addEventListener('click', () => {
         audio.play()
      }, { once: true })
   })
});

Chrome and Firefox disabled autoplay features, and it's not currently possible AFAIK:

https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/

You can do it without html markup.

But keep in mind that audio file need to be load before the user minimize the screen. And the user have to interact (scroll, click, or any touch or click event) with document before minimize (as any autoplay feature).

Or you gonna have following error: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

Take a look to google about autoplay: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

So if you try something like that it's will not work:

$(element).on('your-event', function(){
  var audio = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3');
  audio.play();
}

But this way should work

var audio = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3');
$(element).on('your-event', function(){
  audio.play();
}

Here is a working example on codepen: https://codepen.io/zecka/pen/VwjxGbE

Previously asked question said audio autoplay is not allowed on some mobile browser, you can implement, there are several workarounds.

Audio Tag Autoplay Not working in mobile

And yes, regarding the player, you can opt for an open source HTML5 Player, Amplitude.js which supports playlist as well as next song plays without user interaction based on playlist, you can check a demo on their website

https://521dimensions.com/open-source/amplitudejs

Refer to code on their GitHub:

https://github.com/521dimensions/amplitudejs

You can play any sound after the first DOM interaction. So for example, make the user click a button, like the login button, and play one (silent) sound. After that, you are free to make sounds on interval.

You need to add a change event listener for all elements which you are trying to check

// add change event listener for all elements thath match class "int"
document.querySelectorAll('.int').forEach(int => {
  int.addEventListener('change', event => {
    var int1 = document.getElementById('int1').value;
    var int2 = document.getElementById('int2').value;
    // check if int1 is bigger than int2
    if (int1 > int2) {
      document.getElementById("result").innerHTML = "play audio";
    } else {
      document.getElementById("result").innerHTML = "do not play audio";
    }
  })
})

<label>Integer 1: </label>
<input class="int" type="number" id="int1" value="1">
<label>Integer 2: </label>
<input class="int" type="number" id="int2" value="2">

<p id="result"></p>

try to change integer 1 to a number bigger than integer 2