3 проверенных способа вставки музыки на свой сайт

Доброй пятницы, дорогие читатели IPetrenko.ru!

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

С помощью сервиса Простоплеер

Этот вариант подойдет не для всех - если у вас российский IP-адрес, то у вас даже не получиться зайти на сайт Pleer.com. Это связано с блокировкой сервиса Роскомнадзором в марте 2016 года.

Шикарный сайт  с огромной базой музыки, однако с печальной судьбой.  Если после первого абзаца вы не передумали, то сейчас я вам расскажу, как работать с Простоплеером.

1. Копируем код для вставки

2. В Blogger переходим в режим редактирования HTML

3. Вставляем скопированный код в нужное место

4. Нажимаем кнопку сохранить

5. Музыка добавлена

6. Вот что должно получиться

Действительно, вставить музыку в пост очень просто.

Кстати, прочтите мою статью-рассуждение про извечный вопрос Что лучше - Blogger или Wordpress.

Как вставить музыку в пост блог с помощью flash-проигрывателя?

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

В моем случае я использовал конструктор плеера от ребят с Stuudio, а также аудио с сайта Музыка@Mail.ru (пишите в комментариях, если хотите узнать как я "добыл" ссылку на mp3-файл с этого сервиса). У вас же может быть свой плеер, например плеер от Uppod, а также свой адрес к музыкальному файлу.

Для того чтобы встроить мой вариант плеера вам нужно скопировать вот такой код:

<object data="https://flv-mp3.com/i/pic/ump3player_500x70.swf" height="89" type="application/x-shockwave-flash" width="600">
<param name="wmode" value="transparent"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<param name="movie" value="http://flv-mp3.com/i/pic/ump3player_500x70.swf"></param>
<param name="FlashVars" value="way=http://music43.my.mail.ru/file/3e426f699d66f4129876ad6c7806b9fb.mp3&amp;swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&amp;w=600&amp;h=89&amp;time_seconds=0&amp;autoplay=0&amp;q=&amp;skin=white&amp;volume=60&amp;comment=Kevin Rudolf: Dont Give Up(PowerBomb.ru) "></param>
</object>

Настройка предельно проста: красным выделен URL-адрес аудио файла, а зеленым путь к флеш плееру, который можно скачать и "закинуть" к себе на хостинг (я использовал бы uCoz).

Демонстрация плеера к вашему вниманию:

Вставка аудио с помощью HTML5-плеера для блога

Сейчас все современные браузеры поддерживают стандарты html5 и css3, поэтому этот способ интеграции музыки на сайт - не вызовет проблем. Однако для вставки плеера вам тоже потребуется знать URL-адрес аудиофайла.

Для плеера используется тег <audio>, который очень прост в работе. Самый обычный плеер имеет следующий код:

<audio controls loop>
   <source src="http://music43.my.mail.ru/file/3e426f699d66f4129876ad6c7806b9fb.mp3"></source>
</audio>

Вам достаточно его скопировать и музыкальное сопровождение вашего поста обеспечено ;)

На этом туториал -  всё. В конце предлагаю посмотреть видео про супер изобретение, которое пригодиться тем, кто боится пауков. Приятного просмотра и до встречи