Multipurpose HTML5 Audio Player With JavaScript – calamansi.js

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