前端新增播放音效

2026-03-11 12:17:15 +08:00
parent 7c7e83eda8
commit 3cf386fbef
2 changed files with 103 additions and 3 deletions
--- a/web_page_2/index.html
+++ b/web_page_2/index.html
@@ -169,6 +169,26 @@
      color: #60a5fa;
      border: 1px solid rgba(59, 130, 246, 0.3);
    }
+    .enable-sound-btn {
+      padding: 4px 12px;
+      background: #3b82f6;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: background 0.2s;
+      flex-shrink: 0;
+      margin-left: 8px;
+    }
+    .enable-sound-btn:hover {
+      background: #2563eb;
+    }
+    .enable-sound-btn:disabled {
+      background: #1f2937;
+      color: #6b7280;
+      cursor: not-allowed;
+    }
  </style>
 </head>
 <body>
@@ -176,7 +196,10 @@
    <main>
      <aside class="left-panel">
        <div class="sidebar">
-          <div class="sidebar-header">异常消息</div>
+          <div class="sidebar-header" style="display: flex; align-items: center; justify-content: space-between;">
+            异常消息
+            <button id="enableSoundBtn" class="enable-sound-btn">🔔 启用提示音</button>
+          </div>
          <div id="messageList" class="message-list"></div>
        </div>
        <div class="log-panel">
@@ -221,6 +244,7 @@

    const WS_PORT = config.port;
    const WS_HOST = '29.1.70.11';
+<!--    const WS_HOST = '127.0.0.1';-->

    const liveImage = document.getElementById('liveImage');
    const statusBar = document.getElementById('status');
@@ -231,11 +255,41 @@
    let ws = null;
    let wsConnected = false;
    let currentDetectedActions = [];
+    let audioEnabled = false;
+    let alertAudio = null;

    function setMode(newMode) {
      // 模式切换功能已禁用
    }

+    function enableSound() {
+      alertAudio = new Audio('/sfx_alert.mp3');
+      alertAudio.volume = 0.5;
+
+      alertAudio.play().then(() => {
+        audioEnabled = true;
+        const btn = document.getElementById('enableSoundBtn');
+        btn.textContent = '🔔 提示音已启用';
+        btn.disabled = true;
+        addLog('提示音已启用', 'success');
+
+        alertAudio.currentTime = 0;
+        alertAudio.pause();
+      }).catch(err => {
+        console.error('音频播放失败:', err);
+        addLog('提示音启用失败，请检查音频文件', 'error');
+      });
+    }
+
+    function playAlertSound() {
+      if (audioEnabled && alertAudio) {
+        alertAudio.currentTime = 0;
+        alertAudio.play().catch(err => {
+          console.error('音频播放失败:', err);
+        });
+      }
+    }
+
    function renderMessages() {
      messageListEl.innerHTML = '';
      for (const msg of alerts.slice().reverse()) {
@@ -364,7 +418,7 @@

 <!--                if (!existingAlert) {-->
                  alerts.push(alertMsg);
-
+                  playAlertSound();
                  renderMessages();
 <!--                }-->
            }
@@ -376,6 +430,8 @@
    }

    // 初始化
+    document.getElementById('enableSoundBtn').addEventListener('click', enableSound);
+
    addLog('AI督察系统启动', 'info');
    addLog('界面初始化完成', 'success');
    addLog(`接口参数: api=${apiParam}`, 'info');