这两天我给 NAS 挂了一个挺有意思的小站。打开网址，填个昵称，进去就能直接群聊语音。
没有复杂的注册流程，也不用先装什么客户端。进去以后能看到频道、在线成员、谁正在讲话，还能发文字消息、私聊、单独调某个人的音量。

我实际拉了几个浏览器一起进去以后，效果大概就是这样：一个属于自己的网页语音空间。

最开始我以为它只是给语音服务器套了一层网页壳，真正用起来以后发现，东西比想象中完整不少。

比如我可以直接给它挂自己的域名。以后想让别人进来，不需要解释任何专业术语，直接发一个网址就行。

这个项目叫WebSpeak。完整项目名：EchoSixHIYA/WebSpeak-client-for-TeamSpeak。

底层实际上还是需要一套语音服务器来负责真正的连接，不过普通用户基本不用管它是什么。最终接触到的就是这个网页。

这次我干脆把网页端和底层语音服务全部放进威联通 NAS，一次部署完整。

WebSpeak 到底能玩什么

打开网页直接进语音空间

首页非常简单。

输入昵称，选择频道，然后进入。

如果已经给它配好自己的服务器，访问者甚至不需要知道后面服务器的 IP、端口或者其它配置。

进入之后左边是频道和成员，中间就是当前语音空间。

谁在线、谁正在说话，都能直接看到。

这个体验其实已经和传统玩法完全不一样。对其他人来说，他们看到的就是一个普通网站。

不只是语音，还有完整的频道和聊天

进到频道以后，并不是只能开着麦克风干聊。

下面还有文字频道，可以直接发消息。

所以它更接近一个长期挂着的小型语音社区。

比如几个朋友平时都在同一个频道，谁在线直接能看到；需要打字的时候就在下面聊，需要说话直接开麦。不需要另外再切一个聊天工具。

每个人还能单独调

成员列表这里做得比我预想的细。点开一个成员，可以单独调整这个人的音量、私聊、戳一戳
、设置为语音目标、复制昵称等操作。

这些功能对于多人语音还是挺实用的。谁麦克风声音特别大，直接把他单独拉低一点，不用调来调去。

浏览器里的声音也可以直接共享

这个功能是我测试的时候才发现的。WebSpeak 可以调用浏览器的音频共享。点左下角的「伴奏」以后，Chrome 会直接弹出系统的共享窗口，可以选择：浏览器标签页``窗口``整个屏幕。并且可以把对应页面的声音一起送进语音频道。

比较干的时候放点歌，或者一起听听攻略啥的，也不用再折腾虚拟声卡，都非常不错。

网站可以自己改

WebSpeak 后台可以直接修改站点显示名称和欢迎语。比如我这里干脆把它改成了自己的名字：

效果如下。

一套完整的中文后台

WebSpeak 的后台已经做得比较完整，而且目前整套管理界面都有中文。

在概览页可以直接看到服务状态、当前连接目标、在线会话和最近事件。可以看到支持

服务器页面可以修改访问方式、站点名称、欢迎语，开启中继，以及 WebRTC 的 UDP 端口范围。

运维页面则可以查看在线会话、运行日志、审计记录，还能生成临时邀请链接和导出数据库备份。

所以日常使用基本不用再去改配置文件，连接设置、访问控制和运行状态都可以直接在网页后台完成。

如何部署？

以威联通NAS为例，通过Docker Compose的方式进行部署。

WebSpeak 默认使用非 root 用户运行，所以这里需要提前处理数据目录权限。先通过 SSH 创建目录：

mkdir -p /share/Container/webspeak/webspeak
mkdir -p /share/Container/webspeak/teamspeak

执行：

chown -R 1000:1000 /share/Container/webspeak/webspeak
chmod -R 755 /share/Container/webspeak/webspeak
chown -R 9987:9987 /share/Container/webspeak/teamspeak
chmod -R 755 /share/Container/webspeak/teamspeak

然后，打开威联通的Container Station创建新的应用程序。

代码如下：

services:
  teamspeak:
    image: teamspeak
    container_name: teamspeak
    network_mode: host # 默认语音端口为9987
    restart: unless-stopped
    environment:
      TS3SERVER_LICENSE: accept
    volumes:
      - /share/Container/webspeak/teamspeak:/var/ts3server

  webspeak:
    image: ghcr.io/echosixhiya/webspeak:latest
    container_name: webspeak
    network_mode: host # 默认监听3040
    restart: unless-stopped
    volumes:
      - /share/Container/webspeak/webspeak:/data

将上述代码根据自己情况修改后，点击创建即可。

使用与配置

完整使用需要HTTPS，并且要进行端口转发。

部署完成以后，WebSpeak 默认监听 3040，因此浏览器输入NAS_IP:3040即可访问。但可以看到，只有HTTPS下方可使用，因此建议大家进行反代配置证书。另外，9987这个端口也要

管理员界面为NAS_IP:3040/admin，账户密码皆为admin。第一次登录会要求重新设置管理员密码，而且至少需要 12 位。

我们的 WebSpeak 和语音服务器部署在同一台 NAS，9987/UDP 不需要映射到公网，WebSpeak 可以直接通过本机 127.0.0.1:9987 连接。只有别人要从其他客户端连接你时，才需要额外开放 9987/UDP，并且也建议同样做反代。

如果开启允许访客输入其他服务器，访客也可以通过你部署的网页连接其他 TeamSpeak 服务器。此时就不需要把本机 9987/UDP 暴露到公网，因为目标连接由 WebSpeak 主机主动发起。

当然，这是个具备社交属性的项目，你可以选择将9987和3040两个端口全都搞一搞～完全体其实就如官方Demo这样子。

最后

不错的项目，蛮实用吧！有需要的朋友可以部署玩玩。

感谢观看，本文完。