网站建设技术应用如何在鼠标触发时给网页添加声音

作者:境由心生 ⁄ 时间:2019年01月24日 ⁄ 分类: 网站建设知识
网站建设技术应用如何在鼠标触发时给网页添加声音
计算机应用程序的一个特点,是当你做某件事时会有反馈,最常见的反馈类型是声音。当你选择东西时,计算机会发出卡嗒声,当出现错误时,计算机会发出蜂鸣声,并发出其他噪音,提醒你注意情况。熟悉网站建设开发的人一定知道,但是网页中没有这种类型的反馈,这使他们显得迟钝或没有反应。但现实中很多客户有这种需求,如何在鼠标触发时给网页添加声音呢?幸运的是网站建设技术可以实现,而且改变这一点很容易,使用动态HTML属性和声音,您就可以创建更像应用程序的网页。
当客户单击某物时添加声音
当客户使用该属性单击某项时,以及客户使用该属性滚动某项时,此脚本将添加声音效果。请确保在不同的浏览器中测试它们,因为并不是所有的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将一个Embed元素放在一个空的span元素中。因此,您需要将以下SPAN标记添加到HTML页面正文中的某个位置,最好是在文档顶部附近:
<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>

本文由高端网站设计专业品牌引航博景原创编辑,转载禁止进行任何修改,且请务必注明出处。
本文URL地址:https://www.joyweb.cn/joyblog/?post=664

您可能还喜欢以下内容