Generate waveform image from mp3 files using PHP

I would like to share one way to embed an audio player for sites using jQuery. Namely - a player in the style of the popular service Soundcloud , made in HTML + CSS + JS. In pursuit of a recent article about an interesting player jPlayer .

The player itself consists of jPlayer, a certain amount of uncomplicated layout, and the main component - pictures from the waveform of the file being played (this is a vivid picture, which shows the signal amplitudes plotted on a time scale).


')
The results of this doping can be found by downloading the archive with everything you need: http://test.dis.dj/wave/ (there is also a player interface demo and an archive with it).

Now more about the process

Having found a script in google at http://andrewfreiday.com/2010/04/29/generating-mp3-waveforms-with-php/ , and making sure that it works properly, I decided to finish it a bit to fit my needs. Namely, add a console mode to it, and also make the image transparent in the middle, where the waveform is located, and opaque at the edges, so that you can display the progress of playback right in the player, as is done with Soundcloud.

The script works like this: recodes the file to wave format by calling the lame encoder, then parses the resulting file and generates the amplitudes, filling the array with them. After that, an image is generated from these amplitudes, which is then compressed and given as a result of the work.

Use the resulting script as follows:

1. Make sure PHP is in the system’s PATH variable.
2. > wave file.mp3 - generates an image for a specific file
3. > wave-all - generates images for all files in the folder
4. Optionally, you can use the index.php file, accessing it through a browser

The layout is quite simple - an absolute layer with a waveform as a background or a picture, as it is more convenient, two more absolute layers below it, with which JS sets the width (the progress bar of playback and upload). All this stuff is wrapped in another layer with position: relative , in order to avoid impacts on the surrounding layout elements. The rest - controls, hinge and decorations. The demo is available on the download page.

The finished result can be seen at http://dis.dj/music/seamless.html .

Using the player

The player is rendered in any container, for this you need to call it like any other jQuery plugin:

 $(function(){ $('#waveform').waveform({ media: { oga: "http://dis.dj/files/tracks/DiS - Seamless.oga", m4a: "http://dis.dj/files/tracks/DiS - Seamless.m4a", mp3: "http://dis.dj/files/tracks/DiS - Seamless.mp3" }, image: "http://dis.dj/files/tracks/DiS - Seamless.png", title: "DiS - Seamless", duration: 186, size: 7442977, durationFormatted: "3:06", sizeFormatted: "7.10MB", createDate: "5 \u0434\u0435\u043a\u0430\u0431\u0440\u044f 2010 03:32:20", path: "jplayer/" }); }); 

Data on the length and time are needed for a beautiful display before the track is loaded, we will assume that this information is already cached somewhere.

With the "outside world" player interacts with the help of calls:

 $(function(){ $("#waveform").waveform("play"); $("#waveform").waveform("pause"); $("#waveform").waveform("stop"); $("#waveform").waveform("getTrack"); //       ( ,  ) $("#waveform").waveform("setTrack", {…}); //      $("#waveform").waveform("getPlayer"); //   jPlayer',       (.  jPlayer) });