Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
For most new builds, use an ESP32-S3 running ESPHome as the control surface, not as the speaker. The easiest polished option is the M5Stack Dial, which combines an ESP32-S3, a 1.28-inch round touchscreen, and a rotary encoder. Choose an ESP32-S3-DevKitC-1 with separate parts when you need a custom enclosure, display, or knob. Choose the larger CoreS3 when readable track information and touch controls matter more than a compact volume panel. An I2S DAC is unnecessary when the device only sends commands to an existing network player; it is needed only when the ESP32 itself must render audio.
The recommended architecture
A Home Assistant music controller is best built as a networked user interface. The ESP32 reads the physical controls, ESPHome exposes those controls to Home Assistant, and Home Assistant sends commands to a media player such as a network speaker or receiver. Volume, play/pause, next, previous, shuffle, source selection, and grouping are handled by Home Assistant’s media_player integration.
As an Amazon Associate I earn from qualifying purchases.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →ESPHome generates firmware from YAML and maintains a native API connection to Home Assistant. That connection lets an encoder turn, button press, or display update reach the automation system without the controller having to implement a separate music protocol. The ESP32 can therefore remain a small, responsive front panel while the existing media player performs playback.
This split determines the most important hardware decision: decide whether the project is a control surface or an audio endpoint. A control surface needs Wi-Fi, GPIO, an encoder, and possibly a display. An audio endpoint also needs ESPHome’s I2S audio components plus a suitable DAC or amplifier.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
Which board should you buy?
| Board | Best for | Published hardware | Advantages | Trade-offs |
|---|---|---|---|---|
| M5Stack Dial | Fastest route to a finished knob-first controller | ESP32-S3FN8 dual-core LX7 at 240 MHz; 8 MB flash; 1.28-inch 240×240 GC9A01 TFT; FT3267 touch; 16 detents and 64 pulses per revolution; USB-C 5 V input; 6–36 V rear terminal; battery connector; PORT.A and PORT.B expansion; buzzer, RFID reader, button, and RTC | Encoder, display, touch, controller, and enclosure-ready hardware are integrated | Round display and fixed mechanical layout limit custom enclosure and display choices; verify the exact hardware revision |
| ESP32-S3-DevKitC-1 plus separate parts | Custom enclosures and replaceable components | Entry-level ESP32-S3 board based on ESP32-S3-WROOM-1, with pins exposed for breadboard and jumper wiring | Freedom to choose encoder feel, display shape, GPIO allocation, power supply, and enclosure | Requires wiring, mechanical work, a display, and firmware pin configuration |
| M5Stack CoreS3 | Readable metadata and touch-heavy interfaces | 2.0-inch 320×240 IPS display; capacitive touch; speaker amplifier; microphone codec; microSD; Grove and M-Bus ports | Larger screen and integrated audio-related hardware suit album art, titles, progress, and touch targets | More hardware and a larger body than a simple volume controller requires |
Best integrated build: M5Stack Dial
The Dial is the shortest path to a polished controller. Its 16 mechanical detents and 64 pulses per revolution provide enough resolution for smooth volume changes while retaining a clear physical click. The 240×240 round screen can show volume, playback state, and a short title without requiring a separate display board. Touch, a push button, a buzzer, an RFID reader, and an RTC leave room for modes such as room selection or preset recall.
Use the Dial when the main interaction is turning and pressing one knob. It is particularly suitable for a bedside, kitchen, or desk controller where a compact round face is an advantage. The rear 6–36 V terminal and USB-C 5 V input provide more than one power-installation option, but the supply and enclosure still need to be designed for the specific revision you purchase.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsBest modular build: ESP32-S3-DevKitC-1
The DevKitC-1 is the better engineering choice when the enclosure is the project. All relevant pins are exposed, so you can place a panel-mounted EC11-style quadrature encoder exactly where the hand expects it, use a rectangular display, and reserve GPIO for status LEDs, an IR receiver, or additional buttons. Parts can also be replaced independently if a knob wears out or a display becomes unavailable.
Modularity adds work. You must select an encoder, wire A, B, and the push switch, choose a display interface, prevent power and ground mistakes, and maintain a pin map in the ESPHome configuration. The board is an excellent foundation, but it is not a finished product.
Best larger-display option: M5Stack CoreS3
The CoreS3’s 2.0-inch 320×240 IPS display is more appropriate when the controller must show a useful amount of metadata: title, artist, progress, source, and several touch targets. Its capacitive touch, speaker amplifier, microphone codec, microSD, and Grove/M-Bus ports support a richer interface than a single-knob panel.
Choose it when people will browse or select music at the controller. For a volume-only wall station, its extra size and components are unnecessary; a Dial or a small modular TFT is easier to justify.
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
Choosing the rotary encoder
Use a detented quadrature encoder with an integrated momentary switch. The two phase-shifted outputs, commonly called A and B, tell ESPHome which direction the shaft moved. The push switch provides a natural second action for play/pause, source selection, or changing the knob’s mode.
What matters mechanically
- Detent feel: Light detents make rapid volume changes easy; firmer detents reduce accidental adjustments. Test the actual part rather than relying only on its name.
- Resolution: The M5Stack Dial specifies 16 detents and 64 pulses per revolution. A separate encoder may report a different number of transitions, so tune the ESPHome resolution and step size after installation.
- Switch quality: The push switch should have a clear click and enough travel to avoid triggering while the shaft is being turned.
- Mounting: Panel-mounted EC11-style encoders are convenient for custom cases. Check shaft length, bushing diameter, thread, nut clearance, and knob fit before cutting the panel.
- Debounce: Mechanical contacts bounce. If one click changes volume several steps, increase debounce filtering or adjust the encoder mode in the final enclosure.
Map the controls before writing automations
A practical first mapping is turn for volume, press for play/pause, long press for source or room selection, and a second button for next track. If the controller has a touchscreen, reserve touch for browsing and leave the encoder responsible for the action that must work without looking.
Do not assume clockwise always means louder. Install the knob, observe the reported value, and reverse the direction in firmware if needed. Also decide whether one detent should equal one volume step or whether several detents should be combined for finer control.
Choosing the display
| Display approach | Use it when | What it can show well | Important constraint |
|---|---|---|---|
| 1.28-inch round touch display | You want a compact, distinctive knob controller | Volume, playback icon, short title, connection state | Limited area and round layout make long metadata and lists difficult |
| 2.0-inch 320×240 touch display | You need readable metadata and larger touch targets | Album art, title, artist, progress, source, and transport controls | Requires more physical space and a layout that supports touch interaction |
| Separate SPI display | The enclosure has a custom aspect ratio or the display may be replaced independently | Anything supported by the selected panel and ESPHome display component | You must manage the display’s GPIO, power, driver, and mounting separately |
Round display: compact status UI
The Dial’s GC9A01 240×240 panel and FT3267 touch controller are a concrete example of a round interface. Design for large, high-contrast information: a volume ring, a play/pause state, a short two-line title, and a connection indicator. Trying to fit a full queue or long artist names into this shape produces a screen that is technically complete but hard to read.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rectangular display: metadata and browsing
A 2.0-inch 320×240 panel gives text more horizontal room and makes a progress bar or album image easier to understand. The CoreS3 is designed around this class of interface. Use larger touch targets than you would on a phone; a music controller is often operated from a standing position or with one hand.
Do you need an I2S DAC?
No, not for a controller that operates an existing network player. If Home Assistant already controls a network speaker, receiver, or software player, the ESP32 sends service calls and displays state. Audio remains on that endpoint, so adding a DAC only increases wiring, power, and failure points.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
Yes, when the ESP32 itself must play audio. ESPHome’s I2S audio support is ESP32-only. Its media-player platform can use an internal or external DAC; documented external examples include the NS4168 and UDA1334A. The platform supports mono and stereo operation. Keep I2S signal wiring short and plan a clean ground and power arrangement around the amplifier.
Control-surface design
- ESP32-S3 board with Wi-Fi
- Rotary encoder and push switch
- Display, if visual feedback is needed
- Stable 5 V or board-approved power supply
- No DAC or speaker amplifier
Audio-endpoint design
- ESP32 board with ESPHome I2S support
- Compatible DAC or I2S amplifier
- Speaker, enclosure, and heat/power planning
- Short I2S wiring and careful pin assignment
- Firmware configured for the chosen mono or stereo path
Build a modular controller step by step
1. Identify the Home Assistant media player
Choose the exact media_player entity the knob will control. Decide whether the controller always targets one room or whether a mode button will switch between entities. A fixed target is easier to test; multi-room selection needs visible feedback so a volume change is not sent to the wrong room.
2. Create a pin map
Before wiring, make a table containing encoder A, encoder B, encoder switch, display clock, display data, chip select, data/command, reset, touch interrupt if used, and power. Use GPIOs that are actually exposed on your board and avoid pins reserved by the selected display or onboard hardware. The DevKitC-1 exposes the pins, but your final allocation is your responsibility.
3. Wire the encoder
- Connect the encoder’s A and B outputs to two digital GPIOs.
- Connect the push switch to a third GPIO and ground, using the input-pull-up arrangement supported by your ESPHome configuration.
- Connect the encoder ground to the ESP32 ground.
- Keep the encoder wires short where possible and route them away from noisy amplifier or display-power wiring.
- Turn the shaft slowly and confirm that each detent produces the intended direction before mounting the knob permanently.
4. Add the display
Follow the display controller’s required SPI or other bus wiring and use the matching ESPHome display component. Start with a static test screen showing a large number and connection status. Only add album art and multiple pages after the bus, orientation, brightness, and touch coordinates are reliable.
5. Install ESPHome and connect it to Home Assistant
- Create a new ESPHome device for the ESP32-S3 board.
- Set the board definition that matches the exact module or integrated device.
- Enter the Wi-Fi credentials and enable the native API connection.
- Compile and install the firmware over USB for the first flash; use wireless updates after the device is stable.
- Add the discovered ESPHome device in Home Assistant and confirm that sensor values and buttons appear.
Board revisions matter. An integrated device can change GPIO assignments or peripheral behavior between revisions, so verify the revision before flashing and use the corresponding ESPHome device configuration.
6. Add the encoder and button entities
The following fragment illustrates the relationship between the two encoder phases and a push button. The GPIO numbers are examples only; replace them with the pins in your map and verify the component options against the ESPHome release you install.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
sensor:
- platform: rotary_encoder
name: 'Music volume knob'
pin_a: GPIO4
pin_b: GPIO5
min_value: 0
max_value: 100
publish_initial_value: true
binary_sensor:
- platform: gpio
name: 'Music knob press'
pin:
number: GPIO6
mode:
input: true
pullup: true
inverted: true
This is a wiring and entity template, not a universal pin map. Some encoders count multiple transitions per detent. If the value jumps too far, adjust the rotary encoder resolution or the automation step rather than assuming the hardware is defective.
7. Send media-player actions
Use ESPHome automations or Home Assistant automations to translate the entities into media-player service calls. A button press can call play/pause; a second press can call next; and the rotary value can be converted to a volume value between 0 and 1 for the selected media player. Keep the conversion in one place so the display and the command use the same scale.
on_press:
then:
- homeassistant.service:
service: media_player.media_play_pause
data:
entity_id: media_player.living_room
The entity ID in this example is illustrative. Use the entity ID that exists in your Home Assistant installation. If the target player reports its own volume state, consider using that state to redraw the display after a command so the controller reflects changes made elsewhere.
8. Add display feedback
Show the value that matters at the moment: volume while turning, a play or pause state after a button press, and the current room or source when a mode changes. Avoid refreshing the entire screen on every encoder pulse if the display flickers; update the changed region or throttle redraws where the display component allows it.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →9. Calibrate in the installed enclosure
- Turn the knob one detent at a time and check direction and step size.
- Hold the knob at several angles and press it to check that the switch does not trigger from mechanical flex.
- Test Wi-Fi recovery by restarting the access point or moving the controller briefly out of range.
- Change volume from Home Assistant and from the original player control, then verify that the controller catches up.
- Run the display at the brightness you intend to use and check heat, glare, and readability from the normal listening position.
Power, enclosure, and expansion decisions
Power
USB-C 5 V is convenient for a desk controller. The Dial also documents a 6–36 V rear terminal and a battery connector, which can simplify an installed or portable design when the exact revision and power requirements are confirmed. A modular DevKitC-1 build needs a regulated supply appropriate for the board and display; do not feed a higher voltage into a pin that expects 5 V or 3.3 V.
Enclosure
Measure the board, connector overhang, encoder bushing, knob diameter, display viewing angle, and cable bend radius before designing the case. A round integrated board can be attractive but is less forgiving of a rectangular wall cutout. A modular build lets you separate the display and knob, but every extra connector becomes a possible loose or noisy connection.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
Expansion
The Dial provides PORT.A and PORT.B expansion. The CoreS3 provides Grove and M-Bus ports, along with microSD and audio-related hardware. On a DevKitC-1, reserve GPIO before adding accessories: displays, touch controllers, buttons, and I2S peripherals can consume more pins than expected.
Common failure modes and fixes
The volume changes in the wrong direction
Reverse the encoder direction in the rotary-encoder configuration or swap the A and B wires. Make one change at a time and retest slowly so you do not mask a second wiring problem.
Recommended Free Tools
One detent produces several volume jumps
Mechanical encoders can emit several transitions per click. Adjust the component’s resolution, apply debounce, or change the automation so a full detent maps to one intended step. Tune it with the final knob and panel installed, because mounting can change vibration and contact behavior.
The button triggers twice
Enable or increase debounce, confirm the switch uses the intended pull-up or pull-down mode, and check that the shaft is not pressing the switch mechanically. A loose panel nut can make a good switch appear unreliable.
The display is blank but the ESP32 is online
Check power, ground, SPI pins, chip-select and data/command assignments, reset handling, orientation, and the display controller selected in ESPHome. For an integrated board, use the device-specific configuration instead of treating the display as a generic panel.
The controller works but cannot play audio
That is expected if the build is only a control surface. Confirm that the Home Assistant media player is online and that its entity accepts playback commands. If the ESP32 is meant to be the playback endpoint, add an appropriate I2S DAC or amplifier and configure ESPHome’s I2S media-player platform; a display and encoder alone cannot produce speaker audio.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchCommands stop after a Wi-Fi interruption
Check the ESPHome API connection and design the interface so it shows an offline state. A local button press cannot control a network player while the controller or Home Assistant is disconnected. After reconnection, verify that the displayed volume is refreshed from the media player’s current state rather than from an old local value.
Quick Recap
Decision guide
- Choose M5Stack Dial if you want one integrated ESP32-S3 board, a physical knob, a compact round display, and the least wiring.
- Choose ESP32-S3-DevKitC-1 if enclosure shape, encoder feel, display replacement, or custom GPIO allocation is more important than assembly speed.
- Choose M5Stack CoreS3 if album art, readable metadata, touch navigation, and a larger screen justify a bigger device.
- Use a separate I2S DAC or amplifier only when the ESP32 itself must render audio. Omit it for a controller that operates an existing network player.
- Use the encoder’s push switch for a deliberate secondary action such as play/pause or mode selection; it adds more value than another tiny button hidden on the case.
Final checklist before ordering parts
- Confirm the exact board revision and its ESPHome support.
- Confirm the selected ESPHome and Home Assistant versions are compatible with the components you plan to use.
- Decide whether the device is a control surface or an audio endpoint.
- Reserve GPIO for the encoder, switch, display, touch, and any future expansion.
- Check the encoder’s detent and pulse behavior rather than assuming all EC11-style parts are identical.
- Choose a display that matches the information density and viewing distance.
- Verify power input, connector clearance, and enclosure dimensions.
- Plan for offline indication and state resynchronization after Wi-Fi recovery.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
