我正在尝试使其工作,以便如果用户单击指定区域,则播放声音(根本不更改屏幕上显示的内容)。现在,我使用的键盘图像带有<map>
和<area>
标记,这些标记与键盘的键相对应。到目前为止,我已经使用了三种方法来尝试使声音在单击时播放,但是已经为其中的三个键制作了<area>
标签,但它们似乎都不起作用。如果可能,我希望能够使用JavaScript函数来实现此功能,就像我尝试使用前两个键盘键一样。
<html>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
var audio = new Audio("+soundfile+");
audio.play();
}
</script>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/PianoKeyboard.svg/250px-PianoKeyboard.svg.png" width="500" height="300" alt="keyboard" usemap="#keyMap">
<map name="keyMap">
<area shape="rect" coords="0,200,72,300" alt="C" href="JavaScript: playSound('http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg');">
<area shape="rect" coords="72,200,144,300" alt="D" href="#" onclick=playSound('http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg')>
<area shape="rect" coords="144,200,216,300" alt="E" href="#audio">
</map>
<audio src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">
</body>
</html>
最佳答案
你做得很好。前两个案例效果很好。只是一个小错误:从函数中删除引号:
function playSound(soundfile) {
var audio = new Audio(soundfile);
audio.play();
}
http://jsfiddle.net/k3c68/
关于javascript - 在HTML <区域>中使用JavaScript函数在单击时播放音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22650716/