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.timeOut=120000; // 保存2分钟
                toastr.warning(res.msg); // 提示文字
                toastr.options.onclick = function(){
                    location=‘order‘;  // 点击跳转页面
                };

                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 浏览器如果无法播放提示音?

  1、进入  chrome://flags/#autoplay-policy

  

  2、找到 Autoplay policy

   

  

  3、修改Default

原文地址:https://www.cnblogs.com/Wenxiaopeng/p/11163079.html

时间: 2024-10-10 00:29:59

Laravel-admin jquery-toastr 消息提醒、播放音频的相关文章

jQuery - toastr消息提示插件(取代alter())

toastr插件详细参考资料 项目地址:https://github.com/CodeSeven/toastr 使用方法 (1)添加引用 <!-- 消息提示 --> <link href="/assets/JS/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" /> <!--消息提示--> <script t

RTX发送消息提醒实现以及注意事项

一.RTX简介 RTX是腾讯公司推出的企业级即时通信平台.该平台定位于降低企业通信费用,增强企业内部沟通能力,改善企业与客户之间的沟通渠道,创造新兴的企业沟通文化,提高企业生产力.RTX平台的主要功能,包括企业内部实时信息交互.视频语音网络会议.企业短信中心.标准目录服务支持等等.RTX平台具有很高的实用性.易用性和可管理性.除了底层采用128位对称加密技术之外,在实际应用中,RTX可以通过员工实名制.记录对外交互信息等措施,确保企业应用的通信安全. 同时,腾讯公司为所有的RTX用户提供企业级的

VC++中MCI播放音频文件 【转】

MCI播放mp3音频文件例程 源文件中需要包含头文件 Mmsystem.h,在Project->Settings->Link->Object/libray module中加入库 Winmm.lib.或添加代码#pragma   comment(lib, "winmm.lib") MCI_OPEN_PARMS op; void CMCIDlg::OnPlay() {  // TODO: Add your control notification handler code

css实现移动端消息提醒按钮

1.利用css实现移动端消息提醒按钮,页面效果如下: 2.代码实现思路和关键点分析: 代码的结构如下图所示,一共有4个提醒模块,每个模块都用li标签包裹起来,li标签里设置两个div,左边的div是文案,右边的div用于包裹按钮. css样式一看就懂,就不啰嗦了.本文的重点是按钮效果的实现. 2.1 如上图,我们用一个class为“.setting_btn”的div 绘制椭圆,设置背景色.1个像素的补白.以此让中间白色的圆与外框看起来有1px的间距. 用class为“.setting_circl

ios为了用户隐私安全,禁止自动播放音频文件的解决办法(微信端)

ios为了用户隐私安全,禁止自动播放音频文件 //通过参数给音频设置id和路径 utils = { playAudio: function (id, src) { var audio = $('#' + id); if (audio.attr('src') == undefined) { audio.attr('src', src); } //audio[0].play(); function audioAutoPlay() { audio[0].play(); document.addEven

[Asp.net 开发系列之SignalR篇]专题六:使用SignalR实现消息提醒

一.引言 前面一篇文章我介绍了如何使用SignalR实现图片的传输,然后对于即时通讯应用来说,消息提醒是必不可少的.现在很多网站的都有新消息的提醒功能.自然对于SignalR系列也少不了这个功能的实现了.在这篇文章中将介绍如何使用SignalR+iNotify库来实现新消息的声音和弹框提醒. 二.消息提醒的实现思路 消息提醒也就是当客户有新消息来时,在客户端的右下角进行弹框提醒.要实现这个功能的思路是: SignalR服务端推送消息到客户端的实现方式为调用客户端的receiveMessage方法

【转】Android播放音频MediaPlayer的几种方式介绍

接下来笔者介绍一下Android中播放音频的几种方式,android.media包下面包含了Android开发中媒体类,当然笔者不会依次去介绍,下面介绍几个音频播放中常用的类: 1.使用MediaPlayer播放音频 MediaPlayer的功能很强大,下面附上一张该类封装音频的生命周期图: MediaPlayer支持AAC.AMR.FLAC.MP3.MIDI.OGG.PCM等格式,MediaPlayer可以通过设置元数据和播放源来音频. 1.1播放Raw文件夹下面音频的元数据 //直接创建,不

Swift实现iOS录音与播放音频功能

作用AVPLayer:可以用来播放在线及本地音视频AVAudioSession:音频会话,主要用来管理音频设置与硬件交互使用时需要导入 #import <AVFoundation/AVFoundation.h> AVAudioSession中配置选项: AVAudioSessionCategory 注意:除了 AVAudioSessionCategoryMultiRoute 外,其他的 Category 都遵循 last in wins 原则,即最后接入的音频设备作为输入或输出的主设备. 1.

使用SignalR实现消息提醒

Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信.另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主在任何应用程序,包括控制台,客户端程序和Windows服务等,另外还支持Mono,这意味着它可以实现跨平台部署在Linux环境下. SignalR内部有两类对象: