快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果

更新時(shí)間：2017年10月27日 11:41:12 作者：祈澈姑娘

這篇文章給大家分享分享一段代碼基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

原型圖：

項(xiàng)目需求：

服務(wù)器接受到報(bào)警后將消息推送到前臺(tái)，（通過(guò)前端實(shí)時(shí)消息提示的效果-websocket長(zhǎng)輪詢(xún)），前臺(tái)接受到消息后需要發(fā)出警報(bào)提示音，提醒用戶(hù)。

原理：

很簡(jiǎn)單，使用html5里面的<audio>標(biāo)簽即可實(shí)現(xiàn)，在鈴聲的官網(wǎng)上選擇一段報(bào)警的音頻，放在代碼里面即可。

代碼片段：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<audio autoplay="autoplay" id="auto" src=""></audio>
<input type="button" value="點(diǎn)擊播放" onclick="playSound('http://data.huiyi8.com/2017/gha/03/17/1702.mp3')">
</body>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
 $(function(){
 function playSound(src) {
 var auto = $("#auto");
 auto.attr("src",src);
 }
 })

</script>
</html>
</script>
</html>

總結(jié)

以上所述是小編給大家介紹的基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

JS實(shí)時(shí)彈出新消息提示框并有提示音響起的實(shí)現(xiàn)代碼

相關(guān)文章

js操作輸入框提示信息且響應(yīng)鼠標(biāo)事件
注冊(cè)網(wǎng)站的輸入框就有默認(rèn)提示值，當(dāng)獲取鼠標(biāo)焦點(diǎn)的時(shí)候，默認(rèn)值被刪除，當(dāng)用戶(hù)沒(méi)輸入東西焦點(diǎn)離開(kāi)的時(shí)候，又恢復(fù)默認(rèn)提示值
2014-03-03
js實(shí)現(xiàn)煙花特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)煙花效果，實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊出現(xiàn)模擬煙花爆炸的特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
JS this關(guān)鍵字在ajax中使用出現(xiàn)問(wèn)題解決方案
這篇文章主要介紹了JS this關(guān)鍵字在ajax中使用出現(xiàn)問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
js中的window.open返回object的錯(cuò)誤的解決方法
系統(tǒng)中用javascript中的window.open后，頁(yè)面返回了一個(gè)[object]。因?yàn)橄到y(tǒng)的原因，必需使用href="javascript:window.open()"這樣的格式。所以只能通過(guò)以下辦法解決。
2009-08-08
現(xiàn)代配置YAML對(duì)比JSON優(yōu)勢(shì)分析
這篇文章主要為大家介紹了關(guān)于現(xiàn)代配置指南中YAML對(duì)比JSON的優(yōu)勢(shì)分析說(shuō)明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2022-02-02
淺談JS裝飾器以及裝飾器在TS中的使用方式
這篇文章主要帶大家探討一下JS裝飾器以及裝飾器在TS中的使用方式，文中有詳細(xì)的代碼示例，對(duì)裝飾器不太了解的同學(xué)可以參考閱讀本文學(xué)習(xí)了一下
2023-07-07
js禁止document element對(duì)象選中文本實(shí)現(xiàn)代碼
禁止document element對(duì)象選中文本在某在情況下還是很有必要的接下來(lái)本文將使用js實(shí)現(xiàn)，感興趣的各位可以參考下哈
2013-03-03
Javascript如何實(shí)現(xiàn)對(duì)象扁平化實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于Javascript如何實(shí)現(xiàn)對(duì)象扁平化的扁平化處理簡(jiǎn)而言之就是對(duì)對(duì)象中的對(duì)象提取出來(lái),放在一個(gè)對(duì)象里面,形象的說(shuō)就是把兒子的后代當(dāng)成自己的兒子,下面相關(guān)資料,需要的朋友可以參考下
2022-11-11
Cookie 注入是怎樣產(chǎn)生的
現(xiàn)在很多網(wǎng)站都加了防注入系統(tǒng)代碼，你輸入注入語(yǔ)句將無(wú)法注入~~感覺(jué)這樣的防注入系統(tǒng)不錯(cuò)，但防注入系統(tǒng)沒(méi)有注意到 Cookies 的問(wèn)題！所以就有了Cookies注入~~
2009-04-04
[JS源碼]超長(zhǎng)文章自動(dòng)分頁(yè)（客戶(hù)端版）
[JS源碼]超長(zhǎng)文章自動(dòng)分頁(yè)（客戶(hù)端版）...
2007-01-01