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

Как добавить музыку на сайт

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

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

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

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

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

Вставить музыку в Blogspot

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

Вставить музыку в Blogger

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

Как добавить музыку на блог

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

Встроить музыку на сайт

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

Как добавить музыку на блог

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


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

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

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

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

Для того чтобы встроить мой вариант плеера вам нужно скопировать вот такой код:
<object data="http://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>

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

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



Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger Comment
    Facebook Comment

2 коммент. :

  1. Спасибо за полезную статью, воспользуюсь Вашей инструкцией.

    ОтветитьУдалить
  2. Немного о SoundHost.org

    SoundHost – это онлайн-платформа (мобильная и веб), которая позволяет слушать любимую музыку онлайн, следить за творчеством артистов и за музыкальными событиями.

    Основные характеристики:

    - возможность подписываться на исполнителей
    - слушать музыку, обсуждать и оценивать треки
    - быть в курсе деятельности артистов
    - быть в курсе значимых музыкальных событий

    Пользователь, создавший аккаунт, имеет возможность загружать музыку, создавать плейлисты, общаться с другими участниками в чате, подписаться на их новости, отправлять личные сообщения. Можно установить настройки приватности для профиля, а также сделать его индивидуальным, добавив обложку и аватар, создавать плейлисты и многое другое...

    Еще на SoundHost можно (Загружать, скачивать, продавать, слушать музыку)
    Много возможностей - быстрая загрузка треков, скачка, удобное прослушивание треков, Украинский, Русский и Английский языки, возможность коментировать и одобрять треки и много чего другого...

    Музыкальный аудио хостинг SoundHost

    ОтветитьУдалить