javascript - 在HTML <区域>中使用JavaScript函数在单击时播放音频

标签 javascript html audio

我正在尝试使其工作,以便如果用户单击指定区域,则播放声音(根本不更改屏幕上显示的内容)。现在,我使用的键盘图像带有<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/

相关文章:

javascript - 如何使用 JSS 向 body 元素添加样式?

javascript - 如何使用 jQuery 消除旧内容而不使用 Empty() 函数?

javascript - 带有加号和减号图标的 jQuery 可扩展 div

ios - 简易的ios音频库?

javascript - 使用 Ramda 使函数 pointfree

php - css 因未知原因覆盖 php

html - 无论屏幕大小如何,如何将正文放在页面中央

html - 使用 css clear 创建 css 网格 :both and nth of type

java - 使用 JLayer 分割和淡入淡出 MP3 文件

c# - UWP Windows IoT核心流路由