htmlimageaudioimagemap

Playing audio without going to new web page using html image map

I'm making an image map that uses game sound effects for each button on a picture of this Jukebox. However each time I press a image map location to play a sound effect, it always results in me going to another web page to play the sound effect.

<!DOCTYPE HTML>
<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>Jukebox Web Site</title>
</head>
<body>
<center>

<map name="image-map">
<img src="jukebox.png" usemap="#image-map">
    <area target="" alt="" title="1up" href="1up.mp3" coords="169,197,192,219" shape="rect">
    <area target="" alt="" title="Brick" href="brick.mp3" coords="199,199,222,221" shape="rect">
    <area target="" alt="" title="Coin" href="coin.mp3" coords="229,198,253,220" shape="rect">
    <area target="" alt="" title="flagpole" href="flagpole.mp3" coords="259,197,283,220" shape="rect">
    <area target="" alt="" title="gameover" href="gameover.mp3" coords="290,197,313,218" shape="rect">
    <area target="" alt="" title="kick" href="kick.mp3" coords="320,197,344,219" shape="rect">
</map>
</body>
</html>

Solution

  • In the new audio object place a link to the audio or a path from the file

    <!DOCTYPE HTML>
<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>Jukebox Web Site</title>
</head>
<body>
<center>

<map name="image-map">
<img src="https://i.sstatic.net/wY3Gu.png" usemap="#image-map">
    <area target="" alt="" title="1up" onclick="new Audio('1up.mp3').play()" coords="169,197,192,219" shape="rect">
    <area target="" alt="" title="Brick" onclick="new Audio('brick.mp3').play()" coords="199,199,222,221" shape="rect">
    <area target="" alt="" title="Coin" onclick="new Audio('coin.mp3').play()" coords="229,198,253,220" shape="rect">
    <area target="" alt="" title="flagpole" onclick="new Audio('flagpole.mp3').play()" coords="259,197,283,220" shape="rect">
    <area target="" alt="" title="gameover" onclick="new Audio('gameover.mp3').play()" coords="290,197,313,218" shape="rect">
    <area target="" alt="" title="kick" onclick="new Audio('kick.mp3').play()" coords="320,197,344,219" shape="rect">
</map>
</body>
</html>