在图像地图上鼠标悬停时使用音频

Question

我正在尝试通过创建图像地图来帮助朋友完成他的 Uni 项目，当您将鼠标悬停在图像的不同部分时，该图像地图会播放他创建的音频剪辑。我只是不知道我似乎弄错了什么，非常感谢任何帮助！

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;
}

我已经查找了一段时间，但没有进一步查找，在此先感谢！

Answer 1

为了帮助您，我建议您看一下这个最小的工作示例：

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>

如您所见，这并不是很复杂...您只需正确创建一个 map（您可以为此使用 GIMP）并定义正确的事件 listeners/handlers。

在图像地图上鼠标悬停时使用音频

Using Audio on mouseover on image map

html

javascript

audio

imagemap