Добавляем музыку в свой блог

Иконка папки с музыкальными файлами Для того чтобы добавить музыкальный плеер на страницу сайта или блога, в большинстве случаев даже не требуется регистрироваться на всевозможных сервисах, предоставляющих услуги аудио хостинга.
  Разместить музыкальный файл или аудио запись на любой веб-странице, можно используя прямую ссылку на сам файл и специально предназначенный для вставки аудио-файлов тег, доступный в 5-ой версии HTML. Плеер и все элементы управления создаст браузер, единственное условие чтобы он, браузер, был более-менее современным.

  Чтобы использовать тег <audio>, который служит контейнером для размещения аудио-файлов и вывода плеера на странице сайта, требуется убедится что тип HTML документа(DOCTYPE) сайта указан правильно
DOCTYPE стандартного шаблона Blogger

  Тег <audio> обладает настройками, с помощью которых можно управлять воспроизведением добавленного файла, но нужно сказать что внешний вид плеера будет таким, каким его задумали разработчики браузера, хотя с помощью jQuery и CSS3 как всегда можно творить чудеса.

  Чтобы установить плеер на странице, нужно добавить в ее HTML код запись тега, которую можно сделать двумя способами:
1.
<audio src="../прямая ссылка/на /файл"></audio>
2.
<audio>
 <source src="../прямая.ссылка.на.файл">
</audio>
Во втором варианте записи, можно добавить несколько ссылок с источниками на разные форматы файлов, для универсальности. Например: mp3 и OGG, чтобы быть уверенным что файл будет воспроизведен в большинстве браузеров, т.к. разные браузеры могут воспроизводить разные форматы файлов. (в IE, вплоть до 9-ой версии тег работать не будет - в IE9 будет).

  Для воспроизведения аудио файлов в браузере доступно всего три формата - mp3, OGG и WAV .

  Дополнительно тег <audio>, поддерживает такие атрибуты:
- autoplay - самовоспроизведение аудио-файла после загрузки страницы;
- controls - добавление панели управления - плеера. (в разных браузерах плеер будет выглядеть по-разному);
- loop - автоповтор;
- preload - будет загружать файл вместе с загрузкой веб-страницы;
- src - путь к воспроизводимому файлу.

  Самая простая запись для плеера будет выглядеть так:
<audio controls>
  <source src="../прямая_ссылка/file.mp3" type="audio/mpeg">
  <source src="../прямая_ссылка/file.ogg" type="audio/ogg; codecs=vorbis">
  Тег audio не поддерживается вашим браузером. <a href=".../file.mp3">Скачать музыку</a>
  </source>
  </source>
</audio>

  Подгружать свои аудио файлы и получать прямую ссылку на них, пока что, на халяву, можно как и прежде на сервира Google. Например используя Сайты Гугл, хотя как показывает практика и другие облачные сервисы не хуже.

Полезный объем Гугл-сайта - 100 мГб, поэтому сильно не разгуляешься с песенками, с другой стороны, загружая файлы туда, получаешь хост-ссылку, что уже не доступно для Драйв, кроме того можно пожертвовать немного качеством и подгрузить в пределах 50-ти - 40-а композиций, а это ни много-ни мало - уже пара, а то и три альбома.

  Под занавес чудная мелодия от Two Steps from the Hell:


  Вот и все всем удачи и хорошего настроения.
©http://magentawave.com

40 комментариев:

  1. Очень познавательно, спасибо! Странно, но я еще вчера тоже заинтересовался музыкой на блоге!?

    ОтветитьУдалить
    Ответы
    1. Всегда пожалуйста. :)
      "Странно, но я еще вчера тоже заинтересовался музыкой на блоге!?"
      Это коллективные разум и единое информационное поле виноваты, а может просто многих блоггеров объединяют общие желания по улучшению своего блога.

      Удалить
    2. Кстати по поводу хостинга, залил музыкаальный файл на dropbox.com

      Удалить
    3. Точно! Вот тут-то эта "коробочка" и пригодится, а я как-то сразу и не подумал про это дело... Там по-любому будет больше чем 100 "метров". Спасибо за совет!

      Удалить
  2. Ой, спасибо, очень пригодилось :)

    ОтветитьУдалить
  3. А можно узнать название и исполнителя мелодии?

    ОтветитьУдалить
  4. Добрый день. Спасибо за познавательную статью.
    Добавил так музыку из "Вконтакте". Прямую ссылку на аудио можно получить посмотрев исходный код страницы, вставляется точно так же как и в статье. Зато не нужно самому заливать музыку куда-либо.

    ОтветитьУдалить
  5. Помогите. Я не могу сделать так, что бы у меня на странице была песня.

    ОтветитьУдалить
    Ответы
    1. Что конкретно у вас не получается из того что описано в статье?

      Удалить
  6. Все хорошо, вот только у каждой песни есть автор (которому принадлежат права на копирования) и незаконное размещение чужих композиций без разрешения автора может вылиться в неприятности...

    ОтветитьУдалить
    Ответы
    1. Вы правы - у каждой песни есть автор, и этот автор может быть блоггером и таким образом может делиться с людьми (читателями блога) своим творчеством. Т.е. не обязательно "воровать" чьи-то произведения, таким образом можно размещать и свои.

      Удалить
    2. Ох, я не припомню чтобы я находил людей, которые вставляют на свой сайт малоизвестные произведения блогеров ), в основном все воруют )

      Удалить
  7. Спасибо за статью. Только открыла блог, сразу захотела музыку. Виджет периодически исчезает, не получается. Как загружать песни? Могу я загрузить со своего компа? Я чайник, помогите)))Плиииз!

    ОтветитьУдалить
    Ответы
    1. Конечно можете, только для начала вам потребуется выгрузить записи с компьютера в какое-нибудь "хранилище". изучитете вот эту статью
      http://www.magentawave.com/2013/09/get-direct-link-on-file.html - как получить прямую ссылку на файл в бесплатном сервисе и тогда останется только встроить ее в ваш блог

      Удалить
  8. Для меня как, в некоторой степени, музыканта этот вопрос очень больной и вот почему.
    У меня целая куча шаблонов как svf так и html5 плееров но увы, всё это можно смело отправить в топку ибо жуть как не удобно и вот почему, при каждом посте нужно делать целую кучу тело-движений и к тому же сервисы типа коробочки вдруг посылают вас ко всем чертям, обидно не правда-ли? В данном случае лучше всего воспользоватся веб посредниками такими как всеми известный и самый надёжный youtube или yapfiles.ru, mixcloud.com, reverbnation.com ну и на самый неважный случай для секс меньшинств soundcloud.com

    ОтветитьУдалить
  9. Здравствуйте, автор! что-то я нифига не понял.. посмотрел исходный код этой статьи, у вас прописаны разные ссылки в source src= (это зачем? что там прописывать? У вас там дропбокс-ссылка)и в a href - там у вас ссылка на сам музыкальный файл.
    Не очень понятная статья, что куда прописывать и как должен выглядеть конечный код для вставки музыки в статью - объясните пожалуйста.

    ОтветитьУдалить
    Ответы
    1. В source src= прописывать ссылки на файлы, также как и изображения, раз уж вы смотрли исходный код, то это видели, как сделано в статье. Файлы я просто залил на дропбокс, в href - битая ссылка на скачивание файла, страницы той уже нет.
      Конечный код вставки может выгладить как пример после строки
      " Самая простая запись будет выглядеть так:"

      http://www.magentawave.com/2013/09/get-direct-link-on-file.html

      Удалить
    2. Так у вас там два раза в коде повторяется source src=, для чего - не очень понятно.
      И зачем вот эти строки кода? их тоже нужно прописывать где то?
      1.
      2.




      Извините, но не могу ничего понять, реально :( Вроде и более-менее понимаю в кодах, но статья написана не очень понятно и запутано.

      Удалить
    3. source - в переводе с англ. источник. тег source служит для добавление ссылки на файл. Музыкальные файлы бывают разных форматов, для того чтобы пользователи могли прослушать музыку в любом браузере, добавляют ссылки на файл в разных форматах. Т.к. на момент написания статьи разные браузеры могли воспроизводить только определенные типы файлов. А также, для совсем старых браузеров, в которых нет встроенного плеера, добавлялась ссылка, по которой можно было скачать файл и прослушать его на своем компьютере.

      Удалить
    4. Я понимаю, что такое сурс, не совсем нуб же :) Просто, смущает, что два раз было прописано, теперь понятно - что это ссылки на разные форматы файлов. А если мне нужно добавить звук в формате WMA - то будет ли он нормально работать во всех браузерах?
      И нужно ли прописывать после ссылки на файл вот этот фрагмент - type="audio/mpeg ?

      Удалить
    5. Во всех работает только mp3, WAV в IE не работает (по крайней мере в 9-ой), для этого типа нужно указывать - audio/wav

      Удалить
    6. Здравствуйте, автор) Опять я к вам с вопросом. Что-то нифига не получается у меня... Сделал по Вашей инструкции прямую ссылку файла с гугл-диск, вставил вот такой код - как ниже (код обработан в Енкодере HTML) и нифига не работает ни в одном из браузеров. Подскажите пожалуйста, что я делаю не так? То ли код не верный, то ли я ссылку не правильную вставил на файл?

      <audio controls>
      <source src="https://drive.google.com/uc?export=download&confirm=no_antivirus&id=тут мой id файла" type="audio/wav">
      </source>
      </audio>

      Покликаю по рекламке в знак благодарности)

      Удалить
    7. Для добавления музыки нужно использовать, так называемую, хост-ссылку, т.е. с расширением файла. Например https://www.dropbox.com/s/8s4rp6eu1qgxplv/DR.mp3?dl=1 именно поэтому используются сервисы Гугл сайты и Дропбокс

      Удалить
    8. Ну ок, значит - мой аудио файл надо загружать на гугл-сайт или дропбокс. Загрузил на гугл-сайт по вашей инструкции, вставляю ссылку и плеер всё равно не работает - ни в Опере, ни в Фаерфоксе. Плеер появляется, но не реагирует на кнопку воспроизведения. И кстати, почему Вы мне сказали что нужно прописать audio/wav в конце? Ведь у меня файл wma, значит и нужно прописывать вот так - audio/wma? Я пробовал оба варианта - не работают.
      Почему - не могу понять... Может потому что wma-файлы не могут браузеры воспроизвести?
      Или у меня код не правильный?

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

      Удалить
    9. Пожалуй вам проще будет перекодировать файл в другой формат, лучше в mp3 думаю тогда проблем станет намного меньше.

      Удалить
    10. Согласен, проблем может и меньше будет - если в МР3 сделать, но мне не хочется кодировать, потому что у меня записан в WMA пример записи с микрофона и хотелось бы в оригинальном формате и сохранить его. А при кодировке в другой формат - всё равно немного теряется качество оригинала.

      В общем, как мне проблему то решить?) Вы можете попробовать в своём блоге сделать любой пример с WMA-звуковым файлом? Ну просто ради эксперимента... Да хотя бы даже в этой статье.

      Удалить
  10. Если Вы по какой то причине не в курсе, то на сегодняшний день, гугл закрыл все возможные возможности на прямые ссылки (ну что сказать, с Гуглом не поспоришь)
    Но варианты есть, Вот Вам https://archive.org в помощь, грузите туда сколько хотите, лимита нет, единственный минус, нельзя удалить загруженный файл, но... если постараться то можно )))

    ОтветитьУдалить
    Ответы
    1. Насчет возможных возможностей готов поспорить, что вы скажите на это -
      https://drive.google.com/uc?export=download&id=0B__xB2sZtgF_eDNLdlozSUVXMTA

      Онлайн генератор прямых ссылок и описание как получить здесь -
      http://www.magentawave.com/2013/09/get-direct-link-on-file.html

      Просто возможности хост-ссылку (с расширением файла в окончании) возможности получить нет, хотя сегодня (07.10.16) даже старая хост ссылка с swf заработала на странице ))
      Но для хостов есть Гугл сайты -
      http://www.magentawave.com/2012/04/adding-new-javascript-through-src-on.html
      и Дропбокс, и ваш вариант, конечно.

      Удалить
    2. Aix, что вы людей пугаете то так?) всё прекрасно работает - я проверял этот код из статьи и загружал MP3 на гугл-сайты. Плеер прекрасно воспроизводит музыку в браузере по прямой ссылке с гугл-сайта.

      Удалить
  11. MagentaWAVE: Да я в курсе, спасибо может пригодится, есть подобный генератор для яндекс диска https://getfile.dokpub.com/
    Но вся фигня в том что всё это не даёт нужного мне расширения .css .js
    а без этого удалённые стили не будут работать, sites.google.com в этих целях неудобен тем, что нельзя редактировать стили на лету, как это было
    в гугл диске.
    На данный момент нахожу очень привлекательным вот этот ресурс http://s.codepen.io/ Можно делать неограниченное количество htmlок вот мой пример http://s.codepen.io/AixDen/debug/RaYvWr )К тому же на борту у ресурса куча готовых решений, редактируй, запихивай в iframe и используй где хочешь.
    пример http://aixbox.blogspot.ru/2016/06/search-music-fo-soundcloud.html
    иглу на диск курсором нужно ставить ))
    ----
    -Аdmin-: Ну уж простите коли напугал, только я не понимаю зачем для ауди файлов использовать лимитированные диски, если есть безлемит в лице https://archive.org Причём у него есть любопытная и удобная особенность, грузите один файл, к примеру my.waw а получаете три, my.waw my.mp3 my ogg, удобно неправда-ли )

    ОтветитьУдалить
    Ответы
    1. Только уведел этот коммент, каким-то боком оказался в спаме)) В целом полезно, спасибо)

      Удалить
    2. Этот комментарий был удален автором.

      Удалить
  12. Спасибо за нормальное описание, наконец получилось сделать всё как надо и плеер заиграл. С другими описаниями этого же кода дела шли значительно хуже :D

    ОтветитьУдалить
  13. Здравствуйте!
    Можно... Под занавес чудная мелодия от Two Steps from the Hell:
    именно так организовать прослушивание аудиозаписи (пока хранится на рабочем столе моего компьютера)?
    Единственное, что точно моему уму постижимо: Под занавес чудная мелодия от Two Steps from the Hell: именно так и надо в сообщении поставить запись. Помочь можно ли? https://novosokolsk.blogspot.com/2019/12/pro-burzaevih.html

    ОтветитьУдалить
  14. Доброе утро! Сейчас на свежую голову еще раз прочитаю\изучу...

    ОтветитьУдалить
  15. Ответы
    1. Мы живы. Только не совсем понятна суть проблемы

      Удалить

Следующее Предыдущее

BestProject