Блог

Главная - Вопросы по программированию - Есть ли способ для пользователя нажать на кнопку, которая воспроизводит аудио в моем веб-приложении, и заставить другого пользователя тоже услышать этот звук?

Есть ли способ для пользователя нажать на кнопку, которая воспроизводит аудио в моем веб-приложении, и заставить другого пользователя тоже услышать этот звук?

#javascript #vue.js

#javascript #vue.js

Вопрос:

Я использую Vue для создания веб-приложения. Прямо сейчас у меня есть этот код, в котором есть кнопка, при нажатии на которую воспроизводится звук, и это работает.

 <template>
<div id="app" class="container-fluid">
<audio id="audio1">
<source src="../assets/mySong.wav" type="audio/wav">
</audio>
<button @click="playSound()" >Press for Sound</button>
</template>

<script>
playSound() {
var myMusic = document.getElementById("audio1");
myMusic.play();
</script>

Но это работает только для текущего пользователя, посещающего эту страницу. Если у меня есть другой пользователь, который также просматривает эту веб-страницу, он не может ее услышать. Что мне нужно сделать, чтобы, если у меня есть 2 пользователя, которые просматривают одну и ту же страницу в своем браузере, и один из них нажимает кнопку, другой человек может это услышать?

Комментарии:

1. Это код на стороне клиента.. Таким образом, каждому клиенту предоставляется его собственная копия этого кода. Действие одного клиента не окажет никакого влияния на другого клиента без какой-либо серверной стороны, чтобы это произошло, или даже оркестровки, чтобы что-то произошло и для кого-то еще

2. @austinwernli О, хорошо, спасибо. Итак, что я могу сделать, так это то, что на моем серверном сервере мне нужно было бы иметь клавишу, чтобы отслеживать, была нажата кнопка или нет?

Ответ №1:

Вам нужно использовать сокеты в javascript для связи в реальном времени с серверной частью, и серверная часть отправит это сообщение другому клиенту для воспроизведения звука тоже. например:

 var http = require('http');
var fs = require('fs');

// Loading the index file . html displayed to the client
var server = http.createServer(function(req, res) {
    fs.readFile('./index.html', 'utf-8', function(error, content) {
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(content);
    });
});

// Loading socket.io
var io = require('socket.io').listen(server);

// When a client connects, we note it in the console
io.sockets.on('connection', function (socket) {
    console.log('A client is connected!');
    socket.on('playAudio', function (someAudio) {
        socket.broadcast.emit('playAudio');
    }); 
});


server.listen(8080);

во внешнем интерфейсе:

 <template>
    <div id="app" class="container-fluid">
    <audio id="audio1">
    <source src="../assets/mySong.wav" type="audio/wav">
    </audio>
    <button @click="playSound()" >Press for Sound</button>
</template>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    isPlaying: false
  },
  created: {
    var socket = io.connect('http://localhost:8080');
    socket.on('message', (message) => {
         alert('The server has a message for you: '   message);
    })

    socket.on('playAudio', () => {
        if(!this.isPlaying){
            this.playAudio();
        }
    })

  },
  methods: {
      playAudio() {
         socket.emit('playAudio');
         var myMusic = document.getElementById("audio1");
         this.isPlaying = true;
         myMusic.play();
      }
  }
})


</script>

подробнее в:
https://openclassrooms.com/en/courses/2504541-ultra-fast-applications-using-node-js/2505653-socket-io-let-s-go-to-real-time
https://itnext.io/building-a-node-js-websocket-chat-app-with-socket-io-and-react-473a0686d1e1