Arduino Web-gecontroleerde MP3 Speler: Eenvoudige Audio Afspelen via Browser

Onderdelen en benodigdheden

Over dit project

Een MP3 speler kan nuttig zijn in musea of tentoonstellingen om bezoekers op verzoek spraakgebaseerde informatie te geven. Dit project laat zien hoe je een MP3 speler via een webpagina kunt besturen met een Arduino Uno.

Seriële MP3 Speler

De seriële MP3 speler heeft twee interfaces:

• Jack voor luidspreker
• Interface naar microcontroller (in dit project Arduino)

Bij ontvangst van een commando van de microcontroller (bijv. PLAY, PAUSE, VOLUME UP), leest de MP3 speler het .mp3 bestand van de SD kaart en voert de actie uit.

Voordat je begint, kopieer .mp3 bestanden naar de SD kaart en plaats deze in de MP3 speler.

Bedrading

• Plaats de PHPoC shield op de Arduino
• Verbinden GND, VCC, TX en RX van de MP3 speler met GND, 5V, pin 8 en pin 9 van de Arduino

Dataflow

Webbrowser → PHPoC WiFi Shield → Arduino

De webapp in de browser stuurt commando's en data gebaseerd op touch/klik events naar de PHPoC shield via WebSocket. De shield doorgeeft dit aan de Arduino, die commando's naar de MP3 speler stuurt.

Let op: De PHPoC shield heeft een ingebouwd programma om data van de browser naar de Arduino door te geven. Je hoeft je er niet om te zorgen.

Wat we moeten doen

• WiFi informatie instellen voor PHPoC shield (SSID en wachtwoord)
• Nieuwe UI uploaden naar PHPoC shield
• Arduino code schrijven

WiFi instellen voor PHPoC Shield

Zie deze instructie.

Nieuwe Web UI uploaden naar PHPoC Shield

• Download de PHPoC broncode remote_mp3.php (in code sectie)
• Upload naar PHPoC shield met PHPoC debugger volgens deze instructie

Let op: Deze Web UI bevat de commando set om naar de Arduino te sturen.

Arduino code schrijven

• Installeer de library voor Arduino in Arduino IDE (zie instructie) en herstart de IDE
• Ga in Arduino IDE naar Bestanden → Voorbeelden → Phpoc → WebRemoteSlide
• Wijzig het voorbeeld (zie broncode in code sectie)

Testen

• Klik op de seriële monitor in Arduino IDE om het IP adres te zien
• Open webbrowser, ga naar https://[IP-adres]/remote_mp3.php
• Klik op verbind knop en test

Functie referenties

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

Code

Arduino Code

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

#define ARDUINO_RX 8  // verbinden met TX van Seriële MP3 Speler module
#define ARDUINO_TX 9  // verbinden met RX van de module
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

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

void setup() {
  mySerial.begin(9600);
  delay(500);  // wacht op chip initialisatie
  sendCommand(CMD_SEL_DEV, DEV_TF);  // selecteer TF kaart
  delay(200);
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_slide");
  Serial.print("WebSocket server adres: ");
  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("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("Volume wijzigen naar ");
        Serial.println(value);
        sendCommand(CMD_SET_VOLUME, value);
      }
    }
  }
}

void sendCommand(int8_t command, int16_t dat) {
  delay(20);
  Send_buf[0] = 0x7e;  // start byte
  Send_buf[1] = 0xff;  // versie
  Send_buf[2] = 0x06;  // aantal bytes van commando
  Send_buf[3] = command;
  Send_buf[4] = 0x00;  // 0x00 = geen feedback, 0x01 = feedback
  Send_buf[5] = (int8_t)(dat >> 8);  // data high
  Send_buf[6] = (int8_t)(dat);       // data low
  Send_buf[7] = 0xef;  // eind byte
  
  for(uint8_t i=0; i<8; i++) {
    mySerial.write(Send_buf[i]);
  }
}

Web UI (remote_mp3.php)

<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - IoT MP3 Speler</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>
// ... JavaScript code voor web interface ...
</script>
</head>
<body>
<h1>Web Remote Control / IoT MP3 Speler</h1>
<canvas id="remote"></canvas>
<h2>
<p> WebSocket : <span id="ws_state">null</span> </p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Verbinden</button>
</h2>
</body>
</html>

Schema's