js 前端有消息了聲音提示給用戶

本文轉載自查看原文 2018-11-09 17:17 2699 前端其他/ 工作經驗

前言：工作中有需求，在數據變更有變更時采用聲音提示給用戶，這里記錄一下。轉載請注明出處：https://www.cnblogs.com/yuxiaole/p/9936180.html

代碼如下（采用 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

免責聲明！

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

猜您在找 js 調用聲音提示 js頁面新消息提示 JS 實現兼容IE瀏覽器報警提示聲音基於jquery的消息提示框toastr.js IOS 推送消息聲音自定義前端解決用戶登錄時，禁止chrome提示用戶保存密碼 jQuery+HTML5聲音提示最新2.7.0版本Notiflix.js——前端消息提示框、通知框、對話框的使用，最新版不需要提前聲明，可以直接使用，且可以自己設置屬性。 JS前端獲取用戶的ip地址的方法頁面消息提示，上下滾動

js 前端有消息了 聲音提示給用戶

免責聲明！

js 前端有消息了聲音提示給用戶