DIY Reproductor MP3 y Reloj Despertador Arduino con Pantalla Táctil: Guía Paso a Paso

En este proyecto te muestro cómo hacer un Reproductor MP3 y Reloj Despertador Arduino con pantalla táctil. Ver video o leer tutorial abajo.

Resumen

Pantalla principal: reloj grande, fecha, temperatura, botones Music Player y Alarm Clock.

Music Player: botón Play central, Previous/Next a los lados. Barra progreso arriba, barra volumen abajo con botones +/-. Reloj esquina sup. der., botón Menu izq. para volver.

Alarm Clock: botones H y M para hora/minuto. Al activar: suena canción a volumen alto hasta pulsar "Dismiss".

Cómo Funciona

Arduino Mega + pantalla TFT 3.2" táctil con shield. Música: módulo BY8001-16P MP3. Reloj: módulo DS3231 RTC.

Componentes

• Módulo MP3 BY8001-16P
• Pantalla TFT 3.2" táctil
• Shield TFT para Mega
• Altavoz 0.5W
• RTC DS3231
• Arduino Mega

Esquemas de Circuito

El shield TFT tapa pines libres del Arduino → headers personalizados para insertar entre shield y Arduino. También soldar header extra al pin 5V del shield (ya usa todos los VCC).

Revisa mis tutoriales previos de TFT táctil y DS3231. MP3: explicación rápida aquí.

Módulo MP3 BY8001-16P

Funciona con MicroSD, soporta MP3/WAV. Amplificador 3W integrado, drive directo altavoz 3W.

Control por botones (5 pines entrada) o microcontrolador vía serie.

Pines serie trabajan a 3.3V → RX módulo necesita resistencia 1K a TX Arduino. Pads A, B, C para modos: quitar 3 resistencias para control por microcontrolador. Pines 6-7 para altavoz directo, 4-5 para amplificador externo.

Librería BY8001 (GitHub) facilita uso. Tras inicializar en setup, funciones personalizadas controlan módulo.

Código Fuente

Código en secciones con explicación. Completo al final.

Librerías: UTFT, URTouch (pantalla), SoftwareSerial, BY8001, DS3231. Objetos y variables.

#include <UTFT.h> #include <URTouch.h> #include <SoftwareSerial.h>
#include <BY8001.h> #include <DS3231.h>

// Objetos
UTFT myGLCD(SSD1289, 38, 39, 40, 41); // Ajustar a tu modelo
URTouch myTouch(6, 5, 4, 3, 2);
SoftwareSerial mp3Serial(11, 10); // RX, TX
BY8001 mp3; DS3231 rtc(SDA, SCL);

// Fuentes
extern uint8_t SmallFont[]; extern uint8_t BigFont[]; extern uint8_t SevenSegNumFont[];
// Bitmaps botones (convertidos con ImageConverter565)
extern unsigned int MusicPlayerButton[0x1040]; extern unsigned int AlarmButton[0x1040];
extern unsigned int ButtonPlay[0x1AE9]; extern unsigned int ButtonPause[0x1AE9];
extern unsigned int PreviousButton[0x9C4]; extern unsigned int NextButton[0x9C4];
extern unsigned int VolumeDown[0x170]; extern unsigned int VolumeUp[0x3B8];

int x, y; char currentPage, playStatus;
int iV = 15, trackNum = 1, b = 16;
int aHours = 0, aMinutes = 0;
boolean alarmNotSet = true; String alarmString = "";
float currentTemperature, temperature;
static word totalTime, elapsedTime, playback, minutes, seconds, lastSeconds, minutesR, secondsR;
String currentClock, currentHours, currentMinutes, currentSeconds, currentDate;
String timeString, hoursString, minutesString, secondsString, hoursS, minutesS, secondsS, dateS;

Bitmaps: botones son imágenes convertidas a arrays .c con ImageConverter565 (viene con librería UTFT). Archivos .c deben estar en carpeta del sketch.

Setup: inicializar objetos, drawHomeScreen(), valores iniciales (playStatus, temp, fecha, volumen 15).

void setup() {
  myGLCD.InitLCD(); myGLCD.clrScr(); myTouch.InitTouch(); myTouch.setPrecision(PREC_MEDIUM);
  rtc.begin();
  Serial.begin(9600); mp3Serial.begin(9600); // BY8001 requiere 9600 baud
  mp3.setup(mp3Serial); delay(800); // arranque en frío
  drawHomeScreen(); currentPage = '0'; playStatus = '0';
  mp3.setVolume(15); delay(100);
  currentTemperature = rtc.getTemp(); currentDate = rtc.getDateStr();
  currentClock = rtc.getTimeStr(); timeString = rtc.getTimeStr();
  currentHours = timeString.substring(0,2); currentMinutes = timeString.substring(3,5);
  currentSeconds = timeString.substring(6,8);
}

Loop: si currentPage == '0' (Home). Comprueba cambio reloj (cada segundo). Fuente SevenSegNumFont solo números → extraer horas/minutos/segundos de string getTimeStr() con substring() e imprimir si cambian. Similar para fecha y temperatura.

if (currentPage == '0') {
  if (currentClock != rtc.getTimeStr()) {
    timeString = rtc.getTimeStr();
    hoursS = timeString.substring(0,2); minutesS = timeString.substring(3,5); secondsS = timeString.substring(6,8);
    myGLCD.setFont(SevenSegNumFont); myGLCD.setColor(0,255,0);
    myGLCD.print(secondsS, 224, 50);
    if (currentMinutes != minutesS) { myGLCD.print(minutesS, 128, 50); currentMinutes = minutesS; }
    if (currentHours != hoursS) { myGLCD.print(hoursS, 32, 50); currentHours = hoursS; }
    // Fecha
    dateS = rtc.getDateStr(); delay(10);
    if (currentDate != dateS) { myGLCD.setColor(255,255,255); myGLCD.setFont(BigFont); myGLCD.print(rtc.getDateStr(), 153, 7); }
    // Temperatura
    temperature = rtc.getTemp(); delay(10);
    if (currentTemperature != temperature) { myGLCD.setColor(255,255,255); myGLCD.setFont(BigFont); myGLCD.printNumI(temperature, 39, 7); currentTemperature = temperature; }
    delay(10); currentClock = rtc.getTimeStr();
  }
  // Touch
  if (myTouch.dataAvailable()) {
    myTouch.read(); x = myTouch.getX(); y = myTouch.getY();
    // Botón Music Player
    if (x>=55 && x<=120 && y>=125 && y<=190) { drawFrame(87,157,33); currentPage='1'; myGLCD.clrScr(); delay(100); drawMusicPlayerScreen(); delay(100); }
    // Botón Alarm
    if (x>=195 && x<=260 && y>=125 && y<=190) { drawFrame(227,160,29); currentPage='2'; myGLCD.clrScr(); }
  }
}

Pantalla Music Player (currentPage == '1'): comprueba touch. Botón Play: si playStatus=='0' → mp3.playTrackFromFolder(00,001), dibuja Pause, playStatus='2'. Toggle play/pause con playStatus.

if (currentPage == '1') {
  if (myTouch.dataAvailable()) { /* ... */ }
  // Botones Previous, Next, VolumeDown, VolumeUp, MENU → funciones correspondientes
  if (playStatus == '1' || playStatus == '2') trackPlayTime(); // Actualiza barra
  printClock(187, 5); // Reloj esquina
}

Barra progreso: trackPlayTime() usa mp3.getTotalTrackPlaybackTime() y getElapsedTrackPlaybackTime(), calcula tiempos y dibuja barra roja. printClock() imprime reloj esquina.

void trackPlayTime() {
  totalTime = mp3.getTotalTrackPlaybackTime(); delay(10);
  elapsedTime = mp3.getElapsedTrackPlaybackTime(); delay(10);
  minutes = (int)elapsedTime / 60; seconds = (((float)elapsedTime/60)-minutes)*60;
  playback = totalTime - elapsedTime; minutesR = (int)playback/60; secondsR = (((float)playback/60)-minutesR)*60;
  myGLCD.setFont(SmallFont); myGLCD.setColor(255,255,255);
  myGLCD.printNumI(minutes, 8, 48); myGLCD.print(":", 16, 48); myGLCD.printNumI((int)seconds, 24, 48, 2, '0');
  myGLCD.print("-", 276, 48); myGLCD.printNumI(minutesR, 284, 48); myGLCD.print(":", 292, 48); myGLCD.printNumI((int)secondsR, 300, 48, 2, '0');
  int trackBarX = map(elapsedTime, 0, totalTime, 0, 224);
  myGLCD.setColor(255,0,0); myGLCD.fillRect(48, 50, 48+trackBarX, 58);
  if (totalTime == elapsedTime) { mp3.nextTrack(); delay(30); myGLCD.setColor(255,255,255); myGLCD.fillRect(48,50,272,58); }
}

Pantalla Alarm Clock (currentPage == '2'): dibuja gráficos, reloj, botones H/M, SET, CLEAR. alarmNotSet=true → while loop para tocar botones. H/M incrementan horas/minutos (wrap 24/60). SET: formatea alarmString igual que getTimeStr() (HH:MM:00) para comparar. CLEAR: borra alarma. MENU: vuelve a Home.

if (currentPage == '2') {
  /* dibuja interfaz */
  alarmNotSet = true;
  while (alarmNotSet) {
    if (myTouch.dataAvailable()) { /* botones H, M, SET, CLEAR, MENU */ }
  }
}

Activación alarma: si alarmNotSet==false y alarmString == rtc.getTimeStr() → limpia pantalla, volumen 25, reproduce track 1, dibuja "ALARM" + botón DISMISS. alarmOn=true → while hasta pulsar DISMISS → para reproducción, vuelve Home, volumen 15.

if (alarmNotSet == false) {
  if (alarmString == rtc.getTimeStr()) {
    myGLCD.clrScr(); mp3.setVolume(25); mp3.playTrackByIndexNumber(1); delay(100);
    myGLCD.setFont(BigFont); myGLCD.setColor(255,255,255);
    myGLCD.print("ALARM", CENTER, 90); myGLCD.drawBitmap(127,10,65,64,AlarmButton);
    myGLCD.print(alarmString, CENTER, 114); myGLCD.drawRoundRect(94,146,226,170); myGLCD.print("DISMISS", CENTER, 150);
    boolean alarmOn = true;
    while (alarmOn) {
      if (myTouch.dataAvailable()) { /* botón DISMISS */ }
    }
  }
}

Construcción del Dispositivo

Diseño en SolidWorks.

Descarga modelo para medidas. Caja chapa aluminio: corté con multiherramienta, doblé en borde mesa con sargentos y listones.

Altavoces: patrón circular impreso, pegado, taladrado agujeros. Laterales recortados y pegados a chapa con pistola silicona. Pintado caja, electrónica dentro (silicona), todo conectado, tapa trasera con 2 tornillos.

Código completo al final del artículo. ¡Preguntas en comentarios y revisa mi colección Proyectos Arduino!