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瀏覽器->此網站的設置
二、自動播放 選擇 允許全部自動播放,刷新網頁完成設置
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!