Javascript 如何将音乐播放器同步到NodeJS中的多个客户端

我已经编写了一个脚本，基本上可以将一首歌同步到多个客户端。问题是，客户端1总是比客户端2更深入一点

当客户端1正在播放歌曲，客户端2按下按钮时，客户端1将当前时间发送给客户端2，以便客户端2可以拾取时间并播放mp3

我已经试着预加载mp3，这样客户端2就不会在歌曲开始时浪费加载文件的时间。但它仍然晚了+-0.5秒

//客户

$(document).ready(function() {
    var currentId = "";

    document.getElementById("audio").load();

    $.ajax({
        url: '/retrieveId',
        type: 'post',
        success: function(data) {
        currentId = data;
        console.log(currentId);
        }
    });


    $('#host').click(function () {
        $('#audio')[0].play();
        var interval2 = setInterval(function() {
            var currTime = document.getElementById('audio').currentTime;
            $.ajax({
            url: '/startedPlaying',
            type: 'post',
            data: { time: currTime, minute: '10' },
            success: function(data) {
            }
            });
        },10);
    });

    $('#client').click(function() {
    document.getElementById("audio").play();
        $.ajax({
            url: '/retrieveTime',
            type: 'post',
            success: function(data) {
                document.getElementById("audio").currentTime = data;
            }
        });
    })
});

//服务器

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function(req, res) {
res.sendFile(path.join(__dirname + "/index.html"));
}).listen(12340);


app.post("/startedPlaying", function(req, res) {
currTime = req.body.time;
res.end();
});

app.post("/retrieveTime", function(req, res) {
res.send(currTime);
res.end();
});

app.post("/retrieveId", function(req, res) {
id++;
res.send(id.toString());
res.end();
});

所以基本上，我需要帮助我如何让它们同时运行

---

提前感谢。

您需要做的第一件事是在两个客户端之间建立一个将被同步的通信通道。考虑到您的延迟要求，我猜这些客户机在物理上彼此接近，并且可能位于同一网络上。在这种情况下，您将受益于使用它们之间的数据通道创建对等WebRTC连接。通常，客户机可以通过共享的网络协商连接，而无需将数据发送到服务器并返回，这减少了此数据通道的延迟

接下来，像平常一样缓冲介质。您可以使用来确定缓冲了哪些时间范围。您通常可以依赖于来确定玩家何时有足够的缓冲来玩游戏，而无需再次拒绝

然后，决定哪一端是“主”，所有同步数据将从哪里来。从两侧开始播放

在播放过程中，主机应定期向其他客户机发送其内容。收到后，这些客户应检查自己的

currentTime

，查看距离有多远。从那以后，他们应该计算一下如何赶上。例如，如果主客户端位于

100.100

，而从客户端位于

100.000

，则它需要100毫秒。如果您将设置为

1.01

，您将在10秒内完成该时间。或者，

1.02

，您将在5秒钟内补足

您需要想出一些公式来确定去同步的严重性，并简化修复过程。您还需要对播放速度进行一些合理的限制。（例如，您可能不想以超过10%的速度/速度进行同步。）此外，如果两者之间的距离足够大，您可能会选择暂停一个，在另一个上设置

currentTime

（这通常会导致一些中断），然后重新开始

您可以做的一个改进是还可以确定主/从服务器之间的延迟。如果主机说“现在是12.345s”，而您在100毫秒后收到该消息，则该时间戳实际上是12.445。您可以在持续测量延迟的情况下实现某种“ping”。更好的是，在每一条定时信息上都加上这个

---

这将使您在时间上非常接近，对于大多数用例来说都是足够的。

您实际上不能在完全相同的时间玩游戏。即使您可以同时启动它们，它们也有不同的时钟，会随时间漂移，需要校正。你的具体要求是什么？如果你能处理+/-100ms，那么你可以在客户端之间建立WebRTC连接来发送定时数据，然后使用播放速度使它们恢复同步。我唯一的要求是它们同时播放。这是为了确保歌曲将在2台或更多设备上播放。我会尽量利用时间，希望这能奏效。谢谢你！编辑：使用TCP连接比使用ajax请求更好吗？是的，但是“同一时间”对你来说是什么？因为如果你在寻找同步的精确样本，我告诉你这是不可能的。如果你能处理几毫秒的时间，那么你就可以更接近了。好吧，因为它在不同的客户端上播放歌曲，所以它应该是同步的。否则，如果客户端1比客户端2早+-0.5秒，则没有任何意义。我会试试WebRTC。我在问你，它们离同步有多近？因为“完美”在这个场景中并不存在。哇，谢谢，这肯定有帮助。我将尽快研究WebRTC，如果有任何进一步的进展，我会发布。我使用了WebRTC，它工作正常。唯一的问题是它仍然不同，差异非常小，但是你听到轻微的回声。除此之外，它还能工作！你实现这个算法是为了让它同步漂移？我没有尝试过，因为我现在没有很多空闲时间。目前，我只是在设置音乐播放器时在客户端添加0.2秒。这使它非常接近。我会尽快尝试一个实际的算法。非常感谢。