Third party cookies may be stored when visiting this site. Please see the cookie information.

PenguinTutor YouTube Channel

Raspberry Pi Pico Web Based MP3 Player using DFPlayer Mini

Taking your microcontroller audio projects to the next level just got a lot more interesting. Building on my custom MicroPython library for the DFPlayer Mini, this project upgrades the setup with the wireless capabilities of the Raspberry Pi Pico 2W to create a fully functional, web-controlled MP3 player. Now, you can DJ your hardware builds directly from your smartphone or computer network. But the real magic lies in the web interface itself: rather than wrestling with clunky CSS or loading dozens of static image files, this build uses dynamically updated SVG files to cleanly and efficiently display the player's status. It is a smart, streamlined approach to building user interfaces on microcontrollers!

Adding Web Based IoT player capabilities to my DFPlayer Raspberry Pi Pico

I've previously explained how I created a MicroPython library for DFPlayer mini MP3 player for a Raspberry Pi Pico. I've also created a web based version which uses a Raspberry Pi Pico 2W and allows you to control the MP3 Player with your phone or computer.

DFRobot DFPlayerMini MP3 player with Micro SD Card connected to a Raspberry Pi Pico 2W

I've now expanded on this by programming a web server to run on the Raspberry Pi Pico 2W, which allows this to be used as a web based MP3 Player.

I've created web interfaces for the Raspberry Pi Pico before, but for this I tried something different. Could I have an SVG file and change the text dynamically. That sounded more interesting than manually creating a bunch of image files and avoids some of the pitfalls of trying to do that using CSS. It turns out that I could and I included that in the video.

Web interface for a Raspberry Pi Pico 2W with DFRobot DFPlayer Mini MP3 Player

The SVG file has a token used in place of the title, and the web page code replaces that with the appropriate title.

Source code

You can download the source code from github.

Related projects

I eventually intend to use this as part of a model railway layout providing sounds for the station building. See the link below for more details of model railway projects.

To see future updates please:
Subscribe to the PenguinTutor YouTube Channel

Previous Pico MP3 player
Pico MP3 player
Next Pico Reindeer MP3 player
Pico Reindeer MP3 player