Генерация изображения с waveform из mp3 файлов с помощью PHP

Хотел бы поделиться одним из способов внедрения проигрывателя аудиофайлов для сайтов, использующих jQuery. А именно — плеером в стиле популярного сервиса Soundcloud, сделанном на HTML+CSS+JS. В догонку к недавней статье об интересном плеере jPlayer.

Сам плеер состоит из jPlayer'а, некоторого количества нехитрой верстки, и главного компонента — картинки с waveform проигрываемого файла (это наглядная картинка, на которой изображены амплитуды сигнала, отложенные по шкале времени).



С результатами этого допиливания можно ознакомиться, скачав архив со всем необходимым: http://test.dis.dj/wave/ (там же есть демка интерфейса плеера и архив с ним).

Теперь поподробнее о процессе

Найдя в гугле скрипт по адресу http://andrewfreiday.com/2010/04/29/generating-mp3-waveforms-with-php/, и убедившись, что он работает исправно, я решил немного допилить его под свои нужды. А именно добавить в него консольный режим, а также сделать картинку прозрачной в середине, где находится waveform, и непрозрачной по краям, чтобы можно было отображать прогресс проигрывания прямо в плеере, как это сделано у Soundcloud.

Скрипт работает так: перекодирует файл в wave формат с помощью вызова lame encoder'а, затем разбирает полученный файл и генерирует амплитуды, заполняя ими массив. После чего по этим амплитудам генерируется картинка, которая затем сжимается и отдается как результат работы.

Использовать полученный скрипт можно следующим образом:

1. Убедиться, что PHP указан в переменной PATH в системе
2. >wave file.mp3 — генерирует изображение для конкретного файла
3. >wave-all — генерирует изображения для всех файлов в папке
4. Опционально можно использовать файл index.php, обращаясь к нему через браузер

Верстка совершенно простая — абсолютный слой с waveform в качестве фона или картинки, как удобнее, под ним еще два абсолютных слоя, которым JS задает ширину (прогрессбар проигрывания и закачки). Все это добро обернуто в еще один слой с position: relative, дабы избежать воздействий на окружающие элементы верстки. Остальное — органы управления, навеска и украшательства. Демка доступна на странице скачивания.

Готовый результат можно наблюдать по адресу http://dis.dj/music/seamless.html.

Использование плеера

Плеер рендерится в любой контейнер, для этого надо вызвать его как любой другой jQuery плагин:

$(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/"
	});

});

Данные о длине и времени нужны для красивого отображения до загрузки трека, будем считать, что эта информация уже где-то кешируется.

С «внешним миром» плеер взаимодействует с помощью вызовов:

$(function(){
	$("#waveform").waveform("play");
	$("#waveform").waveform("pause");
	$("#waveform").waveform("stop");
	$("#waveform").waveform("getTrack"); // возвращает объект с инфо о треке (в формате, описанном выше)
	$("#waveform").waveform("setTrack", {…}); // ставит в плеер новый трек
	$("#waveform").waveform("getPlayer"); // возвращает инстанс jPlayer'а, с которым можно производить любые манипуляции (см. доку jPlayer)
});