MUSIC PLAYER PROGRAMMING
VAMP - Vertical Azure Music Player
Vertical Azure Music Player — or VAMP — started as a simple question: why do all web-based audio players look the same? The familiar horizontal bar, a scrubber, a play button, maybe a volume knob. Functional, yes. But uninspiring.
Most audio players are built around the controls; the playback bar is the star of the show, and everything else orbits it. VAMP flips that idea on its head. The artwork is the centrepiece. The waveform, the metadata, the glowing status dot; they all exist to serve the music, not the other way around.
The vertical orientation came directly from that philosophy. A tall, portrait-style panel mirrors the shape of an album cover, putting the visual identity of the track front and centre. It feels closer to holding a record than clicking a media bar. That single design decision shaped everything that followed; the layout, the sidebar system, the colour-per-track theming; all of it flows from choosing to build around the music rather than despite it.
VAMP is built entirely in vanilla HTML, CSS, and JavaScript; no frameworks, no dependencies beyond Font Awesome icons and the Actor typeface from Google Fonts. That was a deliberate choice. Every line of behaviour is explicit and traceable, which matters when you’re building something you intend to maintain, extend, and eventually and possibly convert into a proper WordPress plugin.
The waveform is drawn on two stacked HTML5 canvas elements. The background canvas holds the un-played bars in a muted white; the foreground canvas mirrors the same shape in the current accent colour, clipped progressively as the track plays. The result is a scrubber that feels genuinely connected to the audio rather than floating above it.
Colour theming is handled through a single CSS custom property, --player-accent , which gets updated dynamically whenever a track loads or the user selects a custom colour. Gradients, glows, highlights, and waveform fill all inherit from that one variable. Changing the accent colour from azure to coral takes a single line of JavaScript and the entire interface responds instantly.
Audio processing runs through the Web Audio API, enabling a three-band equaliser (bass, mid, treble via bi-quad filters), real-time playback speed adjustment without pitch shifting, and smooth fade in and fade out on play and pause. These aren’t cosmetic features; they’re routed directly into the audio graph before output.
As VAMP grew, it became clear that a single sidebar for settings would quickly become unmanageable. The solution was a tabbed interface inside the settings panel; each tab grouping related controls logically rather than cramming everything into one scrollable list.
Currently there are four tabs. Playback handles auto-play, track memory, and volume defaults. Appearance houses the dark and light mode toggles alongside the full colour palette. Audio exposes the equaliser sliders, playback speed presets, crossfade duration, and fade effects. Visual controls accessibility options; high contrast mode, reduced motion, larger text; as well as animation speed, waveform style, glow effects, and glassmorphism blur.
The tab bar itself is horizontally scrollable, so adding more tabs in future phases won’t break the layout. It was built to scale from the start.
A few smaller decisions make a disproportionate difference to how VAMP feels to use.
The status dot glows green when playing and shifts to the track’s accent colour when paused; a tiny detail that makes the player feel genuinely responsive. The metadata panel uses a glassmorphic card that sits over the album art without obscuring it. Keyboard shortcuts cover all the essentials. The playlist sidebar groups tracks by release year with collapsible headers, right-click context menus, and a live search filter. Every setting persists across sessions via localStorage.
None of these are revolutionary ideas individually. Together they add up to something that feels considered rather than assembled.
VAMP is still actively being developed. A keyboard shortcut customisation tab is next on the list, followed by a possible queue system, sleep timer, and listening statistics. The longer-term goal is to package the whole thing as a WordPress plugin; with a proper database-backed Music Library class, multi-instance shortcode support, and native Gutenberg and Elementor blocks.
The foundation is solid. Everything else is just time.
MUSIC DATABASING PROGRAMMING
MR. AZDAB - Media Recon Azure Database - Music Edition
In the chaotic landscape of digital asset management, where files are often buried under layers of uninspired UI and cumbersome workflows, a new titan has emerged from the shadows. Born from the necessity of precision and the desire for a high-octane aesthetic, MR. AZDAB, the Media Recon Azure Database – Music Edition, is more than just a tool; it is a surgical instrument designed for the meticulous architect of digital music.
The design philosophy of MR. AZDAB began with a singular, uncompromising directive: visibility through contrast. In a world of “safe” grey-on-white interfaces, MR. AZDAB embraces the darkness. The decision to utilise a deep, “Glass-v2” aesthetic; composed of semi-transparent blacks and vibrant Azure glows (#00d2ff), wasn’t just an aesthetic choice; it was a functional one.
Every pixel of the interface is tuned for focus. The “Azure-on-Black” theme for functional buttons ensures that the “Link” and “Process” actions are never lost in the noise. During the design phase, we obsessed over the “Tactile Weight” of the interface. We didn’t want a flimsy UI. We wanted “thick” rows, media cards with 22px of vertical internal padding to give every file in the Recon library a sense of physical presence. The spacing was subjected to rigorous standardisation, locking in 25px vertical gaps between the Track Title, the Data Grid, and the Description blocks to create a layout that breathes with mathematical rhythm.
Underneath the glowing cyan exterior lies a robust engine built to communicate directly with the heart of WordPress. The build process was centered on the concept of “Momentum Stability.” We moved away from generic file handling and toward a Media Recon architecture.
The REST API Pulse
MR. AZDAB doesn’t just “look” at your files; it performs a deep scan. By leveraging the WordPress REST API (/wp-json/wp/v2/media), the tool establishes a real-time link to your server’s library. The technical challenge was ensuring this communication remained fluid. We implemented an asynchronous fetch logic that handles pagination and search filters with zero lag, allowing the user to scroll through hundreds of assets while the “Synchronising” progress bar provides constant visual feedback of the data stream.
Metadata Extraction & Precise Logic
One of the most passionate breakthroughs in the MR. AZDAB build was the Metadata Auto-Extraction engine. We realised that manual data entry is the enemy of creativity. Now, when an audio file is “Linked,” the tool surgically extracts the title.rendered and media_details directly from the WordPress database.
We went deeper than simple filenames. We implemented a “Smart Fallback” logic to ensure that if a title is missing, the slug is meticulously cleaned—stripping URL hyphens and underscores—before being transformed into a professional, capitalised string. Furthermore, the tool automatically calculates and formats durations into a crisp MM:SS display, populating the database in a single click. To ensure data integrity, a custom HTML entity decoder was integrated to strip out ampersands and special characters that WordPress often injects, leaving only the pure, professional text intended by the user.
MR. AZDAB is built for the “Power User.” It treats data as a fluid asset that needs to be moved, backed up, and transformed.
The Data Console: This is the mission control of the tool. It features an Azure-on-Black command row that allows for the instant generation of JavaScript Arrays, CSV strings, or HTML Tables. It is designed for the developer who needs to move data from the manager into a live production environment without friction.
The Snapshot Manager (v12): Recognising that browser sessions can be volatile, we built a local-storage-based snapshot system. This allows the user to “freeze” their progress in time, creating timestamped archives of their entire database that can be restored instantly.
Momentum Stability: Every dynamic update in MR. AZDAB utilises
innerTextandtextContentrather thaninnerHTML. This was a critical design decision to ensure the tool remains fully compliant with WordPress XSS filtering and “Functions” security protocols. It is a tool that plays by the rules while looking like it belongs in a high-security mainframe.
What truly sets MR. AZDAB apart is the passion for the “User Experience” Most tools ignore the micro-interactions, but MR. AZDAB was forged in the fires of refinement. Every button, from the “Create Snapshot” trigger to the “Link” buttons in the Recon library, features fixed dimensions and high-contrast borders to ensure the user never misses a beat.
MR. AZDAB is not just a database manager; it is a statement. It is the result of a meticulous build process where design meets technical aggression. It is for those who demand that their tools look as sharp as the data they manage. Welcome to the future of media management. Welcome to MR. AZDAB.
Extended Database Entry Browsing
I’m currently mulling the addition of a side bar that lists all entries on the database for easy select, entry management, replication, etc.
