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

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

1 个答案: