아두이노 웹 제어 MP3 플레이어 - 브라우저로 오디오 재생하기

부품 및 소모품

부품	수량	비고
아두이노 우노 (Arduino UNO)	1
PHPoC WiFi 쉴드 (아두이노용)	1	PHPoC 쉴드로 대체 가능
시리얼 MP3 플레이어 (Catalex 제품)	1
마이크로 SD 카드	1
스피커	1

프로젝트 소개

박물관이나 전시관에서 방문객에게 음성 안내를 제공하는 등 온디맨드 음성 재생이 필요한 상황에 유용한 프로젝트입니다. 아두이노 우노를 이용해 웹페이지에서 MP3 플레이어를 제어하는 방법을 보여줍니다.

시리얼 MP3 플레이어

시리얼 MP3 플레이어는 두 가지 인터페이스를 가집니다:

• 스피커 연결용 잭
• 마이크로컨트롤러 연결 인터페이스 (본 프로젝트에서는 아두이노)

마이크로컨트롤러로부터 명령(재생, 일시정지, 볼륨 조절 등)을 수신하면, SD 카드에서 MP3 파일을 읽어 해당 동작을 수행합니다. 사용 전 SD 카드에 MP3 파일을 복사하고 플레이어에 장착해야 합니다.

배선

• PHPoC 쉴드를 아두이노 위에 적층
• MP3 플레이어의 GND, VCC, TX, RX를 아두이노의 GND, 5V, 8번 핀, 9번 핀에 각각 연결

데이터 흐름

웹 브라우저 → PHPoC WiFi 쉴드 → 아두이노

웹 브라우저의 웹앱이 터치/클릭 이벤트에 따라 명령과 데이터를 WebSocket을 통해 PHPoC 쉴드로 전송합니다. PHPoC 쉴드는 이를 아두이노로 전달하고, 아두이노는 수신한 명령에 따라 MP3 플레이어에 시리얼 명령을 보냅니다.

참고: PHPoC 쉴드에는 웹 브라우저에서 아두이노로 데이터를 전달하는 내장 프로그램이 있으므로, 이에 대해 신경 쓸 필요가 없습니다.

필수 작업

1. PHPoC 쉴드 WiFi 정보 설정 (SSID 및 비밀번호)
2. PHPoC 쉴드에 새로운 웹 UI 업로드
3. 아두이노 코드 작성

PHPoC 쉴드 WiFi 설정

이 지침을 참조하세요.

웹 UI를 PHPoC 쉴드에 업로드

• 코드 섹션의 remote_mp3.php 소스 코드 다운로드
• PHPoC 디버거를 사용해 쉴드에 업로드 (지침 참조)

참고: 이 웹 UI에는 아두이노로 전송할 명령 세트가 포함되어 있습니다.

아두이노 코드 작성

• 아두이노 IDE에 PHPoC 라이브러리 설치 (지침 참조) 후 IDE 재시작
• 파일 → 예제 → PhpoC → WebRemoteSlide 열기
• 예제 코드 수정 (코드 섹션의 소스 코드 참조)

테스트

• 아두이노 IDE의 시리얼 모니터 버튼을 클릭해 IP 주소 확인
• 웹 브라우저에서 https://<IP_주소>/remote_mp3.php 접속
• Connect 버튼 클릭 후 테스트

함수 레퍼런스

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

코드

아두이노 코드

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

#define ARDUINO_RX 8  // MP3 플레이어 TX에 연결
#define ARDUINO_TX 9  // MP3 플레이어 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

// 아두이노 웹 서버
PhpocServer server(80);
char name;
int value;

void setup() {
  mySerial.begin(9600);
  delay(500); // 칩 초기화 대기
  sendCommand(CMD_SEL_DEV, DEV_TF); // TF 카드 선택
  delay(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); // 데이터 상위 바이트
  Send_buf[6] = (int8_t)(dat);      // 데이터 하위 바이트
  Send_buf[7] = 0xef; // 종료 바이트
  
  for (uint8_t i = 0; i < 8; i++) {
    mySerial.write(Send_buf[i]);
  }
}

웹 UI (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>
    // 캔버스 기반 원격 제어 UI 구현
    // 재생/일시정지, 이전/다음, 볼륨 슬라이더 등을 터치/마우스로 조작
    // WebSocket으로 아두이노와 실시간 통신
    var canvas_width = 450, canvas_height = 250;
    var trans_x = canvas_width/2, trans_y = canvas_height/2 - 30;
    // ... (전체 코드는 원문 참조)
    window.onload = init;
  </script>
</head>
<body>
  <h1>Web Remote Control / IoT MP3 Player</h1>
  <canvas id="remote"></canvas>
  <h2>
    WebSocket: <span id="ws_state">null</span>
    <button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
  </h2>
</body>
</html>

회로도