Blog Javascript

Como criar uma aplicação de streaming de áudio com Node.js

O artigo mostra como criar uma aplicação de streaming de áudio em tempo real com Node.js, Socket.IO e a AudioContext API, incluindo como conectar a um servidor Socket.IO, reproduzir áudio e enviar sinais de reprodução.

node

13 abr 2023

Como criar uma aplicação de streaming de áudio com Node.js

Streaming de áudio é uma funcionalidade importante em muitas aplicações, desde plataformas de música até transmissões ao vivo.

Neste artigo, vamos mostrar como criar uma aplicação de streaming de áudio com Node.js utilizando bibliotecas como Socket.IO e AudioContext API.

Configurando o ambiente

Antes de começar, é importante configurar o ambiente de desenvolvimento.

Certifique-se de ter Node.js instalado em sua máquina e criar um novo diretório para a aplicação.

Em seguida, abra um terminal e execute os seguintes comandos:

npm init -y
npm install express socket.io cors

O comando npm init -y cria um novo arquivo package.json, que é usado para gerenciar as dependências do projeto.

Em seguida, o comando npm install instala as dependências necessárias para a aplicação.

Criando o servidor

Agora que o ambiente está configurado, podemos criar o servidor.

Abra um novo arquivo chamado server.js e adicione o seguinte código:

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server, {
  cors: {
    origin: '*',
  },
});

const PORT = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');
});

server.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

Este código cria um servidor HTTP com o Express e o Socket.IO.

O servidor é configurado para aceitar conexões de qualquer origem (cors: { origin: '*' }) e para servir arquivos estáticos a partir do diretório public.

A rota / é definida para retornar o arquivo index.html, que será criado em seguida.

Quando um novo cliente se conecta ao servidor, o evento connection é acionado.

Criando a interface do usuário

Agora é hora de criar a interface do usuário.

Crie um novo diretório chamado public e adicione um novo arquivo chamado index.html com o seguinte conteúdo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio Streaming</title>
  <script src="/socket.io/socket.io.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <button id="play">Play</button>
  <button id="stop">Stop</button>
</body>
</html>

Este arquivo define uma página HTML simples com dois botões: Play e Stop.

O arquivo socket.io.js é incluído para permitir a comunicação com o servidor Socket.IO. O arquivo script.js será criado em seguida.

Criando o cliente

Agora é hora de criar o código do cliente.

Crie um novo arquivo chamado script.js no diretório public e adicione o seguinte conteúdo:

const socket = io();

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const source = audioCtx.createBufferSource();

// Conectando a fonte de áudio à saída do áudio
source.connect(audioCtx.destination);

// Enviando o sinal para o servidor
const playButton = document.getElementById('play');
const stopButton = document.getElementById('stop');

playButton.addEventListener('click', () => {
  socket.emit('play', { data: 'start' });
});

stopButton.addEventListener('click', () => {
  socket.emit('play', { data: 'stop' });
});

socket.on('play', (data) => {
  if (data.data === 'start') {
    // Iniciando a reprodução do áudio
    source.start(0);
  } else if (data.data === 'stop') {
    // Parando a reprodução do áudio
    source.stop();
  }
});

Este código cria um novo socket.io cliente e uma instância do AudioContext API do navegador.

Em seguida, ele cria uma fonte de áudio usando o método createBufferSource() e conecta a fonte de áudio à saída do áudio.

Os eventos click são adicionados aos botões Play e Stop para enviar um sinal para o servidor Socket.IO.

Quando o servidor recebe um sinal play, ele inicia a reprodução do áudio e, quando recebe um sinal stop, ele para a reprodução do áudio.

Conclusão

Neste artigo, mostramos como criar uma aplicação de streaming de áudio com Node.js e as bibliotecas Socket.IO e AudioContext API. A aplicação é capaz de reproduzir e parar um som em tempo real.

Você pode personalizar essa aplicação adicionando outras funcionalidades, como escolher um arquivo de áudio para reproduzir ou permitir que vários clientes se conectem e controlem a reprodução de áudio.