Laravel-admin 消息提醒、播放音頻、點擊跳轉


 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瀏覽器->此網站的設置
    

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

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM