🎵 Benito's Original Music
Welcome to the audio demo page! Listen to these original compositions using our beautiful Howler.js-powered audio players.
Track 1: Sketches - Rebel with a DAW
Sketches - Rebel with a DAW
I felt like some Punk Rock the other day.
I made a playlist with the help of some friends.
This track was inspired by the Victims, a Perth Band from the 70's - go check them out on Spotify!
Production Details:
- Guitar, Bass, and Drums programmed with Kontakt and Battery
- MIDI sequenced in Ableton
- Mixed down with PluginAlliance
Format:
- MP3 320k Stereo
- Quality: High Fidelity
- Genre: Punk Rock/Electronic
Track 2: Granita Dance
Granita Dance - Original Composition
It's hot, I'm melting, and I want a granita to cool me down.
Generic House Music Jam out of the MC-707 into Ableton for a mix-down and arranging.
Production Details:
- Roland MC-707
- Arturia KeyStep
- Mixed and arranged in Ableton
Format:
- MP3 320k Stereo
- Quality: High Fidelity
- Genre: House/Electronic
Track 3: I Liked You Before You Were Cool
I Liked You Before You Were Cool
With no clubs open to DJ at, a musical outlet needed to be pursued through this debut album.
An eclectic mix of electronic music birthed from COVID-19 lockdown. No rules, just musical exploration and self-discovery by synthesis, sampling and sequencing.
Production Details:
- Created during COVID-19 lockdown
- Debut album track
- Synthesis, sampling, and sequencing
- Pure musical exploration
Format:
- MP3 320k Stereo
- Quality: High Fidelity
- Genre: Electronic/Experimental
About These Recordings
These tracks were originally recorded as high-quality WAV files and have been optimized for web playback using our automatic converter:
Conversion Details
| Original Format | Output Format | Quality | File Size Reduction |
|---|---|---|---|
| WAV/AIF (Uncompressed) | MP3 320k Stereo | Maximum MP3 Quality | 86.7% smaller |
| 48kHz Sample Rate | 48kHz Sample Rate | Professional | Maintained |
| Stereo | Stereo | Full imaging | Preserved |
Original files:
- Granita Dance: WAV 48.64 MB → MP3 7.4 MB
- Sketches: WAV 40.31 MB → MP3 6.1 MB
- I Liked You: AIF 58.77 MB → MP3 12.2 MB
Before conversion: 147.72 MB
After conversion: 25.66 MB
Space saved: 122.06 MB (82.6%)**
Audio Player Features
Notice the beautiful custom audio players above! Each player includes:
- 🎯 Play/Pause Button - Large, easy-to-click control
- 📊 Progress Bar - Click anywhere to seek to that position
- ⏱️ Time Display - Current time and total duration
- 🔊 Volume Control - Click icon to mute, click slider to adjust volume
- 🎨 Beautiful Design - Gradient styling that matches the blog theme
- 📱 Mobile Friendly - Touch-optimized for all devices
Technology Stack
This audio demo showcases:
- Howler.js - Powerful HTML5 audio library
- Custom UI - Beautiful player design with progress tracking
- FFmpeg Conversion - Automatic HQ MP3 optimization
- GitHub Pages - Free static hosting
- Client-side Processing - No server needed!
Try It Yourself!
Want to add your own audio to the blog?
1. Add Your Audio File
cp your-audio.wav audio/
2. Convert to HQ MP3
python scripts/convert_audio.py --force
3. Create a Post
<audio src="../audio/your-audio.mp3" data-title="Your Track Title"></audio>
4. Publish
python scripts/generate_post.py content/your-post.md
git add .
git commit -m "Add audio post"
git push origin main
That's it! Your audio will be live with beautiful players in minutes! 🎉
Download Original Quality
Want the full quality versions?
- [Download Granita Dance](../audio/Benito - Granita Dance.mp3) (MP3 320k - 7.4 MB)
- [Download Sketches - Rebel with a DAW](../audio/Benito - Sketches - Rebel with a DAW.mp3) (MP3 320k - 6.1 MB)
- [Download I Liked You Before You Were Cool](../audio/Benito - I liked you before you were cool.mp3) (MP3 320k - 12.2 MB)
Creating Your Own Music Blog
This demo shows how easy it is to create a professional music blog with:
- ✅ Beautiful audio players automatically generated
- ✅ HQ MP3 conversion with one command
- ✅ Free hosting on GitHub Pages
- ✅ No backend required - pure static files
- ✅ Mobile responsive - works everywhere
- ✅ Simple workflow - markdown to live site
Perfect for:
- 🎼 Musicians sharing their work
- 🎙️ Podcasters publishing episodes
- 🎓 Teachers sharing audio lessons
- 📻 Anyone who wants to share audio online!
Performance Stats
Page Load Time
- HTML: ~5 KB
- Howler.js: ~20 KB (from CDN)
- Audio: Streams on-demand
- Total Initial Load: < 30 KB
Audio Streaming
- Buffering: Progressive (loads as you listen)
- No Preload: Audio only loads when you click play
- Bandwidth Friendly: Efficient streaming
Browser Compatibility
These audio players work on:
- ✅ Chrome/Edge (Desktop & Mobile)
- ✅ Firefox (Desktop & Mobile)
- ✅ Safari (macOS & iOS)
- ✅ Opera
- ✅ Samsung Internet
- ✅ Any modern browser with HTML5 audio support
Keyboard Shortcuts
When a player is focused:
- Space: Play/Pause
- M: Mute/Unmute
- Arrow Left: Seek backward
- Arrow Right: Seek forward
What's Next?
This is just the beginning! You could:
- 📀 Create a full album page
- 🎤 Start a podcast series
- 🎹 Share music tutorials
- 🎧 Build a listening playlist
- 🎵 Showcase your music portfolio
The possibilities are endless with this simple yet powerful setup!
Feedback Welcome!
Enjoy the music? Have questions about the setup? Let me know!
Happy listening! 🎧
This demo page showcases the complete audio workflow: from raw WAV files to optimized web-ready MP3s with beautiful custom players - all hosted for free on GitHub Pages!