如何单击或滚动播放声音(play a sound on click or rollover)

通过使用动态HTML属性和声音,您可以创建一个更像应用程序的网页。...

通过使用动态HTML属性和声音,您可以创建一个更像应用程序的网页。

Loudspeaker in sky

当客户点击某个东西时添加声音

创建一个脚本,当客户使用该属性单击某个对象时,以及当客户使用该属性翻滚某个对象时,添加声音效果。在不同的浏览器中测试这些效果,因为不是所有的web浏览器都能处理除链接以外的元素上的鼠标悬停和单击属性。

将以下脚本放在HTML文档的头部:

<script language="javascript" type="text/javascript">function playSound(soundfile) {document.getElementById("dummy").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\"loop=\"false\" />";}</script>

将声音放在一个空白的范围内

启动脚本时,JavaScript将嵌入元素放置在空span元素中。因此,您需要在HTML页面主体的某个位置添加以下span标记,最好靠近文档顶部:

<span id="dummy"></span>

使用属性调用脚本

添加一个元素以在单击或鼠标悬停时生成声音。使用这些属性之一调用脚本。将UrlToSoundFile替换为您希望播放的声音文件的完整URL:

<a href="#" onclick="playSound('UrlToSoundFile');">Click here to hear a sound</a><p onmouseover="playSound('UrlToSoundFile');">Mouse over this text to hear a sound</p>

这是整个HTML文档,播放着蓝鸦的声音。声音文件存储在与HTML页面相同的目录中:

<!doctype html><html><head><meta charset="ISO-8859-1" /><title>Example of How to Play a Sound on Click or on MouseOver</title><script language="javascript" type="text/javascript">function playSound(soundfile) { document.getElementById("dummy").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";}</script></head><body><span id="dummy"></span><p><a href="#" onclick="playSound('zbluejay.wav');">Click here to hear a bird sing</a></p><p onmouseover="playSound('zbluejay.wav');">Or you can put your mouse over this paragraph to hear the same bird sound.</p></body></html>

  • 发表于 2021-09-04 21:41
  • 阅读 ( 154 )
  • 分类:IT

你可能感兴趣的文章

用diy动作激活的音箱吓唬不给糖就捣蛋的人

...。哦,快乐。我在这里让你的工作更容易,通过向你展示如何**一个简单的运动感应树莓皮万圣节音箱。下面是一个演示: ...

  • 发布于 2021-03-17 05:08
  • 阅读 ( 289 )

如何在windows和mac上使用audacity录制音频

... 如何在麦克风上使用audacity ...

  • 发布于 2021-03-29 15:03
  • 阅读 ( 291 )

如何在Windows10上的pc游戏中使用spotify

...你启用Spotify小部件。 相关:windows10新游戏吧的6大功能 如何在windows 10游戏栏中使用spotify 首先,按Windows+G启动游戏栏。或者,您可以单击“开始”菜单中的“Xbox Game Bar”。 在游戏栏工具栏中,单击小部件菜单图标。 将出现一...

  • 发布于 2021-03-31 21:52
  • 阅读 ( 187 )

如何在mac上使用control center

...可以使用新功能,如黑暗模式,现在播放,等等。下面是如何在Mac上使用控制中心。 控制中心可作为Mac菜单栏的节省空间措施。像Wi-Fi和蓝牙这样的功能现在可以在控制中心找到。但是,如果您错过了它们,并且希望在菜单栏中...

  • 发布于 2021-04-01 09:14
  • 阅读 ( 350 )

什么是google play points,您如何使用它们?

googleplay商店拥有成千上万的应用程序、游戏、电影、电子书等。你可能会发现自己在那里买了很多东西,为什么不为此得到奖励呢?这就是googleplaypoints的用武之地。 什么是谷歌播放点(google play points)? googleplay积分只是通过go...

  • 发布于 2021-04-01 17:26
  • 阅读 ( 326 )

如何解决windows10中的声音问题

...从表面上看,没有明显的理由缺乏音频。本指南向您介绍如何修复Windows10中的声音问题。 不幸的是,声音问题可能很棘手。问题可能只存在于第三方软件中,需要修补程序。问题也可能源于windows10本身或底层硬件。可能的修复...

  • 发布于 2021-04-03 01:47
  • 阅读 ( 224 )

如何禁用iphone或ipad上的锁定声音

...或者如果您不想在某些情况下听到它,只需使**静音。 如何永久禁用锁止声 您可以从Settings应用程序禁用此声音。为此,打开Settings应用程序,向下滚动,然后单击“Sounds&amp;Happics”选项。在iPad和旧iPhone上,点击“Sounds”(声...

  • 发布于 2021-04-06 20:31
  • 阅读 ( 183 )

当你说“亚历山娜”时,如何让你的回声显示播放声音

默认情况下,当您在Echo Show附近说“Alexa”时,它会在屏幕上显示一条蓝线。如果你喜欢更明显一点的东西,你可以让你的回声显示播放一个声音,每次你调用它。 当你开始和亚历山和丽萨交谈,一旦你完成了你的要求,亚历...

  • 发布于 2021-04-07 13:44
  • 阅读 ( 73 )

当附近的电子设备关闭笔记本电脑的显示器时,你能做什么?

...动的问答网站分组。 问题 超级用户读者阿凡克想知道如何阻止附近的电子设备关闭笔记本电脑的显示器: About six months ago, the display on my Toshiba laptop started turning off whenever I placed my mobile phone or sound bar next to it. If I move them away, th...

  • 发布于 2021-04-08 12:22
  • 阅读 ( 229 )

我能提高潘多拉音乐流的质量吗?

...好处?请继续阅读,我们将向一位热爱潘多拉的读者展示如何最大限度地提高流媒体体验的质量。 Dear How-To Geek, I listen to Pandora (the music service) a ton on my desktop computer and am pretty happy with the sound quality. It’s not CD-quality, but it’s prett...

  • 发布于 2021-04-08 23:13
  • 阅读 ( 135 )
jmub5668
jmub5668

0 篇文章

相关推荐