Arduino 网页控制 MP3 播放器：浏览器实现无线点歌

元器件清单

项目简介

本项目实现通过网页界面远程控制 MP3 播放器，适用于博物馆、展览馆等场景的语音导览系统。用户在手机或电脑浏览器打开网页，即可控制播放/暂停、上一曲/下一曲、音量调节等功能。系统采用 PHPoC WiFi Shield 实现 WebSocket 通信，Arduino 通过串口向 MP3 模块发送指令。

硬件接线

• 将 PHPoC Shield 直接堆叠在 Arduino UNO 上
• MP3 模块接线：

系统数据流向

Web 浏览器 → PHPoC WiFi Shield → Arduino → MP3 播放器

网页端通过 WebSocket 发送控制指令（如播放、暂停、音量），PHPoC Shield 透传给 Arduino，Arduino 再按协议转发给 MP3 模块。

MP3 模块指令集

实施步骤

1. 配置 PHPoC Shield WiFi：设置 SSID 和密码，参考官方文档
2. 上传 Web UI：下载 remote_mp3.php，通过 PHPoC Debugger 上传到 Shield
3. 安装 Arduino 库：在 Arduino IDE 安装 PHPoC 库并重启
4. 编写/上传 Arduino 代码：参考下方完整代码
5. 测试运行：打开串口监视器获取 IP 地址，浏览器访问 https://[IP]/remote_mp3.php

Arduino 完整代码

#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};

// MP3 模块指令定义
#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

// WebSocket 服务器
PhpocServer server(80);
char name;
int value;

void setup() {
  mySerial.begin(9600);
  delay(500); // 等待 MP3 模块初始化
  
  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();
      
      switch (name) {
        case 'P': // 播放
          Serial.println("Play mp3");
          sendCommand(CMD_PLAY, 0x0000);
          break;
        case 'S': // 暂停
          Serial.println("Pause mp3");
          sendCommand(CMD_PAUSE, 0x0000);
          break;
        case 'N': // 下一曲
          Serial.println("Play next mp3");
          sendCommand(CMD_PLAY_NEXT, 0x0000);
          break;
        case 'B': // 上一曲
          Serial.println("Play previous mp3");
          sendCommand(CMD_PLAY_PREV, 0x0000);
          break;
        case 'V': // 音量
          Serial.print("Change volume to ");
          Serial.println(value);
          sendCommand(CMD_SET_VOLUME, value);
          break;
      }
    }
  }
}

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; // 无反馈
  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]);
  }
}

Web 界面代码 (remote_mp3.php)

网页端采用 HTML5 Canvas 绘制圆形控制界面，包含播放/暂停、上一曲/下一曲、音量滑块，通过 WebSocket 与 Arduino 实时通信。完整代码较长，核心逻辑如下：

• 初始化 Canvas 绘制圆形控制面板
• 建立 WebSocket 连接到 PHPoC Shield
• 触摸/鼠标事件处理：中间圆区控制播放暂停，左右箭头控制切歌，底部滑块控制音量
• 发送指令格式：P0\r\n(播放)、S0\r\n(暂停)、N0\r\n(下一曲)、B0\r\n(上一曲)、V[音值]\r\n(音量)