Okay, here are the files to set up a basic WebSocket connection where user interaction on the client triggers a Tone.js sound and notifies the server, which then broadcasts the event to other clients. This setup includes: 1. A Node.js WebSocket server. 2. An HTML page with a button. 3. Client-side JavaScript using Tone.js to play a sound on button click and communicate with the server. **First, you'll need to install the WebSocket library for the server:** Run this command in your terminal in the `/home/user` directory: `npm install ws` { "name": "websocket-tonejs-demo", "version": "1.0.0", "description": "WebSocket server for Tone.js interaction", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "ws": "^8.17.0" }, "author": "CodeJS", "license": "ISC" } const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); console.log('WebSocket server started on port 8080'); // Simple broadcast function wss.broadcast = function broadcast(data, sender) { wss.clients.forEach(function each(client) { // Send to everyone except the sender, if specified and client is not sender // Or send to everyone if sender is not specified if (client !== sender && client.readyState === WebSocket.OPEN) { try { console.log('Broadcasting message:', data); client.send(data); } catch (e) { console.error('Failed to send message to client:', e); } } else if (!sender && client.readyState === WebSocket.OPEN) { try { console.log('Broadcasting message to all:', data); client.send(data); } catch (e) { console.error('Failed to send message to client:', e); } } }); }; wss.on('connection', function connection(ws) { console.log('Client connected'); ws.on('message', function incoming(message) { console.log('Received: %s', message); try { // Attempt to parse the message as JSON const parsedMessage = JSON.parse(message); // Check if it's a known action, e.g., playing a note if (parsedMessage && parsedMessage.action === 'playNote') { // Broadcast the note information to other clients // We convert it back to string before sending const broadcastMessage = JSON.stringify({ action: 'notePlayed', note: parsedMessage.note }); // Send to all *other* clients wss.broadcast(broadcastMessage, ws); } } catch (e) { console.error('Failed to parse message or invalid message format:', e); // Optionally broadcast raw message if not JSON or specific action // wss.broadcast(message, ws); } }); ws.on('close', function close() { console.log('Client disconnected'); }); ws.on('error', function error(err) { console.error('WebSocket error:', err); }); // Send a welcome message to the newly connected client ws.send(JSON.stringify({ message: 'Welcome to the Tone.js WebSocket server!' })); }); WebSocket Tone.js

WebSocket Tone.js Interaction

Click the button to play a C4 note and notify other connected clients.

Connecting...

Events:

// Ensure Tone.js starts after user interaction async function startAudio() { await Tone.start(); console.log("AudioContext started"); } // WebSocket connection const statusDiv = document.getElementById('status'); const playButton = document.getElementById('playButton'); const eventList = document.getElementById('eventList'); let socket; function connectWebSocket() { // Use ws:// for local development, wss:// for production with SSL socket = new WebSocket('ws://localhost:8080'); socket.onopen = function(event) { statusDiv.textContent = 'Connected to WebSocket server.'; console.log('WebSocket connection opened:', event); playButton.disabled = false; // Enable button only when connected }; socket.onmessage = function(event) { console.log('Message from server:', event.data); try { const message = JSON.parse(event.data); // Log server messages const li = document.createElement('li'); li.textContent = `Received: ${JSON.stringify(message)}`; eventList.prepend(li); // Add new events to the top // If the message indicates a note was played by another client if (message.action === 'notePlayed' && message.note) { // Play the received note slightly differently (e.g., different synth or note) // to distinguish from self-played notes. Here we play the same note. console.log(`Another client played: ${message.note}`); playTone(message.note, false); // Play tone, but don't send message back li.textContent = `Event: Note ${message.note} played by another client.`; } else if (message.message) { li.textContent = `Server: ${message.message}`; } } catch (e) { console.error('Failed to parse message or invalid message format:', e); const li = document.createElement('li'); li.textContent = `Received raw: ${event.data}`; eventList.prepend(li); } }; socket.onclose = function(event) { statusDiv.textContent = 'Disconnected. Attempting to reconnect...'; console.log('WebSocket connection closed:', event); playButton.disabled = true; // Attempt to reconnect after a delay setTimeout(connectWebSocket, 5000); }; socket.onerror = function(error) { statusDiv.textContent = 'WebSocket error. See console.'; console.error('WebSocket error:', error); playButton.disabled = true; }; } // Tone.js setup const synth = new Tone.Synth().toDestination(); // Function to play a tone function playTone(note = "C4", notifyServer = true) { startAudio(); // Ensure audio context is running console.log(`Playing note: ${note}`); synth.triggerAttackRelease(note, "8n"); // Play note for an eighth duration // Notify the server if requested if (notifyServer && socket && socket.readyState === WebSocket.OPEN) { const message = JSON.stringify({ action: 'playNote', note: note }); console.log('Sending message:', message); socket.send(message); // Log self-played action const li = document.createElement('li'); li.textContent = `You played: ${note}`; eventList.prepend(li); } } // Event listener for the button playButton.addEventListener('click', () => { playTone("C4", true); // Play C4 and notify the server }); // Initial setup playButton.disabled = true; // Disable button until connected connectWebSocket(); // Start WebSocket connection attempt body { font-family: sans-serif; padding: 20px; background-color: #f4f4f4; } h1, h2 { color: #333; } button { padding: 10px 15px; font-size: 1em; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px; margin-bottom: 20px; } button:disabled { background-color: #cccccc; cursor: not-allowed; } #status { margin-bottom: 15px; font-style: italic; color: #555; } #messages { margin-top: 20px; background-color: #fff; border: 1px solid #ddd; padding: 15px; border-radius: 4px; max-height: 300px; overflow-y: auto; } #eventList { list-style-type: none; padding: 0; margin: 0; } #eventList li { padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 0.9em; color: #333; } #eventList li:first-child { font-weight: bold; /* Highlight the latest event */ } #eventList li:last-child { border-bottom: none; } **To Run This:** 1. Save the files in the specified structure (`/home/user/package.json`, `/home/user/server.js`, `/home/user/public/index.html`, etc.). 2. Open your terminal in the `/home/user` directory. 3. Run `npm install` to install the `ws` dependency. 4. Run `node server.js` to start the WebSocket server. 5. Open the `public/index.html` file in two different browser tabs or windows. 6. Click the "Play Note" button in one tab. You should hear a 'C4' note, and a message should appear in the "Events" list on both tabs indicating the note was played.