Reza, and the case for standing still
Reza asked what he should do with his hands. The honest answer is nothing, and it takes about half an hour to believe it.
Audio content is frequently overlooked in WordPress site design, relegated to embedded third-party players that clash with professional design systems. Sky Addons Audio Player widget brings a fully customisable audio experience to WordPress pages — styled entirely through Elementor’s control system to match the visual quality of the surrounding site.
The widget implements a custom audio player built on the HTML5 Audio API with all controls — play and pause buttons, progress bar, volume slider, and track information — rendered as CSS-styled elements rather than browser-native controls. This ensures consistent appearance across Chrome, Firefox, Safari, and Edge regardless of each browser’s default audio player implementation. Play and pause button icons are configurable from any Elementor icon library icon, so the player can carry the site’s brand iconography rather than a generic triangle.
For podcasters and content creators, the audio player supports chapter markers — configurable timestamps within a single audio track that correspond to sections, episodes, or key topics. Listeners click a chapter marker to jump directly to that section, improving the listening experience for interview podcasts where guests speak at different volumes or for courses where lessons are recorded as single long tracks. Chapter titles, timestamps, and URLs are managed through a repeatable field interface within the widget controls.
Volume controls include a hide volume on mobile option that removes the volume slider from mobile layouts where touch volume adjustment is handled by device hardware. The widget respects system-level volume settings and does not override them, maintaining expected mobile behaviour. Initial volume level is configurable, and the player can be set to autoplay (with browser autoplay policy compliance) or begin playback only on explicit user interaction. The progress bar supports keyboard navigation, allowing users to seek to any position within the track.
Where supported by the browser, waveform visualisation renders an audio waveform alongside the progress bar, giving listeners a visual representation of the audio landscape. Silence sections appear as gaps, loud sections as peaks. This is not only visually distinctive but practically useful for interview podcasts where guests speak at different volumes, or for music tracks where verse and chorus sections have different intensities. The waveform colour is configurable to match the site’s design system.
Keyboard controls handle play/pause (spacebar), seek forward and back (arrow keys), and volume adjustment (up and down arrows). Screen reader labels are applied to all interactive elements, and focus management is appropriate when playback begins or ends. Multiple audio player instances on a single page are fully supported, each independently controllable and each maintaining its own playback state — meaning a course platform can display multiple lesson recordings on one page without conflict.
Comments are closed.