MP3 waveforms with PHP


Hits: 6835  

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

soundcloud-waveform

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

MP3 to WAV to PNG

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

wavesurfer.js

<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

WaveForm Generator 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

Published by

Sandeep Verma

I’m an Entrepreneur. I’m proud to work as Blogger, LAMP Programmer, Linux Admin, Web Consultant, Cloud Manager, Apps Developer, Searcher. Concentrate > Observe > Imagine > Launch