Reproductor MP3 controlado por web con Arduino: Reproducción de audio fácil desde el navegador

Componentes y materiales

Componente	Cantidad	Notas
Arduino UNO	1
PHPoC WiFi Shield para Arduino	1	También se puede usar PHPoC Shield para Arduino
Reproductor MP3 serie de Catalex	1
Tarjeta micro SD	1
Altavoz	1

Sobre el proyecto

Tengo un proyecto similar usando solo PHPoC. Un reproductor MP3 puede ser útil en museos o exposiciones para proporcionar información por voz a los visitantes bajo demanda. Este proyecto muestra cómo controlar un MP3 mediante una página web usando Arduino Uno.

Reproductor MP3 serie

El reproductor MP3 serie tiene dos interfaces:

• Jack para altavoz
• Interfaz para microcontrolador (en este proyecto, Arduino)

Al recibir un comando del microcontrolador (ej. PLAY, PAUSE, VOLUME UP...), el reproductor lee el archivo .mp3 de la tarjeta SD y ejecuta la acción correspondiente.

Antes de usarlo, hay que copiar los archivos .mp3 a la tarjeta SD e insertarla en el reproductor.

Conexiones

• Montar el shield PHPoC sobre el Arduino
• Conectar pines GND, VCC, TX y RX del reproductor MP3 a GND, 5V, pin 8 y pin 9 del Arduino, respectivamente.

Flujo de datos

Navegador web → PHPoC WiFi Shield → Arduino

La aplicación web en el navegador envía comandos y datos basados en eventos táctiles o clics al shield PHPoC vía WebSocket. Al recibir el comando, el shield lo pasa al Arduino. Este envía el comando al reproductor MP3 según lo recibido.

Conjunto de comandos

Donde XX es el valor de volumen.

Nota: El shield PHPoC tiene un programa integrado para pasar datos del navegador al Arduino, por lo que no hay que preocuparse por ello.

Qué necesitamos hacer

• Configurar la información WiFi para el shield PHPoC (SSID y contraseña)
• Subir la nueva interfaz web al shield PHPoC
• Escribir el código de Arduino

Configuración WiFi del shield PHPoC

Consultar esta instrucción.

Subir nueva interfaz web al shield PHPoC

• Descargar el código fuente PHPoC remote_mp3.php (en la sección de código).
• Subirlo al shield PHPoC usando PHPoC Debugger según esta instrucción.

Nota: Esta interfaz web contiene el conjunto de comandos para enviar al Arduino.

Escribir código de Arduino

• Instalar la librería para Arduino en Arduino IDE (ver instrucción) y reiniciar Arduino IDE.
• En Arduino IDE, ir a Archivo → Ejemplos → Phpoc → WebRemoteSlide.
• Modifiqué el ejemplo (ver código fuente en la sección de código).

Pruebas

• Hacer clic en el botón serie en Arduino IDE para ver la dirección IP.
• Abrir navegador web, escribir https://reemplazar_direccion_ip/remote_mp3.php
• Pulsar botón conectar y probar.

Referencias de funciones

• 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 de Arduino

#include "SPI.h"
#include "Phpoc.h"
#include <AltSoftSerial.h>

#define ARDUINO_RX 8 // conectar a TX del módulo MP3 serie
#define ARDUINO_TX 9 // conectar a RX del 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

PhpocServer server(80);
char name;
int value;

void setup() {
  mySerial.begin(9600);
  delay(500);
  sendCommand(CMD_SEL_DEV, DEV_TF);
  delay(200);
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_slide");
  Serial.print("Dirección servidor WebSocket: ");
  Serial.println(Phpoc.localIP());
}

void loop() {
  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("Reproducir mp3");
        sendCommand(CMD_PLAY, 0x0000);
      }
      if(name == 'S') {
        Serial.println("Pausar mp3");
        sendCommand(CMD_PAUSE, 0x0000);
      }
      if(name == 'N') {
        Serial.println("Siguiente mp3");
        sendCommand(CMD_PLAY_NEXT, 0x0000);
      }
      if(name == 'B') {
        Serial.println("Anterior mp3");
        sendCommand(CMD_PLAY_PREV, 0x0000);
      }
      if(name == 'V') {
        Serial.print("Cambiar volumen a ");
        Serial.println(value);
        sendCommand(CMD_SET_VOLUME, value);
      }
    }
  }
}

void sendCommand(int8_t command, int16_t dat) {
  delay(20);
  Send_buf[0] = 0x7e;
  Send_buf[1] = 0xff;
  Send_buf[2] = 0x06;
  Send_buf[3] = command;
  Send_buf[5] = (int8_t)(dat >> 8);
  Send_buf[6] = (int8_t)(dat);
  Send_buf[7] = 0xef;
  for(uint8_t i=0; i<8; i++) {
    mySerial.write(Send_buf[i]);
  }
}

Interfaz 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 la interfaz de control táctil/ratón ...
</script>
</head>
<body>
<h1>Control Remoto Web / Reproductor MP3 IoT</h1>
<canvas id="remote"></canvas>
<h2>
<p>WebSocket: <span id="ws_state">null</span></p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Conectar</button>
</h2>
</body>
</html>

Esquemáticos