There's a unique magic in blending technology with emotions—especially when you create something that lets you interact with sound and visuals. Just as music has the power to evoke emotions, combining it with visual patterns can amplify the experience. This journey reminds me of how early inventors used simple mechanisms to trigger profound emotional connections, much like the way a song can shift our mood or transport us to a different time.
I believe that by understanding how these devices work, we not only unlock a way to create but also discover new possibilities for expressing ourselves. The ability to control music through a visual medium gives us an engaging and fun way to connect with the technology we build, turning simple circuits into living, breathing displays of art and sound.
In this project, we will use a Expansion Board Base for XIAO and the Grove Respeak module to create a music player. By combining these elements with MicroBlocks®, a Scratch-like block-coding software, we’ll be able to visualize sound and react to different musical moods. Watch how the colors of the OLED change with the rhythm and melodies, letting the music directly influence the mood of the display.
Through this, you'll experience how the interplay between music and visuals can offer endless creative possibilities while learning the core principles of electronics, coding, and user interaction.
Material preparationI am using the XIAO ESP32S3. Of course, the expansion board I am using currently supports all XIAOs from SeeedStudio. However, at present, the only XIAOs that can be used on the MicroBlocks platform are the following ones:
In addition, another Grove - Speaker needs to be prepared. The link has been provided above. You can click on it at any time to make a purchase or view its details.
WiringFor this expansion board, it already comes equipped with an OLED display, so you don't need to purchase an additional OLED. Moreover, the interface using Seeed Studio's Grove is available on it, and we don't need to connect any additional wires. This prevents the situation where incorrect connection causes the sensor to burn out, and it is very user-friendly for beginners. Additionally, for Grove - Grove - Speaker, I connected to pin 0, which is the interface below.
MicroBlocks has a complete IDE and a browser version. Here, I am using the web version, which can be opened with either Chrome or Edge, and it is extremely convenient.
Use the web version and click the link to enter: MicroBlocks editor
During the installation process of the IDE, if you encounter any difficulties, you can click on their website to view more information and seek assistance. MicroBlocks Get Started tab.
2. connect- Select install ESP firmware from microblocks.fun from the expanded gear menu:
- Select xiao esp32 s3
- Click the connect (plug icon) button:
- Choose connect via USB, from the displayed menu.
- select your board from the dialog and click the connect button
After connecting the device, click Add Library to add some libraries that we need to use.
- OLED Graphics
Drag the corresponding building blocks to perform the initialization operation.
You won't be able to view the expected effect. However, you can use the following website to view the expected effect and obtain the corresponding coordinate information, which will help you create better. It is a free and open-source website. Piskelapp
- Tone
Select pin 0
You can make changes to the pitch and adjust the playing time according to the music score. If you are not familiar with music theory, it's no problem. Just tell the AI models like ChatGPT or Gemini your requirements, and they will help you solve this issue.
- The complete configuration diagram is shown below. I hope it will be helpful to you.
Although these processes may take some time, the feedback received is extremely positive and will give you a great sense of satisfaction.
There are still many imperfections during the production process. If you have any more ideas, please leave a message to exchange views and make progress together!






Comments