Playing audio files using an image map

Hello everybody I am new to the forum thank you very much for reading my problem!

I am currently working on an interactive Christmas story for children in Harlowe 3.1.0. I made a couple illustrations myself and would like to work with sound maps. So that the children could klick on one part of an image and it would play sound a and if they click on another part of the same image it would play sound b.

I am really new to twine and I already tried everything I could. But I just got the two ideas to work separately.
One plays a sound, when you klick on the picture, but stays in the story like I wanted to.

Example Code:

var audio = new Audio("" ) ;

audio.oncanplaythrough = function(){;


<input type="image" src="" width="500" height="500" onclick="">

And the other one works as an image map with two different areas, but when you klick on one of them it opens the website where the audio came from and plays it there, while leaving the story.

Example Code:

<img src="" usemap="#image-map">

<map name="image-map">
    <area target="" alt="house" title="house" href="" coords="176,232,454,451" shape="rect">
    <area target="" alt="shed" title="shed" href="" coords="502,267,691,436" shape="rect">

Does anyone have an idea or is it simply not possible to combine these two? Even my professor at uni was not sure if it would work (the story is supposed to count as my final project in an electronic literature course that I am taking). But I really like the idea and would be so happy if there was an opportunity for this to work.

I really appreciate every suggestion for my problem that you have, thank you so much for taking the time.

Kind regards