Tiny HTML5 Music Player

If you like the lightweight music player in the music section and would like to use it yourself you can find it on github: Tiny HTML5 Music Player repository

Trying to keep it simple and under 10KB with no dependencies.

Tiny HTML5 Music Player is lightweight music player with no dependencies. You just need a modern HTML5 compatible browser such as Chrome, Firefox or IE9 and later.

While being lightweight Tiny HTML5 Music Player has a couple features such as:

  • seek bar
  • colored progress on seek bar
  • colored buffered on seek bar
  • precise current time / total time of the MP3
  • keyboard shortcuts (toggle play/pause, next/previous, rewind)
  • automatic scaling of the player depending on the div size
  • automatically play the next track when the current MP3 has finished playing
  • loop when all MP3 have played
  • size currently under 8KB

All waveforms are generated with SoX and gnuplot, both available for free on Linux, Windows and OSX.

Small bash script to generate all waveforms of the MP3 in the current directory:

#!/bin/bash
# Generates waveforms of all mp3 in current folder
# PNG resolution: 980 x 60
# Dependencies: sox and gnuplot

FILES="./*.mp3"

for f in $FILES
do
    sox $f -G -r 4000 -c 1 test.dat && tail -n+3 test.dat > test.datclean

    gnuplot -p -e "set terminal png transparent size 980,60 enhanced; set yr [-1:1]; unset key; unset tics; unset border; set lmargin 0; set rmargin 0; set tmargin 0; set bmargin 0; set output '$f.png'; plot 'test.datclean' using 1:2 every 50 with lines lc rgbcolor '#000000'"
done

rm test.dat
rm test.datclean

Inside the repository you will find both minified and normal source. Feel free to use it, suggest changes and features.