Author: | voerro |
---|---|
Views Total: | 7,067 views |
Official Page: | Go to website |
Last Update: | February 26, 2020 |
License: | MIT |
Preview:

Description:
calamansi.js is a responsive, customizable HTML5 audio player that works with any audio files/audio streams and supports themes, ID3 reading, playlist, and more.
Basic Usage:
1. Insert the minified version of the calamansi.js library into the document.
<link href="dist/calamansi.min.css" rel="stylesheet" /> <script src="dist/calamansi.min.js"></script>
2. Create a basic inline audio player.
<span class="calamansi" data-skin="dist/skins/in-text" data-source="https://www.jqueryscript.net/dummy/1.mp3"> Play Song </span>
Calamansi.autoload();
3. Create a modern audio play with a theme of your choice. All possible themes:
<div style="width: 200px; height: 200px;"> <div id="calamansi-player-example"> Loading ... </div> </div>
new Calamansi(document.querySelector('#calamansi-player-example'), { skin: 'dist/skins/ayon', playlists: { 'My List': [ { source: '1.mp3', }, { source: '2.mp3', }, , { source: '3.mp3', }, ], }, defaultAlbumCover: 'cover.png' });
4. Possible options with default values.
new Calamansi(document.querySelector('#calamansi-player-example'), { // infinite loop or not loop: false, // shuffle playlist or not shuffle: false, // 0-100 volume: 100, // preload track info or not preloadTrackInfo: false, // load track info on play or not loadTrackInfoOnPlay: true, // path to the default cover image defaultAlbumCover: '' });
5. API methods to control the audio player with JavaScript.
// Change the playback rate instance.changePlaybackRate(volume) // Change the volume (0.0-1.0) instance.changeVolume(volume) // Load an audio source instance.load(source) // Pause instance.pause() // Play instance.play() // Play the current track from start instance.playFromStart() // Seek to a time in seconds instance.seekTo() // Stop instance.stop() // Upload instance.unload() // Get the current play list instance.currentPlaylist() // Get the current track instance.currentTrack() // Destroy the instance instance.destroy() // Go to the next track instance.nextTrack() // Back to the prev track instance.prevTrack() // Switch to another playlist instance.switchPlaylist(index) // Switch to another track instance.switchTrack(index, startPlaying = false) // Toggle infinite loop instance.toggleLoop() // Toggle shuffling of playlist instance.toggleShuffle()
6. Event listeners.
instance.on('initialized', Callback); instance.on('canplaythrough', Callback); instance.on('loadeddata', Callback); instance.on('loadedmetadata', Callback); instance.on('pause', Callback); instance.on('play', Callback); instance.on('playlistLoaded', Callback); instance.on('playlistReordered', Callback); instance.on('playlistSwitched', Callback); instance.on('ratechange', Callback); instance.on('stop', Callback); instance.on('timeupdate', Callback); instance.on('trackEnded', Callback); instance.on('trackInfoReady', Callback); instance.on('trackSwitched', Callback); instance.on('volumechange', Callback);
7. Props.
// current playback time audio.currentTime // duration in seconds audio.duration // current playback rate audio.playbackRate // current volume audio.volume // DOM element el // Player ID id