Веб-управляемый MP3-плеер на Arduino: Воспроизведение аудио через браузер

Компоненты и материалы

Arduino UNO	1
PHPoC WiFi Shield для Arduino (можно использовать PHPoC Shield)	1
Последовательный MP3-плеер Catalex	1
microSD-карта	1
Динамик	1

О проекте

У меня есть похожий проект, использующий только PHPoC. MP3-плеер может быть полезен в музеях или на выставках для предоставления голосовой информации посетителям по запросу. Этот проект показывает, как управлять MP3 через веб-страницу с помощью Arduino Uno.

Последовательный MP3-плеер

У последовательного MP3-плеера два интерфейса:

• джек для динамика
• интерфейс для микроконтроллера (в данном проекте — Arduino)

При получении команды от микроконтроллера (например, PLAY, PAUSE, VOLUME UP...), MP3-плеер считывает .mp3 файл с SD-карты и выполняет действие согласно команде.

Перед использованием необходимо скопировать .mp3 файлы на SD-карту и вставить её в плеер.

Подключение

• Установите PHPoC Shield на Arduino
• Соедините GND, VCC, TX и RX MP3-плеера с GND, 5V, 핀 8 и pin 9 Arduino соответственно

Поток данных

Веб-браузер → PHPoC WiFi Shield → Arduino

Веб-приложение в браузере отправляет команды и данные на основе событий касания или клика на PHPoC Shield через WebSocket. Получив команду, PHPoC Shield передает её Arduino. Arduino отправляет команду MP3-плееру в соответствии с полученной командой.

Где XX — значение громкости.

Примечание: PHPoC Shield имеет встроенную программу для передачи данных из браузера в Arduino. Поэтому нам не нужно заботиться об этом.

Что нужно сделать

• Настроить WiFi для PHPoC Shield (SSID и пароль)
• Загрузить новый веб-интерфейс на PHPoC Shield
• Написать код для Arduino

Настройка WiFi для PHPoC Shield

См. инструкцию.

Загрузка веб-интерфейса на PHPoC Shield

• Скачайте исходный код PHPoC remote_mp3.php (в разделе кода)
• Загрузите его на PHPoC Shield с помощью PHPoC Debugger согласно инструкции

Примечание: Этот веб-интерфейс содержит набор команд для отправки на Arduino.

Написание кода для Arduino

• Установите библиотеку для Arduino в Arduino IDE (см. инструкцию) и перезапустите IDE
• В Arduino IDE перейдите: Файл → Примеры → Phpoc → WebRemoteSlide
• Я модифицировал пример (см. исходный код в разделе кода)

Тестирование

• Нажмите кнопку Serial Monitor в Arduino IDE, чтобы увидеть IP-адрес
• Откройте браузер, введите https:// replace_ip_address /remote_mp3.php
• Нажмите кнопку Connect и тестируйте

Код

Код Arduino (C/C++)

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

#define ARDUINO_RX 8 // должен соединяться с TX модуля Serial MP3 Player
#define ARDUINO_TX 9 // соединяется с RX модуля
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
PhpocServer server(80);
char name;
int value;

void setup() {
  mySerial.begin(9600);
  delay(500); // ожидание инициализации чипа
  sendCommand(CMD_SEL_DEV, DEV_TF); // выбор TF-карты
  delay(200); // ожидание 200 мс
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_slide");
  Serial.print("WebSocket server address: ");
  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("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; // стартовый байт
  Send_buf[1] = 0xff; // версия
  Send_buf[2] = 0x06; // количество байт команды без стартового и конечного байтов
  Send_buf[3] = command;
  Send_buf[4] = 0x00; // 0x00 = без обратной связи, 0x01 = с обратной связью
  Send_buf[5] = (int8_t)(dat >> 8); // datah
  Send_buf[6] = (int8_t)(dat);      // datal
  Send_buf[7] = 0xef; // конечный байт
  for(uint8_t i=0; i<8; i++) {
    mySerial.write(Send_buf[i]);
  }
}

Веб-интерфейс (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>
// ... JavaScript код для управления через WebSocket (полный код в оригинале)
</script>
</head>
<body>
<p><h1>Web Remote Control / 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>

Схемы