Skip to main content

Audioplayer

The Files Gallery audioplayer allows you to conveniently play audio tracks in a playlist, without having to open the modal to listen to each track. It can either play audio tracks from the current folder, or be setup to play audio files from a global location.

Audioplayer Demo

  1. Autoplay and navigate audio tracks in current folder.
  2. Click to play tracks directly from layout without opening the modal interface.
  3. Audioplayer playlist inherits current folder sort and filter.
  4. Browse other files while playing audio tracks.
  5. Play tracks from current folder or from a global location.
  6. Displays album cover art for audio tracks in the layout.

Disabled by Default

The audioplayer is disabled by default, since the separate interface could cause confusion. The audioplayer is useful for galleries with lots of audio tracks, for convenient listening.

Options​

The audioplayer can be enabled and configured from Javascript config.

_c.config = {

  // audioplayer config / custom options + plyr options https://github.com/sampotts/plyr?tab=readme-ov-file#options
  audioplayer: {
    // controls: [], // Plyr custom controls html/array / very complex, please avoid
    autoplay: true, // autoplay
    enabled: false,       // entirely enable or disable audioplayer
    include_dirs: '',     // include dirs regex (will exclude all dirs except those that match the regex)
    exclude_dirs: '',     // exclude dirs regex
    autopause: true,      // pause player when video/audio opens in modal/popup
    autoplay_click: true, // attempt to autoplay audio on document.click if initial autoplay is blocked by browser policy
    list_click: true,     // play audio files in audio player when clicked in the layout
    filter: true,         // synchronize playlist with list filters / if false, all items in dir will play, regardless of filter
    sort: 'list',         // list, initial, shuffle, name_asc, name_desc, date_asc, date_desc
    autohide: true,       // hide audioplayer on scroll down, re-emerge on scroll up
    remember_state: true, // remember audioplayer playing state when navigating to new folders with audio tracks / also uses localStorage
    loop: true,           // loop tracks
    autoplay_next: true,  // autoplay next track when current track ends (if there are multiple tracks)
    allow_nav: true,      // allow navigation between tracks in current dir with next/previous buttons
    files: '',            // root path to load tracks from 'path/music' or array ['path/to/track1.mp3', 'path/to/track2.mp3'] (can be absolute)
    mini_default: false,  // mini player is default
    mini_remember: true,  // remember mini player state localStorage
    history: _c.config.history, // listen to #hash on page load and push history / a bit dodgy ...
    title: '%title% — %artist%', // title template, from ID3 tags if available / %filename% %nicename% %title% %artist% %album%
    title_default: '%nicename%', // default title, when ID3 tags don't exist for file or title is disabled
    title_autohide: true, // autohide title, show only on hover and temporarily when new track loads
    title_show_duration: 3000, // temporarily show title for 3 seconds when new track loads
  }
}

Global Audioplayer​

By default, the audioplayer will play audio tracks from the current dir. If you want to create a global audioplayer that plays tracks from a pre-assigned dir, you have three options:

_files/audio/*​

Upload global audio files to storage path _files/audio/*. When Files Gallery detects audio files in this dir, it will automatically load them into the global audioplayer.

Specific dir​

Assign Javascript config audioplayer files option to load tracks from an existing dir in your root.

files: 'path/to/music'

Array of tracks​

Assign Javascript config audioplayer files option to load an array of tracks by URL.

files: ['./local/path/to/track.mp3', 'https://www.website.com/path/to/track.mp3']