Using Audio on mouseover on image map

Question

I am trying to help a friend with his Uni Project by creating an image map which plays audio clips he created when you hover over different parts of the image. I just do not know what I seem to be getting wrong, any help is much appreciated!

HTML:

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="DLL MUSIC SIM.css">
        <script type="text/javascript" src="DLL MUSIC SIM.js"></script>
        <title>Daddy Long Legs Music Simulator</title>
    </head>

    <body>
        <img src="https://photos-4.dropbox.com/t/2/AAD7kArwYwyj90InSvhwMX09saAeNWEh4czxGRe2JjinjQ/12/150613124/png/32x32/1/_/1/2/First%20Draft.png/EJKfmnMYRCACKAI/xur8HIDxW2Qob1IEtNOndWn1TSPxcVdIxuzxDGr1BxY?size=2048x1536&size_mode=3" alt="" usemap="#DrumMap" />
        <img id="draft" width="1652" height="971" alt="">
        <map name="map">
            <area shape="poly" coords="685,480,695,678,993,684,983,472" nohref="nohref" onmouseover="changeClip('drum1');"/>

        </map>

        <audio id="drum1"><source src="https://www.dropbox.com/s/i85f9q7qruar91m/Track%201%20Drums.wav?dl=0" type="audio/wav"></source></audio>

    </body>

</html>

CSS:

body{
    background-color: black;
}

area {
    display: none;
}

#audio {
    display: none;
}

JS:

function playClip(clip) {
    document.getElementById(note).play();
}

function pauseAudio() {
    audio.pause() onmouseout;
}

I have been looking this up for a while now though not any further forward, thanks in advance!

score 1 · Accepted Answer · answered May 14 '17 at 16:28

1

To help you, I propose you to take a look at this minimal working example:

var go = document.getElementById('play'),
    audio = null;

go.addEventListener('mouseenter', play, false);
go.addEventListener('mouseout', stop, false);

function play() {
  audio = new Audio('https://www.gnu.org/music/FreeSWSong.ogg');
  audio.play();
}

function stop() {
  if (!audio.paused) {
    audio.pause();
  }
  audio = null;
}

<img src="https://i.stack.imgur.com/Iy4Wr.png" usemap="#map">

<map name="map">
  <area id="play" shape="circle" coords="150,149,49" title="Play">
</map>

As you can see, this is not very complicated... You just have to create a map properly (you can use GIMP for that) and define the right event listeners/handlers.

answered May 14 '17 at 16:28

Badacadabra

8,043
7
28
49

Excellent, thank you! I can get this working on an online site tester but will have to include different audio formats as its not working on chrome for me. I assume that I would have to create different variables and functions for each sound I want to play? Is that correct? – disco420 May 14 '17 at 17:04
Oh sorry, I'm on Firefox and Ogg is supported. Indeed, you could use several variables in your JS to handle multiple formats, but it would be more convenient with `` and ` – Badacadabra May 14 '17 at 17:40

Using Audio on mouseover on image map

1 Answers1