Arduinoウェブ制御MP3プレーヤー：ブラウザから簡単オーディオ再生

必要な部品と用品

部品	数量	備考
Arduino UNO	1
PHPoC WiFi Shield for Arduino	1	PHPoC Shield for Arduinoでも代用可能
シリアルMP3プレーヤー（Catalex製）	1
microSDカード	1
スピーカー	1

このプロジェクトについて

類似のプロジェクトをPHPoCのみで作成したことがあります。

MP3プレーヤーは博物館や展示会で、来館者に音声ガイドをオンデマンドで提供するのに役立ちます。このプロジェクトでは、Arduino Unoを使ってウェブページ経由でMP3を制御する方法を紹介します。

初心者の方は、こちらでArduinoについて学べます。

シリアルMP3プレーヤー

シリアルMP3プレーヤーには2つのインターフェースがあります：

• スピーカー用ジャック
• マイクロコントローラー用インターフェース（このプロジェクトではArduino）

マイクロコントローラーからコマンド（再生、一時停止、音量アップなど）を受信すると、MP3プレーヤーはSDカードから.mp3ファイルを読み取り、コマンドに基づいて動作します。

使用前には、.mp3ファイルをSDカードにコピーし、MP3プレーヤーに装着する必要があります。

配線

• PHPoCシールドをArduinoにスタック
• MP3プレーヤーのGND、VCC、TX、RXを、それぞれArduinoのGND、5V、ピン8、ピン9に接続

データフロー

ウェブブラウザ → PHPoC WiFiシールド → Arduino

ウェブブラウザ上のウェブアプリが、タッチやクリックイベントに基づいてコマンドとデータをWebSocket経由でPHPoCシールドに送信します。コマンドを受信すると、PHPoCシールドはそれをArduinoに渡します。ArduinoはPHPoCシールドから受信したコマンドに従ってMP3プレーヤーにコマンドを送信します。

コマンドセット

ここで、XXは音量値です。

注： PHPoCシールドにはウェブブラウザからArduinoへデータを渡す組み込みプログラムがあるため、その部分を気にする必要はありません。

必要な作業

• PHPoCシールドのWiFi情報設定（SSIDとパスワード）
• PHPoCシールドへ新しいUIのアップロード
• Arduinoコードの作成

PHPoCシールドのWiFi情報設定

こちらの手順を参照してください。

PHPoCシールドへ新しいウェブUIのアップロード

• PHPoCソースコード remote_mp3.php（コードセクションにあります）をダウンロード
• PHPoCデバッガーを使ってPHPoCシールドにアップロード（手順はこちら）

注： このウェブUIにはArduinoへ送信するコマンドセットが含まれています。

Arduinoコードの作成

• Arduino IDEでArduino用ライブラリをインストール（手順はこちら）し、Arduino IDEを再起動
• Arduino IDEで「ファイル」→「スケッチ例」→「Phpoc」→「WebRemoteSlide」を開く
• この例を改造しました（コードセクションのソースコードを参照）

テスト

• Arduino IDEのシリアルモニタボタンをクリックしてIPアドレスを確認
• ウェブブラウザで https:// IPアドレスを置き換え/remote_mp3.php にアクセス
• 接続ボタンをクリックしてテスト

初心者向け最高のArduinoスターターキット

初心者向け最高のArduinoキットはこちら

関数リファレンス

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

コード

Arduinoコード

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

#define ARDUINO_RX 8  // シリアルMP3プレーヤーモジュールのTXに接続
#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);  // 200ms待機
  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>
// ... 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>

回路図