Question

我是socket.io技术的新手。我正在尝试呼叫并同步自动播放其他人发出的音频列表。单发触发时非常理想。当多次发射时，它将异步播放。但是我想同步，它会搞砸。不知道我应该把回调放在哪里

服务器端

  socket.on('sound-broadcast', function (message) {

        io.emit('sound-emit', message);

  });

客户端

     socket.on('connect', function () {
        window.autoPlay = true;
               socket.on('sound-emit', function (data) {

                    var counter = 1; 

                    data.text.forEach(function(element) {
                        setTimeout(function(){
                            var audio = main_url+element+'.wav';
                            var sound = new Howl({
                                src: [audio]
                            });
                                sound.play();
                                console.log("Counter " +counter);

                            }, counter*2000);
                        counter ++;

                    });

               }); 

    socket.on('disconnect', function () {
        console.log('disconnected');
    });

});

样本数据 {类型：“语音”，文字：['token_number'，0，36，'counter_number'，75]}

采样数据文本键值是音频文件的名称。

Answer 1

我不确定您是否正确理解了您的信息，但是如果您希望每次单击仅播放一次列表，则可以通过两种方式实现此行为：
首先，创建标志，显示当前用户的播放状态。

 // On top of your file
 let playing = false;
 socket.on('connect', function () {
    window.autoPlay = true;

    socket.on('sound-emit', async (data) => {
       // check if player already playing the music
       if (playing) {
         return;
       }

       // Player not playing, so change status for further invocations prevent
       playing = true;

       let counter = 1;

       for (let elem of data.text) {
         await new Promise(resolve => {
           setTimeout(function () {
              const audio = main_url + element + '.wav';
              const sound = new Howl({
                src: [audio],
                onend: function () {
                  console.log('Finished!');
                  counter += 1;
                  resolve();
                },
            });
            sound.play();
          }, counter * 2000);
      });
    }
  })
});

或带有队列，您可以在其中保存每次点击的播放动作，然后检查此队列。

如何解决Socket.io客户端等待发射消息直到完全运行发射？

1 个答案: