網(wǎng)站建設(shè)技術(shù)應(yīng)用如何在鼠標(biāo)觸發(fā)時(shí)給網(wǎng)頁添加聲音

2022-05-25 分類：網(wǎng)站建設(shè)

計(jì)算機(jī)應(yīng)用程序的一個(gè)特點(diǎn)，是當(dāng)你做某件事時(shí)會(huì)有反饋，最常見的反饋類型是聲音。當(dāng)你選擇東西時(shí)，計(jì)算機(jī)會(huì)發(fā)出卡嗒聲，當(dāng)出現(xiàn)錯(cuò)誤時(shí)，計(jì)算機(jī)會(huì)發(fā)出蜂鳴聲，并發(fā)出其他噪音，提醒你注意情況。熟悉網(wǎng)站建設(shè)開發(fā)的人一定知道，但是網(wǎng)頁中沒有這種類型的反饋，這使他們顯得遲鈍或沒有反應(yīng)。但現(xiàn)實(shí)中很多客戶有這種需求，如何在鼠標(biāo)觸發(fā)時(shí)給網(wǎng)頁添加聲音呢？幸運(yùn)的是網(wǎng)站建設(shè)技術(shù)可以實(shí)現(xiàn)，而且改變這一點(diǎn)很容易，使用動(dòng)態(tài)HTML屬性和聲音，您就可以創(chuàng)建更像應(yīng)用程序的網(wǎng)頁。

當(dāng)客戶單擊某物時(shí)添加聲音

當(dāng)客戶使用該屬性單擊某項(xiàng)時(shí)，以及客戶使用該屬性滾動(dòng)某項(xiàng)時(shí)，此腳本將添加聲音效果。請(qǐng)確保在不同的瀏覽器中測(cè)試它們，因?yàn)椴⒉皇撬械腤eb瀏覽器都在鼠標(biāo)懸停和單擊鏈接以外的元素上的屬性上進(jìn)行處理。將以下腳本放在HTML文檔的頭部：

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

將聲音放置在空跨度中

當(dāng)腳本啟動(dòng)時(shí)，JavaScript將一個(gè)Embed元素放在一個(gè)空的span元素中。因此，您需要將以下SPAN標(biāo)記添加到HTML頁面正文中的某個(gè)位置，最好是在文檔頂部附近：

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

使用屬性調(diào)用腳本

您需要添加的最后一件事是一個(gè)元素，您希望在單擊或鼠標(biāo)懸停時(shí)生成聲音。使用以下屬性之一調(diào)用腳本。將UrlToSoundFile替換為要播放的聲音文件的完整URL：

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

這是整個(gè)HTML文檔，播放的是藍(lán)調(diào)的聲音。聲音文件存儲(chǔ)在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>
<ponmouseover="playSound('zbluejay.wav');">Or you can put your mouse over this paragraph to hear the same bird sound.</p>
</body>
</html>

新聞標(biāo)題：網(wǎng)站建設(shè)技術(shù)應(yīng)用如何在鼠標(biāo)觸發(fā)時(shí)給網(wǎng)頁添加聲音
網(wǎng)頁路徑：http://muchs.cn/news1/158701.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容