I have a similar project using only PHPoC here.
MP3 player may be useful in museum or exhibition to provide voice-based information to visitors on demand. This project shows how to control MP3 via webpage using Arduino Uno.
If you are a beginner, you can learn about Arduino here.
Serial MP3 player have two interfaces:
- jack to speaker
- interface to micro-controller (in this project is Arduino)
When receiving a command from micro-controller (e.g PLAY, PAUSE, VOLUME UP...), MP3 player read .mp3 file from SD card and perform action based on the command.
Before using, it need to copy .mp3 files to SD card and mount it to MP3 Player.
- Stack PHPoC shield on Arduino
- Connect pin GND, VCC TX and RX of MP3 Player to GND, 5V, pin 8 and pin 9 of Arduino, respectively.
Web browser ---> PHPoC WiFi Shield ---> Arduino
Web app on web browser will send commands and data based on touch or click event to PHPoC shield via WebSocket. When receiving the command, PHPoC shield passes it to Arduino. Arduino sends command to MP3 player according to the command received from PHPoC Shield.
Where, XX is volume value.
Note that: PHPoC shield has a built-in program to pass data from web browser to Arduino. Therefore, we don't need to care about it.
- Set Wifi information for PHPoC shield (SSID and password)
- Upload new UI to PHPoC shield
- Write Arduino code
See this instruction.
- Download PHPoC source code remote_mp3.php (on code section).
- Upload it to PHPoC shield using PHPoC debugger according to this instruction.
Note that: This Web UI contains command set to send to Arduino.
- Install library for Arduino on Arduino IDE (see the instruction ) and restart Arduino IDE.
- On Arduino IDE, go to File -> Examples -> Phpoc -> WebRemoteSlide.
- I modified the example (see the source code in code section).
- Click serial button on Arduino IDE to see the IP address.
- Open web browser, type
- Click connect button and test it.