SoundNotify 組件
簡介
消息通知組件。
支持文字轉語音、音頻播報、桌面通知。
下載
效果
在線體驗地址：
示例
<!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>