diff --git a/admin/views/index.php b/admin/views/index.php index 955f810b..4bfd1973 100644 --- a/admin/views/index.php +++ b/admin/views/index.php @@ -192,6 +192,9 @@ + @@ -208,6 +211,8 @@ var log_data = {}; var heartbeatInterval = null; var pongTimeout = null; + const $audio = $('#notification-sound'); + let isAudioLoaded = false; // 标记音频是否预加载完成 (function ($) { _index_vue_obj = new Vue({ el: '#index-vue-app', @@ -263,7 +268,6 @@ }); // 初始化 WebSocket 连接 initWebSocket(); - $(".coms-layout-header .bars-nav").on("click", function (event) { event.stopPropagation() var $headNav = $(".header-nav"); @@ -309,7 +313,14 @@ color: '#000', alpha: 0.03, }); + + // 1. 监听音频预加载完成事件 + $audio.on('canplaythrough', function () { + isAudioLoaded = true; + console.log('音频预加载完成,等待通知触发播放'); + }); }) + })(jQuery) function initWebSocket() { @@ -383,9 +394,12 @@ switch (data.type) { case 'notice': // 显示通知消息 - showNotification("您收到一条新的系统通知,请及时查看"); + let message = data.data.content ? data.data.content : "您收到一条新的系统通知,请及时查看"; + showNotification(message); _index_vue_obj.countNotice++; _index_vue_obj.notice = [data.data].concat(_index_vue_obj.notice); + // 播放提示音 + playNotificationSound(); break; case 'heartbeat': // 收到pong响应时清除超时定时器 @@ -410,6 +424,26 @@ }); } + // 新增播放提示音函数 + function playNotificationSound() { + // 先判断音频是否加载完成 + 浏览器是否允许播放(需用户曾交互过页面) + if (!isAudioLoaded) { + console.log('音频未加载完成,无法播放'); + return; + } + // 尝试播放,处理浏览器限制(如未交互导致的失败) + $audio[0].currentTime = 0; // 重置播放位置(避免重复通知时只播后半段) + $audio[0].play() + .then(() => { + console.log('通知音频播放成功'); + }) + .catch(err => { + console.error('播放失败(可能需用户先点击页面):', err.message); + // 可选:提示用户点击页面激活音频 + alert('请先点击页面任意位置,启用通知音效'); + }); + } + // 提供全局发送消息的方法 window.sendWebSocketMessage = function (message) { if (window.adminWebsocket && diff --git a/www/admin/static/audio/message-ding.mp3 b/www/admin/static/audio/message-ding.mp3 new file mode 100644 index 00000000..c1af3121 Binary files /dev/null and b/www/admin/static/audio/message-ding.mp3 differ