Gear Player
Sleek, Modern & Innovative
About
Gear Player is a complete new way of listening to your favourite sound tracks. Crafted with HTML5 and featuring SVG animations, a Canvas Equalizer and an intuitive interface. It is mobile friendly and allows you to literally spin across your album in the blink of an eye.
Once open it will engage the user with a colourful, smooth user interface. When closed it will still show the progress of the song inside a tiny docked player without hurting the navigation experience. It supports also the SoundCloud API.
Demos
Features
With an intuitive interface and a responsive design, Gear Player offers an immersive experience to your users when it comes to music playback. You can see it literally come to live and interact with it in several ways.
Supported Media
Gear Player is built on top of the popular SoundManager2 which allows you to feed MP3 files without worrying about crossbrowser issues. It also supports the SoundCloud API natively.
When the Flash Plugin is available you are also allowed to use MP4, M4A and AAC files.
Initialization
Built as jQuery Plugin you can handle it with ease. Just launch it once and it will run for the whole page.
$(".gearWrap").gearPlayer();You can handle albums through JSON files which will be dynamically loaded to any DOM object with the data-gearPlaylist attribute.
Controls
Gear Player supports keyboard shortcuts. Call the next song with → or the previous one with ←. Press ↑ while open to increase volume, and ↓ to decrease it.
You can do the same with your mousewheel. Move your cursor over the console and roll to adjust the volume. The player is context sensitive!
Works with AJAX
Are you building a website that requires Ajax calls? No problem! Gear Player supports a refresh method that scans new albums and adds them to its routine.
When you're done and want to get rid of the player there is also a public destroy method to free up resources and have a proper Garbage Collection.
Mobile Friendly
Small screens will benefit from a special treatment and allow the player to slide when the playlist button is touched. This way you can scroll through the playlist with just a finger. Pretty much intuitive like a native app!
The circular gear is animated with the TweenMax Draggable component.
Customizable
Gear Player can be customized in several ways. It comes with optimized default values, but you're free to play with over 40 parameters. Skin the player by overwriting the existing stylesheet with a custom one.
Integrating it inside your own projects will be a piece of cake.
SVG Animations
The player uses Raphael.js as rendering library and provides you smooth animations driven by Greensock.
No matter what resolution and what kind of display you're on, SVG renders well on any device. No more jagged edges!
Canvas Equalizer
When Flash Player is made available you'll be enabled to view a wonderful, animated, circular equalizer that displays real waves from your music.
You can also enable peak values to animated the selected sector and get a complete immersive experience.
Innovative
Gear Player pushes HTML5 to its limits by using SVG, Canvas and even Flash to provide a complete new way of listening to your sounds.
Despite this it provides an intuitive user interface and engages for its simplicity.