Reprodutor MP3 Controlado via Web com Arduino: Reprodução de Áudio Fácil pelo Navegador

Componentes e Materiais

Componente	Quantidade	Observações
Arduino UNO	1
PHPoC WiFi Shield para Arduino	1	Também pode usar PHPoC Shield para Arduino
Reprodutor MP3 Serial da Catalex	1
Cartão micro SD	1
Alto-falante	1

Sobre o Projeto

Tenho um projeto semelhante usando apenas PHPoC. Um reprodutor MP3 pode ser útil em museus ou exposições para fornecer informações baseadas em voz aos visitantes sob demanda. Este projeto mostra como controlar MP3 via página web usando Arduino Uno.

Reprodutor MP3 Serial

O reprodutor MP3 serial possui duas interfaces:

• Conector para alto-falante
• Interface para microcontrolador (neste projeto, Arduino)

Ao receber um comando do microcontrolador (ex: PLAY, PAUSE, VOLUME UP...), o reprodutor MP3 lê o arquivo .mp3 do cartão SD e executa a ação baseada no comando.

Antes de usar, é necessário copiar os arquivos .mp3 para o cartão SD e inseri-lo no reprodutor MP3.

Ligação

• Encaixe o PHPoC shield sobre o Arduino
• Conecte os pinos GND, VCC, TX e RX do reprodutor MP3 aos pinos GND, 5V, pino 8 e pino 9 do Arduino, respectivamente

Fluxo de Dados

Navegador Web → PHPoC WiFi Shield → Arduino

O aplicativo web no navegador envia comandos e dados baseados em eventos de toque ou clique para o PHPoC shield via WebSocket. Ao receber o comando, o PHPoC shield o repassa para o Arduino. O Arduino envia o comando ao reprodutor MP3 de acordo com o comando recebido.

Conjunto de Comandos

Onde XX é o valor do volume.

Nota: O PHPoC shield possui um programa integrado para passar dados do navegador para o Arduino. Portanto, não precisamos nos preocupar com isso.

O que Precisamos Fazer

• Configurar informações de WiFi para o PHPoC shield (SSID e senha)
• Carregar nova interface web para o PHPoC shield
• Escrever código para Arduino

Configurando Informações de WiFi para PHPoC Shield

Consulte esta instrução.

Carregando Nova Interface Web para PHPoC Shield

• Baixe o código fonte PHPoC remote_mp3.php (na seção de código)
• Carregue-o no PHPoC shield usando o PHPoC Debugger conforme esta instrução

Nota: Esta interface web contém o conjunto de comandos para enviar ao Arduino.

Escrevendo Código Arduino

• Instale a biblioteca para Arduino na Arduino IDE (veja a instrução) e reinicie a IDE
• Na Arduino IDE, vá em Arquivo → Exemplos → Phpoc → WebRemoteSlide
• Modifiquei o exemplo (veja o código fonte na seção de código)

Testando

• Clique no botão serial na Arduino IDE para ver o endereço IP
• Abra o navegador web, digite https:// substitua_endereco_ip /remote_mp3.php
• Clique no botão conectar e teste

Referências de Funções

• Serial.begin()
• Serial.println()
• delay()
• millis()
• for loop
• while loop
• if else
• loop()
• setup()
• String.toInt()
• String.substring()
• String.indexOf()
• String.remove()
• String.equals()

Código

Código Arduino

#include "SPI.h"
#include "Phpoc.h"
#include 

#define ARDUINO_RX 8 // deve conectar ao TX do módulo Serial MP3 Player
#define ARDUINO_TX 9 // conectar ao RX do módulo
AltSoftSerial mySerial(ARDUINO_RX, ARDUINO_TX);

static int8_t Send_buf[8] = {0};

#define CMD_PLAY_NEXT 0x01
#define CMD_PLAY_PREV 0x02
#define CMD_PLAY_W_INDEX 0x03
#define CMD_SET_VOLUME 0x06
#define CMD_SEL_DEV 0x09
#define CMD_PLAY_W_VOL 0x22
#define CMD_PLAY 0x0D
#define CMD_PAUSE 0x0E
#define CMD_SINGLE_CYCLE 0x19
#define DEV_TF 0x02
#define SINGLE_CYCLE_ON 0x00
#define SINGLE_CYCLE_OFF 0x01

// Servidor web Arduino
PhpocServer server(80);
char name;
int value;

void setup() {
  mySerial.begin(9600);
  delay(500); // aguarda inicialização do chip
  sendCommand(CMD_SEL_DEV, DEV_TF); // seleciona cartão TF
  delay(200); // aguarda 200ms
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_slide");
  Serial.print("Endereço do servidor WebSocket: ");
  Serial.println(Phpoc.localIP());
}

void loop() {
  // aguarda novo cliente
  PhpocClient client = server.available();
  if (client) {
    String slideStr = client.readLine();
    if(slideStr) {
      name = slideStr.charAt(0);
      value = slideStr.substring(1).toInt();
      if(name == 'P') {
        Serial.println("Play mp3");
        sendCommand(CMD_PLAY, 0x0000);
      }
      if(name == 'S') {
        Serial.println("Pause mp3");
        sendCommand(CMD_PAUSE, 0x0000);
      }
      if(name == 'N') {
        Serial.println("Play next mp3");
        sendCommand(CMD_PLAY_NEXT, 0x0000);
      }
      if(name == 'B') {
        Serial.println("Play previous mp3");
        sendCommand(CMD_PLAY_PREV, 0x0000);
      }
      if(name == 'V') {
        Serial.print("Change volume to ");
        Serial.println(value);
        sendCommand(CMD_SET_VOLUME, value);
      }
    }
  }
}

void sendCommand(int8_t command, int16_t dat) {
  delay(20);
  Send_buf[0] = 0x7e; // byte inicial
  Send_buf[1] = 0xff; // versão
  Send_buf[2] = 0x06; // número de bytes do comando
  Send_buf[3] = command;
  Send_buf[4] = 0x00; // 0x00 = sem feedback, 0x01 = feedback
  Send_buf[5] = (int8_t)(dat >> 8); // data high
  Send_buf[6] = (int8_t)(dat); // data low
  Send_buf[7] = 0xef; // byte final
  for(uint8_t i=0; i<8; i++) {
    mySerial.write(Send_buf[i]);
  }
}

Interface Web (remote_mp3.php)

<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - IoT MP3 Player</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style>
body { text-align: center; font-size: 15pt; }
h1 { font-weight: bold; font-size: 25pt; }
h2 { font-weight: bold; font-size: 15pt; }
button { font-weight: bold; font-size: 15pt; }
</style>
<script>
// ... código JavaScript para interface de controle via WebSocket ...
</script>
</head>
<body>
<p>
<h1>Controle Remoto Web / IoT MP3 Player</h1>
</p>
<canvas id="remote"></canvas>
<h2>
<p> WebSocket : <span id="ws_state">null</span> </p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
</h2>
</body>
</html>

Esquemático

Diagrama de ligação disponível na seção de esquemáticos.