Trying to keep it simple and under 10KB with no dependencies, you just need a modern HTML5 compatible browser. The waveforms were generated with SoX and gnuplot, both available for free on Linux, Windows and OSX.
Bash script to generate waveforms of all mp3 in the current folder:
#!/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
Import both tinyplayer.css and tinyplayer.js and add this script to your page.
Usage:
TrackList =
[
{
url:'http://www.mrt-prodz.com/public/mp3/whwd.mp3',
title:'What Have We Done',
year:'2007'
},
{
url:'http://www.mrt-prodz.com/public/mp3/right-of-stupidity.mp3',
title:'Right of Stupidity',
year:'2004'
}
];
//player([tracklist], [show waveform?], [show help?])
tinyplayer(TrackList, true, true);