想要那種有提示聲音的網站嗎？我教你怎麼作！

您有新的外賣訂單請及時查收！

熟悉不能再熟悉的聲音了，今天小編就作了這樣一個網站的提示新訂單的功能，接下來就教你怎麼玩轉這個小功能！

首先咱們前端的代碼是這樣寫的：

var playSound = function () { var borswer = window.navigator.userAgent.toLowerCase(); if ( borswer.indexOf( "ie" ) >= 0 )
 { //IE內核瀏覽器
 var strEmbed = '<embed name="embedPlay" src="/public/Mp3/newOrder.mp3" autostart="true" hidden="true" loop="false"/>'; if ( $( "body" ).find( "embed" ).length <= 0 ) $( "body" ).append( strEmbed ); var embed = document.embedPlay; //瀏覽器不支持 audion，則使用 embed 播放 embed.volume = 100;
 } else { //非IE內核瀏覽器
 var strAudio = "<audio id='audioPlay' src='/public/Mp3/newOrder.mp3' hidden='true'>"; if($("#audioPlay").length<=0){
 $( "body" ).append( strAudio );
 } var audio = document.getElementById( "audioPlay" ); //瀏覽器支持 audio
 audio.play();
 }
}

上面這些是播放媒體聲音的功能，下面介紹怎麼去後端請求數據了

/**新訂單*/function getNewOrder(){
 $.post("{:U('Msg/newOrder')}", {}, function(res) { if (res) {
 playSound();
 $.post("{:U('Msg/msgDetail')}", {id:res.id}, function(res) {});
 }
 });
}/**定時器你們都懂吧*/window.setInterval("getNewOrder()",3000);

以上是作ajax的輪詢操做，固然你作成websockt也是能夠的，本文就做爲一個拋磚引玉的做用吧。

後端的話，能夠去數據庫查詢，也能夠在前端作好redis緩存，或者其餘緩存，而後從緩存裏面獲取數據等等都是能夠的！

是否是很簡單，快去嘗試一下吧！