JS語音通知插件

SoundNotify 組件

簡介

消息通知組件。

支持文字轉語音、音頻播報、桌面通知。

下載

GitHub
Gitee

效果

在線體驗地址：

GitHub

示例

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消息通知</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
</head>
<body>

<div style="height:100vh;display: flex;align-items: center;justify-content: center;">
    <button class="layui-btn layui-btn-primary" id="sound">文字轉語音</button>
    <button class="layui-btn layui-btn-warm" id="audio">音頻播報</button>
    <button class="layui-btn layui-btn-normal" id="notify">桌面通知</button>
</div>

<!-- 引入 layui.js -->
<script src="./layui/layui.js"></script>
<script>
    layui.config({
        base: './lay-module/', // 設定擴展的 layui 模塊的所在目錄，一般用于外部模塊擴展
    }).use(['soundNotify', 'jquery'], function () {
        var soundNotify = layui.soundNotify, $ = layui.jquery;
        var actionMap = {
            sound() {
                soundNotify.sound('人間煙火');
            },
            audio() {
                soundNotify.audio('http://music.163.com/song/media/outer/url?id=1929363849.mp3');
            },
            notify() {
                //參數對應 https://developer.mozilla.org/zh-CN/docs/Web/API/notification/Notification
                soundNotify.notify('人間煙火', {
                    body: '人間一場煙火 你曾盛開過\n' +
                        '刻幾人在心窩 從此孤獨活\n' +
                        '江南花已凋落 怎堪再斟酌\n' +
                        '可憐良辰無多 竟似無人說\n' +
                        '你撐紙傘回頭望 千年烏衣巷\n' +
                        '問君青絲有幾丈 能把風月量\n' +
                        '誰言杯酒醉他鄉 紅塵皆可忘\n' +
                        '憑欄數盡孤帆 淚兩行',
                    sound: 'http://music.163.com/song/media/outer/url?id=1929363849.mp3'
                })
            }
        };

        Object.keys(actionMap).forEach((item) => $(`#${item}`).click(actionMap[item]));
    });
</script>
</body>
</html>

posted @ 2023-01-14 08:45 白開水閱讀(452) 評論(0) 收藏舉報

Fairy Tail

JS語音通知插件

SoundNotify 組件

簡介

下載

效果

示例

公告