PHP / Генерация изображения с 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.

pensionary.ru

Читатели рекомендуют также прочесть по этой тематике:

1. Web-разработка / [Из песочницы] Загрузка файлов с помощью HTML5 и сколько раз мы сказали нехорошие слова
2. Game Development / [Из песочницы] Unity3d и развеивание некоторых мифов
3. Стартапы / UVoiceMe — сервис интеграции шлюзов IP-телефонии
4. Информационная безопасность / Upgrade
5. Алгоритмы / Самораспаковывающийся HTML