如何在网页后台控制IP网络扬声器播放音频（避免新开标签）

绝对有解决办法！你现在遇到的问题是因为<a>标签的默认行为——点击它会直接导航到指定的URL，所以才会弹出新标签页。我们只需要用JavaScript拦截点击事件，在后台发送请求而不触发页面跳转就行，下面给你几个可行的方案：

方案1：使用Fetch API（推荐，现代浏览器友好） #

这个方案用语义化的<button>标签替代<a>，通过data-*属性存储请求地址，然后用现代的Fetch API发送后台请求：

修改后的HTML #

<tr>
  <td>Fire evacuation</td>
  <td><div class="tag-emergency"><i class="fas fa-fire"></i> Emergency</div></td>
  <td>
    <button class="w3-bar-item w3-button w3-padding play" data-url="http://x.x.x.x/axis-cgi/playclip.cgi?clip=3">
      <i class="fas fa-play fa-fw"></i>
    </button>
  </td>
  <td>
    <button class="w3-bar-item w3-button w3-padding stop" data-url="http://x.x.x.x/axis-cgi/mediaclip.cgi?action=stop">
      <i class="fas fa-stop fa-fw"></i>
    </button>
  </td>
</tr>

对应的JavaScript代码 #

// 获取所有播放/停止按钮
const playButtons = document.querySelectorAll('.play');
const stopButtons = document.querySelectorAll('.stop');

// 处理播放按钮点击
playButtons.forEach(button => {
  button.addEventListener('click', async () => {
    const targetUrl = button.dataset.url;
    try {
      // 后台发送GET请求
      await fetch(targetUrl, { method: 'GET' });
      console.log('播放指令已发送至扬声器');
    } catch (error) {
      console.error('播放请求失败:', error);
    }
  });
});

// 处理停止按钮点击
stopButtons.forEach(button => {
  button.addEventListener('click', async () => {
    const targetUrl = button.dataset.url;
    try {
      await fetch(targetUrl, { method: 'GET' });
      console.log('停止指令已发送至扬声器');
    } catch (error) {
      console.error('停止请求失败:', error);
    }
  });
});

方案2：保留<a>标签，阻止默认跳转 #

如果你不想修改HTML标签结构，可以保留原来的<a>，但通过JavaScript阻止它的默认跳转行为，同时发送后台请求：

无需修改HTML，直接添加JavaScript #

// 获取所有播放/停止链接
const controlLinks = document.querySelectorAll('.play, .stop');

controlLinks.forEach(link => {
  link.addEventListener('click', async (e) => {
    // 阻止默认的页面跳转行为
    e.preventDefault();
    const targetUrl = link.href;
    try {
      await fetch(targetUrl, { method: 'GET' });
      console.log('指令已发送');
    } catch (error) {
      console.error('请求失败:', error);
    }
  });
});

方案3：兼容旧浏览器（使用XMLHttpRequest） #

如果你的系统需要支持IE这类旧浏览器，可以用XMLHttpRequest替代Fetch API：

const controlLinks = document.querySelectorAll('.play, .stop');

controlLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetUrl = link.href;
    const xhr = new XMLHttpRequest();
    xhr.open('GET', targetUrl, true);
    
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log('指令发送成功');
      } else {
        console.error('请求响应异常');
      }
    };
    
    xhr.onerror = function() {
      console.error('请求发送失败');
    };
    
    xhr.send();
  });
});

注意事项：跨域问题 #

如果你的网页所在域名和扬声器的IP地址不在同一个域，可能会遇到CORS（跨域资源共享）错误。解决办法：

• 检查扬声器的API是否支持跨域请求（查看响应头是否包含Access-Control-Allow-Origin）
• 如果无法修改扬声器配置，可以在你的后端搭建一个代理服务，让网页请求后端接口，再由后端转发请求到扬声器的API

内容的提问来源于stack exchange，提问作者Nico Staels