How to trigger background audio by clicking a button?

I want the background music to start only when my self-generated button is clicked.
Here is my code:

<a href="audio/listen.mp3" autostart="false"loop="false"width="2"height="0" class="learn-more-btn">Listen.</a>

The problem is, it opens the audio on a separate page instead of invisibly in the background.
Thank you.

 

Hi.

This should help:

<audio src="/path/to/musicFile" id="bgAudio"></audio>
<button onclick="document.getElementById('bgAudio').play();">Play</button>
<button onclick="document.getElementById('bgAudio').pause();">Pause</button>

HTML:

 

Thanks 2WDH.com for your help.

Now I have three buttons. I only want the "LISTEN"-Button to appear for both purposes. And the music shall sound even when the main page is left while any subpage is visited. For the audio I would also accept the music of an YouTube video.
Thank you so much.

 

One button:

<script>
var bgAudio = new Audio();
bgAudio.setAttribute("src","/path/to/musicFile");
bgAudio.loop = true;
</script>
<button onclick="if ( bgAudio.paused ) { bgAudio.play(); } else { bgAudio.pause(); }">Play / Pause</button>

HTML:

Regarding the sound even when the main page is left - you can try to use frames or ajax to load content for example.

 

Thank you so much.
This is the result:

The left one is the original button without the desired function and the right one is the button we are working on. Now I want to get rid of the default border on the left. How would you do what?

 

If you are using button element then you can change it back to what you have used before (without the default border) with the onclick attribute.

 

Sorry I asked the wrong question. The problem is solved. There was some issue with the classes.

Thank you.