Multipurpose HTML5 Audio Player With JavaScript – calamansi.js

Category: Javascript | February 26, 2020
Author: voerro
Views Total: 145
Official Page: Go to website
Last Update: February 26, 2020
License: MIT

Preview:

Multipurpose HTML5 Audio Player With JavaScript – calamansi.js

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

You Might Be Interested In:


Leave a Reply