zoukankan      html  css  js  c++  java
  • js 前端有消息了 声音提示给用户

    前言:工作中有需求,在数据变更有变更时采用声音提示给用户,这里记录一下。转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9936180.html

    网站地址:我的个人vue+element ui demo网站 

    github地址:yuleGH github

     代码如下(采用 html5 的 audio):

    <html>
    
    <head>
        <title>测试</title>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">
    </head>
    <body>
    <div id="app">
        <p style="color: red;">播放声音提示,不自动播放,点击按钮才播放</p>
    
        <audio ref="msgTipAudio" controls="controls">
            <source src="tip.mp3" type="audio/mpeg"/>
            Your browser does not support the audio element.
        </audio>
    
        <el-button type="primary" @click="playAudio">播放</el-button>
    </div>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript" src="../lib/elementui/index.js"></script>
    
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
            },
            methods: {
                playAudio(){
                    this.$refs.msgTipAudio.play().catch(this.catchException);
                },
                catchException: function(exceptionMsg){
                    var _self = this;
                    console.error(exceptionMsg);
                    _self.$message({
                        type: 'error',
                        message: '该浏览器不支持播放声音!解决方案:1、点击该弹出框。或者 1、打开chrome;' +
                        '2、输入 chrome://flags/#autoplay-policy;3、点击default,选择 Setting No user gesture is required;' +
                        '4、重启chrome;',
                        duration: 0
                    });
                }
            }
        });
    </script>
    
    </body>
    
    </html>

    转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9936180.html

  • 相关阅读:
    MySQL Sandbox安装使用
    主从复制延时判断
    Carthage
    QCon 2015 阅读笔记
    QCon 2015 阅读笔记
    Scrum&Kanban在移动开发团队的实践 (一)
    移动开发-第三方聊天服务
    开通博客
    spark的若干问题
    hadoop2.2.0安装需要注意的事情
  • 原文地址:https://www.cnblogs.com/yuxiaole/p/9936180.html
Copyright © 2011-2022 走看看