Как вставить аудиозапись (mp3) в свой сайт
12/05/2008, Тимофей
Немного разбавим наш блог технической заметкой. Дело в том, что мы в церкви записываем проповеди каждую неделю и затем вставляем их на свой блог. Вроде бы простая задача, но, тем не менее, мы все же столкнулись с некоторыми проблемами, о которых хотелось бы написать. Возможно, кому-то это поможет.
1. Чем записывать звук? Мы используем бесплатную программу Audacity, которая доступна для Windows, Linux и Mac OS X. Перед записью очередного сеанса желательно создать проект, сохранить “безымянное” под каким-нибудь именем. Программа затем будет сохранять временные файлы проекта в подпапку в той папке, куда Вы сохранили файл своего проекта. Это очень удобно и временные файлы могут пригодиться для восстановления звука при сбое программе (у нас пока не было сбоев, но все же важно знать о такой возможности). Временные файлы пишутся в стандартном формате, с расширением au. Для одночасового понадобится примерно 1-1.5 Гбайта свободного места на жестком диске. После окончания сеанса сохраните проект (Ctrl-S) и сделайте экспорт всей записи или нужного фрагмента в WAV-формат.
2. Чем конвертировать в mp3? Мы используем бесплатную программу Lame XP (доступную для Windows). У нее есть графический интерфейс, где можно настроить параметры кодирования из WAV в mp3. Можно, конечно, экспортировать в mp3 прямо из Audacity, но Windows-версия сохраняет mp3 не с тем битрейтом (об этом ниже, в п.4), а настроить данный параметр кодировщика почему-то нельзя. В Linux-версии, к счастью, это возможно, поэтому Lame XP (или что-нибудь подобное) под Linux не потребуется.
3. Чем вставлять на блог? Обычно блоггеры пользуются Flash-объектами, которые берут путь к mp3 файлу как параметр и показывают красивый интерфейс, например, такой:
Для движка Wordpress есть удобные плагины, например, 1 Pixel Out Audio Player, который показан выше. Надо просто распаковать архив плеера в папку для плагинов Wordpress, а в настройках блога активизировать данный плагин. Если у Вас другой движок блога или CMS (Joomla?) для управления сайтом, то можно воспользоваться стандартным HTML-кодом для вставки Flash-объектов. Примеры можно найти на сайте 1 Pixel Out. Внешний вид плеера полностью настраивается, что тоже не маловажно для тех, кто заботится о внешнем виде каждого элемента своего сайта.
4. О чем надо помнить при создании mp3 под Flash-плеер? Теперь мы дошли до самой важной части, ради которой и затевалась данная запись.
Первое время мы писали звук на Linux-машину и не знали об этой проблеме. Linux-версия Audacity исправно делала нам mp3-файлы с битрейтом 48 kbps (для голоса достаточно) и частотой 22 Khz. Но затем мы перешли на Windows-машину, где в Audacity нельзя было выставить частоту. А она по умолчанию делала 32 Khz. В результате, на некоторых компьютерах посетитель мог услышать в браузере ускоренную запись – было забавно, но совсем не подходило для сайта церкви и записей проповедей
Проблема частично устранялась обновлением Flash (это был баг фирмы Adobe, а не нашего плагина), но все же надо было решить проблему для компьютеров со старыми версиями Flash. И только тогда, после долгих поисков в Google, мы нашли неприметный абзац, который был на сайте… 1 Pixel Out… откуда мы и брали плеер:
The “chipmunk” effect
The Macromedia Flash player has a problem playing files that are encoded at a rate that is not a multiple of 11.025 kHz. This effect is sometimes called the “chipmunk” effect: the file is played at double speed. To avoid this, encode MP3s at 11.025 kHz 22.050 kHz or 44.100 kHz.
Т.е. проблема была давно известна и надо было кодировать файл в 22 Khz или любую другую частоту, кратную 11 (11.025 Khz). Но так как Windows-версия Audacity не позволяла настроить данный параметр, то пришлось кодировать сначала в WAV, а затем с помощью Lame XP донастроить этот параметр для конечных mp3-файлов.
Теперь у нас все хорошо – процесс налажен: запись, сохранение в WAV, конвертация в mp3, выкладка на сайт (Wordpress поддерживает file upload) путем вставки простого кода в запись блога. Плагин от 1 Pixel Out позволяет писать просто следующее:
{открывающая квадратная скобка} audio:http_адрес_файла {закрывающая квадратная скобка}
Очень удобно!
Спасибо за внимание.
Один отзыв на “Как вставить аудиозапись (mp3) в свой сайт”
Оставьте свой комментарий
Вам нужно залогиниться, чтобы оставить комментарий.
…
Хм …