MP3 waveforms with PHP

If you are thinking how soundcloud.com generates the waveform for sound MP3 player?

There are some audio processing libraries used to process MP3 files to WAV and then PNG / SVG images..

1. LAME MP3 encoder/decoder

$ lame input.mp3 -f -m m -b 16 –resample 8 resampled.mp3 && lame –decode resampled.mp3 output.wav

2. SOX – Sound eXchange

$ sox output.wav −n spectrogram
$ sox output.wav -n spectrogram -Y 140 -l -r -o output.png

3. wav2png – Creates waveform pngs out of audio files

$ sox mp3-song.mp3 -c 1 -t wav – | wav2png -o mp3-song.png /dev/stdin
$ wav2png –foreground-color=2e4562ff –background-color=00000000 -o  output.png   input.wav

4. wavesurfer.js is a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/plugin/wavesurfer.playlist.min.js"></script>

<div id="waveform"></div>

<script>

var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#00FF00',
progressColor: '#FF0000'
});


wavesurfer.load([MP3-File-URL]);

wavesurfer.on('ready', function () {
wavesurfer.play();
$('.waveform__duration').text( formatTime(wavesurfer.getDuration()) );
});

wavesurfer.on('audioprocess', function () {
$('.waveform__counter').text( formatTime(wavesurfer.getCurrentTime()) );
});

</script>

WaveForm generated using SOX

Links:

https://github.com/afreiday/php-waveform-png
https://github.com/afreiday/php-waveform-svg
https://github.com/beschulz/wav2png
https://github.com/beschulz/wav2json
http://www.rarewares.org/mp3-lame-bundle.php