我正在尝试通过创建一个图像映射来帮助一个 friend 完成他的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;
}
我已经寻找了一段时间，尽管没有任何进一步的进展，谢谢!
最佳答案
为了帮助您，我建议您看一下这个最小的工作示例:
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="/image/Iy4Wr.png" usemap="#map">
<map name="map">
<area id="play" shape="circle" coords="150,149,49" title="Play">
</map>如您所见，这不是很复杂...您只需要正确创建一个
map(您可以使用GIMP)并定义正确的事件侦听器/处理程序。
关于javascript - 在图像 map 上的鼠标悬停时使用音频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43965999/