jquery-toastr 消息提醒、播放音頻、點擊跳轉
應用情景,有新的訂單生成,后台進行消息提醒並播放音頻(這里用到輪詢簡單實現):下面附代碼
1.找到laravel-admin 中的 index.blade.php 文件進行編輯
{{-- 音頻通知 --}}
<audio style="display:none; height: 0" id="bg-music" preload="auto" src="http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201511/6571.mp3" loop="loop"></audio>
<script>
function LA() {}
LA.token = "{{ csrf_token() }}";
var getting = {
url:'/admin/sendNotice',
dataType:'json',
success: function (res) {
console.log(res);
if(res.code == 200){
toastr.options.onclick = function(){
location.href='/admin/order'; // 點擊跳轉頁面
};
toastr.options.timeOut=120000; // 保存2分鍾
toastr.warning(res.msg); // 提示文字
var audio = document.getElementById('bg-music'); // 啟用音頻通知
audio.play();
setTimeout(function(){
audio.load(); // 1.5秒后關閉音頻通知
},1500);
}
},
error: function (res) {
console.log(res);
}
};
//關鍵在這里,Ajax定時訪問服務端,不斷獲取數據 ,這里是5秒請求一次。
window.setInterval(function(){$.ajax(getting)},5000);
</script>
2.請求路由控制器
/** * 輪詢判斷有沒有新訂單 * * @return void */ public function sendNotice() { // 處理邏輯 $count = 0; // 獲取的結果
$getCount = session()->get('count'); if ($count > $getCount) { session()->put('count', $count); // 存session return ['code' => 200, 'msg' => '您有新的訂單請及時處理']; } // 不成立的話則存最新的值 session()->put('count', $count); return ['code' => 201]; }
實現效果:

注意:
使用Google 瀏覽器如果無法播放提示音?
JS報錯:Uncaught(in promise)DOMException:play()
1、進入 chrome://flags/#autoplay-policy

2、找到 Autoplay policy

3、修改Default

使用蘋果瀏覽器無法播放音頻?
一、點擊瀏覽器左上角的:Safari瀏覽器->此網站的設置

二、自動播放 選擇 允許全部自動播放,刷新網頁完成設置

如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
