Разместить музыкальный файл или аудио запись на любой веб-странице, можно используя прямую ссылку на сам файл и специально предназначенный для вставки аудио-файлов тег, доступный в 5-ой версии HTML. Плеер и все элементы управления создаст браузер, единственное условие чтобы он, браузер, был более-менее современным.
Чтобы использовать тег <audio>, который служит контейнером для размещения аудио-файлов и вывода плеера на странице сайта, требуется убедится что тип HTML документа(DOCTYPE) сайта указан правильно
Тег <audio> обладает настройками, с помощью которых можно управлять воспроизведением добавленного файла, но нужно сказать что внешний вид плеера будет таким, каким его задумали разработчики браузера, хотя с помощью jQuery и CSS3 как всегда можно творить чудеса.
Чтобы установить плеер на странице, нужно добавить в ее HTML код запись тега, которую можно сделать двумя способами:
1.
<audio src="../прямая ссылка/на /файл"></audio>
2.<audio>
<source src="../прямая.ссылка.на.файл">
</audio>
<source src="../прямая.ссылка.на.файл">
</audio>
Во втором варианте записи, можно добавить несколько ссылок с источниками на разные форматы файлов, для универсальности. Например: mp3 и OGG, чтобы быть уверенным что файл будет воспроизведен в большинстве браузеров, т.к. разные браузеры могут воспроизводить разные форматы файлов. (в IE, вплоть до 9-ой версии тег работать не будет - в IE9 будет).
Для воспроизведения аудио файлов в браузере доступно всего три формата - mp3, OGG и WAV .
Для воспроизведения аудио файлов в браузере доступно всего три формата - mp3, OGG и WAV .
Дополнительно тег <audio>, поддерживает такие атрибуты:
- autoplay - самовоспроизведение аудио-файла после загрузки страницы;
- controls - добавление панели управления - плеера. (в разных браузерах плеер будет выглядеть по-разному);
- loop - автоповтор;
- preload - будет загружать файл вместе с загрузкой веб-страницы;
- src - путь к воспроизводимому файлу.
Самая простая запись для плеера будет выглядеть так:
<audio controls>
<sourcesrc="../прямая_ссылка/file.mp3" type="audio/mpeg">
<sourcesrc="../прямая_ссылка/file.ogg" type="audio/ogg; codecs=vorbis">
Тег audio не поддерживается вашим браузером. <ahref=".../file.mp3">Скачать музыку</a>
</source>
</source>
</audio>
<source
<source
Тег audio не поддерживается вашим браузером. <a
</source>
</source>
</audio>
Подгружать свои аудио файлы и получать прямую ссылку на них, пока что, на халяву, можно как и прежде на сервира Google. Например используя Сайты Гугл, хотя как показывает практика и другие облачные сервисы не хуже.
Полезный объем Гугл-сайта - 100 мГб, поэтому сильно не разгуляешься с песенками, с другой стороны, загружая файлы туда, получаешь хост-ссылку, что уже не доступно для Драйв, кроме того можно пожертвовать немного качеством и подгрузить в пределах 50-ти - 40-а композиций, а это ни много-ни мало - уже пара, а то и три альбома.
Под занавес чудная мелодия от Two Steps from the Hell:
Вот и все всем удачи и хорошего настроения.
©http://magentawave.com
Очень познавательно, спасибо! Странно, но я еще вчера тоже заинтересовался музыкой на блоге!?
ОтветитьУдалитьВсегда пожалуйста. :)
Удалить"Странно, но я еще вчера тоже заинтересовался музыкой на блоге!?"
Это коллективные разум и единое информационное поле виноваты, а может просто многих блоггеров объединяют общие желания по улучшению своего блога.
Кстати по поводу хостинга, залил музыкаальный файл на dropbox.com
УдалитьТочно! Вот тут-то эта "коробочка" и пригодится, а я как-то сразу и не подумал про это дело... Там по-любому будет больше чем 100 "метров". Спасибо за совет!
УдалитьОй, спасибо, очень пригодилось :)
ОтветитьУдалитьА можно узнать название и исполнителя мелодии?
ОтветитьУдалитьКонечно :) Two Steps From Hell - Dragon Rider
УдалитьДобрый день. Спасибо за познавательную статью.
ОтветитьУдалитьДобавил так музыку из "Вконтакте". Прямую ссылку на аудио можно получить посмотрев исходный код страницы, вставляется точно так же как и в статье. Зато не нужно самому заливать музыку куда-либо.
Помогите. Я не могу сделать так, что бы у меня на странице была песня.
ОтветитьУдалитьЧто конкретно у вас не получается из того что описано в статье?
УдалитьВсе хорошо, вот только у каждой песни есть автор (которому принадлежат права на копирования) и незаконное размещение чужих композиций без разрешения автора может вылиться в неприятности...
ОтветитьУдалитьВы правы - у каждой песни есть автор, и этот автор может быть блоггером и таким образом может делиться с людьми (читателями блога) своим творчеством. Т.е. не обязательно "воровать" чьи-то произведения, таким образом можно размещать и свои.
УдалитьОх, я не припомню чтобы я находил людей, которые вставляют на свой сайт малоизвестные произведения блогеров ), в основном все воруют )
УдалитьСпасибо за статью. Только открыла блог, сразу захотела музыку. Виджет периодически исчезает, не получается. Как загружать песни? Могу я загрузить со своего компа? Я чайник, помогите)))Плиииз!
ОтветитьУдалитьКонечно можете, только для начала вам потребуется выгрузить записи с компьютера в какое-нибудь "хранилище". изучитете вот эту статью
Удалитьhttp://www.magentawave.com/2013/09/get-direct-link-on-file.html - как получить прямую ссылку на файл в бесплатном сервисе и тогда останется только встроить ее в ваш блог
Для меня как, в некоторой степени, музыканта этот вопрос очень больной и вот почему.
ОтветитьУдалитьУ меня целая куча шаблонов как svf так и html5 плееров но увы, всё это можно смело отправить в топку ибо жуть как не удобно и вот почему, при каждом посте нужно делать целую кучу тело-движений и к тому же сервисы типа коробочки вдруг посылают вас ко всем чертям, обидно не правда-ли? В данном случае лучше всего воспользоватся веб посредниками такими как всеми известный и самый надёжный youtube или yapfiles.ru, mixcloud.com, reverbnation.com ну и на самый неважный случай для секс меньшинств soundcloud.com
Здравствуйте, автор! что-то я нифига не понял.. посмотрел исходный код этой статьи, у вас прописаны разные ссылки в source src= (это зачем? что там прописывать? У вас там дропбокс-ссылка)и в a href - там у вас ссылка на сам музыкальный файл.
ОтветитьУдалитьНе очень понятная статья, что куда прописывать и как должен выглядеть конечный код для вставки музыки в статью - объясните пожалуйста.
В source src= прописывать ссылки на файлы, также как и изображения, раз уж вы смотрли исходный код, то это видели, как сделано в статье. Файлы я просто залил на дропбокс, в href - битая ссылка на скачивание файла, страницы той уже нет.
УдалитьКонечный код вставки может выгладить как пример после строки
" Самая простая запись будет выглядеть так:"
http://www.magentawave.com/2013/09/get-direct-link-on-file.html
Так у вас там два раза в коде повторяется source src=, для чего - не очень понятно.
УдалитьИ зачем вот эти строки кода? их тоже нужно прописывать где то?
1.
2.
Извините, но не могу ничего понять, реально :( Вроде и более-менее понимаю в кодах, но статья написана не очень понятно и запутано.
source - в переводе с англ. источник. тег source служит для добавление ссылки на файл. Музыкальные файлы бывают разных форматов, для того чтобы пользователи могли прослушать музыку в любом браузере, добавляют ссылки на файл в разных форматах. Т.к. на момент написания статьи разные браузеры могли воспроизводить только определенные типы файлов. А также, для совсем старых браузеров, в которых нет встроенного плеера, добавлялась ссылка, по которой можно было скачать файл и прослушать его на своем компьютере.
УдалитьЯ понимаю, что такое сурс, не совсем нуб же :) Просто, смущает, что два раз было прописано, теперь понятно - что это ссылки на разные форматы файлов. А если мне нужно добавить звук в формате WMA - то будет ли он нормально работать во всех браузерах?
УдалитьИ нужно ли прописывать после ссылки на файл вот этот фрагмент - type="audio/mpeg ?
Во всех работает только mp3, WAV в IE не работает (по крайней мере в 9-ой), для этого типа нужно указывать - audio/wav
УдалитьЗдравствуйте, автор) Опять я к вам с вопросом. Что-то нифига не получается у меня... Сделал по Вашей инструкции прямую ссылку файла с гугл-диск, вставил вот такой код - как ниже (код обработан в Енкодере HTML) и нифига не работает ни в одном из браузеров. Подскажите пожалуйста, что я делаю не так? То ли код не верный, то ли я ссылку не правильную вставил на файл?
Удалить<audio controls>
<source src="https://drive.google.com/uc?export=download&confirm=no_antivirus&id=тут мой id файла" type="audio/wav">
</source>
</audio>
Покликаю по рекламке в знак благодарности)
Для добавления музыки нужно использовать, так называемую, хост-ссылку, т.е. с расширением файла. Например https://www.dropbox.com/s/8s4rp6eu1qgxplv/DR.mp3?dl=1 именно поэтому используются сервисы Гугл сайты и Дропбокс
УдалитьНу ок, значит - мой аудио файл надо загружать на гугл-сайт или дропбокс. Загрузил на гугл-сайт по вашей инструкции, вставляю ссылку и плеер всё равно не работает - ни в Опере, ни в Фаерфоксе. Плеер появляется, но не реагирует на кнопку воспроизведения. И кстати, почему Вы мне сказали что нужно прописать audio/wav в конце? Ведь у меня файл wma, значит и нужно прописывать вот так - audio/wma? Я пробовал оба варианта - не работают.
УдалитьПочему - не могу понять... Может потому что wma-файлы не могут браузеры воспроизвести?
Или у меня код не правильный?
Попробуйте сами, пожалуйста, на своём блоге - получится ли сделать wma-музыку в плеере на вашем ресурсе.
Пожалуй вам проще будет перекодировать файл в другой формат, лучше в mp3 думаю тогда проблем станет намного меньше.
УдалитьСогласен, проблем может и меньше будет - если в МР3 сделать, но мне не хочется кодировать, потому что у меня записан в WMA пример записи с микрофона и хотелось бы в оригинальном формате и сохранить его. А при кодировке в другой формат - всё равно немного теряется качество оригинала.
УдалитьВ общем, как мне проблему то решить?) Вы можете попробовать в своём блоге сделать любой пример с WMA-звуковым файлом? Ну просто ради эксперимента... Да хотя бы даже в этой статье.
Если Вы по какой то причине не в курсе, то на сегодняшний день, гугл закрыл все возможные возможности на прямые ссылки (ну что сказать, с Гуглом не поспоришь)
ОтветитьУдалитьНо варианты есть, Вот Вам https://archive.org в помощь, грузите туда сколько хотите, лимита нет, единственный минус, нельзя удалить загруженный файл, но... если постараться то можно )))
Насчет возможных возможностей готов поспорить, что вы скажите на это -
Удалить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
и Дропбокс, и ваш вариант, конечно.
Aix, что вы людей пугаете то так?) всё прекрасно работает - я проверял этот код из статьи и загружал MP3 на гугл-сайты. Плеер прекрасно воспроизводит музыку в браузере по прямой ссылке с гугл-сайта.
Удалить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, удобно неправда-ли )
Только уведел этот коммент, каким-то боком оказался в спаме)) В целом полезно, спасибо)
УдалитьЭтот комментарий был удален автором.
УдалитьСпасибо.Полезная информация
ОтветитьУдалитьСпасибо за нормальное описание, наконец получилось сделать всё как надо и плеер заиграл. С другими описаниями этого же кода дела шли значительно хуже :D
ОтветитьУдалитьЗдравствуйте!
ОтветитьУдалитьМожно... Под занавес чудная мелодия от Two Steps from the Hell:
именно так организовать прослушивание аудиозаписи (пока хранится на рабочем столе моего компьютера)?
Единственное, что точно моему уму постижимо: Под занавес чудная мелодия от Two Steps from the Hell: именно так и надо в сообщении поставить запись. Помочь можно ли? https://novosokolsk.blogspot.com/2019/12/pro-burzaevih.html
Доброе утро! Сейчас на свежую голову еще раз прочитаю\изучу...
ОтветитьУдалитьАу! Вы живы?
ОтветитьУдалитьМы живы. Только не совсем понятна суть проблемы
Удалитьспасибо
ОтветитьУдалить