Is there a way for a user to click on a button that plays audio in my webapp and have another user hear that sound too?

Question

I am using Vue to create a webapp. Right now I have this code which has a button that when I press it, it plays a sound and it works.

<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>

But it only works for the current user visiting that page. If I have another user also viewing that webpage, they can't hear it. What do I need to do so that if I have 2 users both looking at the same page in their own browser, and one of them presses the button, the other person can hear it?

Answer 1

You need to use sockets in javascript to communicate in realtime with the backend and backend will send that message to the other client to play the audio too. for example:

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);

in the Frontend:

<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>

more info in: 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