Как вставить аудио на сайт

Сегодня расскажу, как вставить аудио на сайт. Вы узнаете о сервисе, где можно за считанные минуты собрать плеер, после чего, этот плеер можно разместить на своем сайте.

В одной статье, я писал, как установить аудио на сайт WordPress, с помощью плагина Audio Player, а сегодня расскажу, как вставить аудио-плеер на любой сайт без плагина.

Аудио-плеер можно вставить в любое место на сайте: в статью, веб-страницу, сайдбар, футер и даже в комментарии. Плеер можно настроить, так, чтобы при открытии определенной статьи или страницы, аудио-плеер включался автоматически.

Как вставить аудио на сайт

Вначале надо собрать аудио-плеер на сервисе, а потом сгенерированный HTML-код, нужно вставить на сайт. Перейдите по ссылке http://flv-mp3.com/ru/. Вы увидите, что можно собрать два плеера, аудио, в формате MP3 и видео, в формате FLV.

Нам нужно собрать аудио-плеер. Щелкните по ссылке «Собрать», как показано на картинке выше. Откроется страница с разными настройками плеера. Но, прежде чем собирать плеер, Вы должны указать путь к музыкальному файлу в формате mp3. Не обязательно загружать файл mp3 на сервер, где находится Ваш сайт. Можно загрузить и на любой другой сервер.

Можно загрузить медиа файл даже в dropbox (что такое dropbox?). Я пробовал воспроизводить MP3-файл из dropbox. Все хорошо, но файл подгружается медленно, поэтому мне этот вариант не подошел. Есть другой вариант, где не нужно вообще ничего загружать на сервер, а нужно только указать путь к музыкальному файлу, который находится на другом сайте.

В этом уроке мой аудио-плеер воспроизводит музыку прямо и соц. сети «В контакте». Я специально не сделал автоматическое воспроизведение плеера, чтобы некоторых это не нервировало. Нажмите на «play», чтобы послушать, как работает плеер.

Так, теперь Вам нужно указать путь к проигрываемому файлу.

Знаю, что не все знают, как правильно указать путь к музыкальному файлу. Я сейчас попытаюсь объяснить. Создайте в корневой папке блога, например, папку «audio». Закачайте в эту папку mp3 файл, который желаете воспроизводить на своем сайте. Например, файл называется music.mp3, значит, путь к файлу будет следующим: http://vash_sait.ru/audio/musik.mp3. Если все равно не понятно, пишите в комментариях.

Теперь нужно задать размер и цвет плеера, потом громкость плеера по умолчанию и вкл/выкл. автозапуск.

 

1. Задать размер плеера
2. Выбрать цвет плеера
3. Громкость плеера по умолчанию
4. Прямые или закругленные углы.

Обратите внимание на стрелку «2». Здесь Вы можете подобрать цвет для Вашего плеера, но мне цвета, кроме черного и белого там не нравятся. Какие-то они мрачные. Я предпочитаю выбирать уже готовые скины (скин – кожа с англ.), или добавить свой.

Для этого установите галочку в чекбокс «скин» и укажите путь к файлу с Вашим скином, или выберите уже готовый. В этом уроке для плеера, я выбрал скин «Gold».

После нажатия на кнопку «Собрать и получить html-код», Вы перейдете на страницу, где нужно будет скопировать HTML-код готового плеера. Если Вы выбрали автоматическое воспроизведение, тогда Вы должны услышать проигрываемый файл, который указали при сборке плеера. Если звука нет – возможно, Вы указали неверный путь к файлу.

Теперь скопированный код надо вставить на Ваш сайт, в любое место, где пожелаете. Соблюдайте размеры плеера, если хотите установить плеер в сайд бар или другом ограниченном месте.

Видео собирается аналогичным способом, поэтому вопросов не должно возникнуть.

Еще собрать аудио и видео плеер можно на сайте http://uppod.ru/. На этом сайте можно собрать качественный плеер с плейлистами. Там есть подробное описание, как и что нужно делать. На этом все. Встретимся в следующих уроках