KindaPlayer is a simple wrapper over the SoundManager2 engine. It is implemented using the RightJS JavaScript framework and has the following features
- Simple, fully HTML/CSS based design
- Easily extensible OOP construction
- Can work as a standalone widget
- Can work as an auto-popup for links
- Follows RightJS UI conventions
Pragmatical usage
var player = new KindaPlayer('/that/url.mp3', {
controls: ['start', 'stop']
});
var player = new KindaPlayer([
'url1.mp3',
'url2.mp3',
'url3.mp3'
]);
Automatic links processing with popups
<a href="/that/url.mp3" rel="kinda-player">Play me!</a>
You also can create albums of links
<a href="track1.mp3" rel="kinda-player-album">Track 1</a>
<a href="track2.mp3" rel="kinda-player-album">Track 2</a>
<a href="track3.mp3" rel="kinda-player-album">Track 3</a>
| Name | Default | Description |
|---|---|---|
| controls | 'prev play stop next mute list' | the list and order of the control buttons |
| showFx | 'fade' | popup version visual effect |
| showDuration | 400 | popup version visual effect duration |
| scrollFx | true | marker if it should show a scrolling fx on the title |
| size | 'full' | 'full' or 'mini' |
| volume | 100 | initial sound volume |
| minVolume | 20 | minimal sound volume |
| maxVolume | 150 | maximal sound volume |
| useID3 | true | will overwrite the titles when ID3 tags available |
| loop | true | automatically go the the next position when finished |
| loopDealy | 4000 | delay in ms between songs in a loop |
| showPlaylist | true | show or not the playlist by default |
| popupLinks | 'a[rel^=kinda-player]' | css-rule for hijackable links |
| albumLinks | 'a[rel^=kinda-player-album]' | css-rule for hijackable links of albums |
| autoplay | false | automatically start playing popup-players |
This player works with the following events
- play
- pause
- resume
- stop
- finish
- load
- error
- loading
- playing
- select
- mute
- unmute
- jump
- volume_change
You can work with them in any standard way of how RightJS deal with events
| Method | Description |
|---|---|
| select(index) | Selects a track out of the playlist |
| play(index) | Starts to play the track |
| pause() | Pauses the playback |
| toggle() | Toggles playback pause |
| stop() | Stops the playback |
| next() | Starts to play the next track |
| prev() | Starts to play the previous track |
| mute() | Toggles the sound |
| setVolume(int) | Sets the sound volume (0..100) |
| setPosition(int) | Sets the playback position in percents (0..100) |
| setPlaylist(mixed) | Sets the playlist tracks |
| addToList(url[, title]) | Appends a track to the playlist |
| insertTo(element[, position]) | Inserts the player into the given element |
| showAt(element) | Shows the player as a popup at the given element |
| hide() | Hides a popup player |
For the style adjustments reference see the elements structure description inside of
the src/kinda_player.css file.
To apply the dark theme on the player, just copy the src/kinda_player_dark.css file
into your stylesheets directory and include it on your page the usual way
To build the source I use FrontCompiler the Ruby based JavaScript compression tool. Therefore you need to have Ruby environment and the FrontCompiler installed. After that just say
rake build
And grab the build at the build/ directory
This project uses the SoundManager2 project engine and released under terms of modified BSD-license