Dradis music player v0.2

Demo

The Dradis music player v0.2 demo is available here.

Introduction

You have a web server set up with a music folder so you can listen to your favorite music on the go. But you need a simple yet efficient HTML5 music player with a playlist and covers without too much hassle. You may have thousands of music files and no time to build a pretty playlist by hand.

Features

• Easy setup in 3 minutes.
• Searchable playlist.
• Covers support.
• Oscilloscope, spectrum analysis and spectrogram.
• Skip to previous or next folder.
• Random and loop playing.
• Volume bar, mute button and peak meter.
• Download the current track instantly.
• Numerous keyboard shortcuts.
• Support for assistive technologies (WAI-ARIA).
• Vibration feedback for supported devices.
• Light/dark modes interface.
• State of the music player saved in web browser's local storage.
• Share a link to the music player with track and time pre-selected.
• A complete user manual.
• … and much more!

Screenshots

User feedback

好用! 这是一个小但有用的播放器。

Le lecteur de musique de DRADIS est absolument top, combinant une installation rapide et une facilité d'utilisation remarquable.

C'est un choix parfait pour ceux qui recherchent un lecteur à la fois simple, fonctionnel et agréable à utiliser.

Your feedback is important to us. Send your thoughts to music-player@dradis.be.

Quick setup

Generate a playlist file using the following Linux/MacOS command in the root of your music folder:

$ find ./ -type f \( -iname "*.aac" -or -iname "*.flac" -or -iname "*.ogg" \
        -or -iname "*.mp3" -or -iname "*.mp4" -or -iname "*.wav" \
        -or -iname "*.webm" -or -iname "*.apng" -or -iname "*.avif" \
        -or -iname "*.bmp" -or -iname "*.gif" -or -iname "*.jfif" \
        -or -iname "*.jpeg" -or -iname "*.jpg" -or -iname "*.pjp" \
        -or -iname "*.pjpeg" -or -iname "*.png" -or -iname "*.webp" \) \
        | sort --numeric-sort > playlist.txt

Download the file player.html (73kB) into the root of your music folder:

$ wget -q https://dradis.be/music-player/player.html

Navigate to the file player.html in your web browser and enjoy!

User manual

For more information, refer to the user manual.

Change log

version 0.2:

Created a unique hash used in local storage to separate multiple instances on the same website.

Better, faster help screen. Added a help button on mobile, and handling of the back button.

Sped up the playlist heavy operations.

Error handling: "The play() request was interrupted" (https://goo.gl/LdLk22).

Gesture handling: left/right and up/down to skip a track or folder.

Clicking the playlist starts playing the selected track if in pause.

Synchronized local storage values in case of multiple instances of the same music player.

Changed the audio pipeline to use gain after the analyser.

Better handling of visualisations change when the cover is still loading.

Fourth vizualisation: spetrogram.

Added a little "Now playing" popup on mobile.

Implemented mediasession metadata and published the music player functionnalities.

Added a logo on the loading and help screens.

Big numbers formatting.

Lot of bug fixes.

Reorganized sections of code.

version 0.1:

First pre-release.

Contact

Please use music-player@dradis.be to contact us. Feedback is appreciated. Say hello!