基于JavaScript實現(xiàn)報警器提示音效果
更新時間：2017年10月27日 11:41:12 作者：祈澈姑娘
這篇文章給大家分享分享一段代碼基于JavaScript實現(xiàn)報警器提示音效果，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
原型圖：
項目需求：
服務(wù)器接受到報警后將消息推送到前臺，（通過前端實時消息提示的效果-websocket長輪詢），前臺接受到消息后需要發(fā)出警報提示音，提醒用戶。
原理：
很簡單，使用html5里面的<audio>標(biāo)簽即可實現(xiàn)，在鈴聲的官網(wǎng)上選擇一段報警的音頻，放在代碼里面即可。
代碼片段：
<%@ 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="點擊播放" 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實現(xiàn)報警器提示音效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
js操作輸入框提示信息且響應(yīng)鼠標(biāo)事件
注冊網(wǎng)站的輸入框就有默認(rèn)提示值，當(dāng)獲取鼠標(biāo)焦點的時候，默認(rèn)值被刪除，當(dāng)用戶沒輸入東西焦點離開的時候，又恢復(fù)默認(rèn)提示值2014-03-03
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)煙花效果，實現(xiàn)鼠標(biāo)點擊出現(xiàn)模擬煙花爆炸的特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JS this關(guān)鍵字在ajax中使用出現(xiàn)問題解決方案
這篇文章主要介紹了JS this關(guān)鍵字在ajax中使用出現(xiàn)問題解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
js中的window.open返回object的錯誤的解決方法
系統(tǒng)中用javascript中的window.open后，頁面返回了一個[object]。因為系統(tǒng)的原因，必需使用href="javascript:window.open()"這樣的格式。所以只能通過以下辦法解決。2009-08-08
這篇文章主要為大家介紹了關(guān)于現(xiàn)代配置指南中YAML對比JSON的優(yōu)勢分析說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2022-02-02
這篇文章主要帶大家探討一下JS裝飾器以及裝飾器在TS中的使用方式，文中有詳細(xì)的代碼示例，對裝飾器不太了解的同學(xué)可以參考閱讀本文學(xué)習(xí)了一下2023-07-07
js禁止document element對象選中文本實現(xiàn)代碼
禁止document element對象選中文本在某在情況下還是很有必要的接下來本文將使用js實現(xiàn)，感興趣的各位可以參考下哈2013-03-03
這篇文章主要給大家介紹了關(guān)于Javascript如何實現(xiàn)對象扁平化的扁平化處理簡而言之就是對對象中的對象提取出來,放在一個對象里面,形象的說就是把兒子的后代當(dāng)成自己的兒子,下面相關(guān)資料,需要的朋友可以參考下2022-11-11
現(xiàn)在很多網(wǎng)站都加了防注入系統(tǒng)代碼，你輸入注入語句將無法注入~~感覺這樣的防注入系統(tǒng)不錯，但防注入系統(tǒng)沒有注意到 Cookies 的問題！所以就有了Cookies注入~~2009-04-04![[JS源碼]超長文章自動分頁（客戶端版）](http://img.jbzj.com/images/xgimg/bcimg9.png)
[JS源碼]超長文章自動分頁（客戶端版）...2007-01-01