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

【问题标题】：Using Audio on mouseover on image map在图像地图上使用鼠标悬停音频
【发布时间】：2017-05-14 15:58:43
【问题描述】：

我正在尝试通过创建一个图像映射来帮助一位朋友完成他的 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;
}

我已经查了一段时间了，虽然没有进一步的进展，在此先感谢！

【问题讨论】：

标签： javascript html audio imagemap

【解决方案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）并定义正确的事件侦听器/处理程序。

【讨论】：

太好了，谢谢！我可以在在线站点测试器上使用它，但必须包含不同的音频格式，因为它不适用于我的 chrome。我假设我必须为我想播放的每个声音创建不同的变量和函数？对吗？
抱歉，我使用的是 Firefox，并且支持 Ogg。实际上，您可以在 JS 中使用多个变量来处理多种格式，但在 HTML 中使用 <source> 和 <audio> 元素会更方便。（顺便说一句，如果您认为这个答案可以解决您的问题，请不要忘记接受它......）;）