Меню

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



Как вставить на сайт аудио файл (музыку) с помощью HTML5

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

Как оказывается, что HTML5 поддерживает аудио теги, и таким образом музыку вставить на сайт очень просто. Правда, что не все старые браузеры воспроизводят аудио файл, но все современные браузеры это делают на ура.

Поддержка браузеров

Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.

Chrome после 6 версии поддерживает практически все форматы.

Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.

С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.

Safari поддерживает все форматы аудио кроме ogg.

Добавление аудио файла на сайт

Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.

Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.

Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.

Источник

Как вставить музыку на сайте

Музыка на сайте — это скорее редкость, чем норма. Вставляя музыку на сайт, нужно понимать, что некоторых пользователей она может и вовсе оттолкнуть. В этой статье мы рассмотрим несколько вариантов вставки музыки на сайт, а также рассмотрим как сделать фоновую музыку.

Как вставить фоновую музыку на сайт

Вставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.

Есть два способа для вставки музыки в html

Вариант 1. Через html тег

У тега есть несколько атрибутов:

  • loop=»значение» — количество повторений музыки (если -1, то повторяется бесконечно)
  • balance=»значение» — стереобаланс (от -10000 до 10000)
  • volume=»значение» — громкость (0 максимум, -10000 минимум)

Музыка будет играть автоматически при загрузке страницы.

Вариант 2. Через тег

У тега возможно использование следующих атрибутов:

  • width=»значение» — ширина (в пикселях или процентах)
  • height=»значение» — высота (в пикселях или процентах)
  • align=»значение» — выравнивание ( left — слева, right — справа, center — по центру)
  • hidden=»значение» — видимость панели ( true — скрыть, false — показывать), по умолчанию панель видна
  • autostart=»значение» — проигрывать музыку при загрузке ( true — да, false — нет)
  • loop=»значение» — значение true — проигрывать по кругу, false — один раз

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

В html5 можно использовать тег

Следующие атрибуты можно использовать:

  • autoplay=»значение» — включить музыку сразу при загрузке страницы
  • controls=»значение» — отображать панель управления плеера в браузере
  • loop=»значение» — отвечает за цикличность
  • preload=»значение» — загружать музыку сразу с загрузкой страницы

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

Источник

Урок 14. Как вставить аудио или музыку на сайт в html


1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html

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

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

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

2. Далее нужно скачать файлы плеера .

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

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:

И всё готово! Можете посмотреть и работу примера.

Как установить фоновую музыку в html

Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.

Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

Синтаксис довольно-таки прост:

Закрывающий тег не требуется.

Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:

Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз

Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true.

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:

В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :

src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.

Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.

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

Вставка аудио и музыки в HTML5 — тег audio


audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.

Для каждого браузера проигрыватель и панель управления может отличаться.
Для некоторых браузеров, например FF, нужно загружать ogg-файл, для остальных mp3.

Атрибуты тега audio

autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop — проигрывает файл заново после его окончания
preload — загрузка аудио файла произойдёт вместе с загрузкой страницы
src — путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

Теперь смотрим работу тега audio в Вашем браузере:

Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)

Источник

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

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

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

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

Однако использование такого метода может стать проблемой для тех, у кого ограниченное пространство на хостинге и нет возможности загружать всё подряд. К слову, я как раз из этой группы людей – мой тарифный план предусматривает всего 1 гигабайт дискового пространства, поэтому у меня нет возможности использовать ранее предложенный вариант, и я пошёл дальше.

Как оказалось, в интернете предложено не так много вариантов, подробно описывающих процесс вставки музыки на сайт, это даже вызвало у меня некоторые затруднения, но как говорится, кто ищет тот всегда найдёт.

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

К этим требованиям я в первую очередь отнёс:

  • удалённую загрузку (нет необходимости хранить файлы в формате mp3 на своём хостинге)
  • соответствие веб-стандартам (валидность html кода должна полностью проходить проверку)
  • простоту внедрения музыки на сайт (без каких-либо заморочек и дополнительных настроек)

Теперь, давайте я расскажу подробнее о том, как это можно сделать.

Как вставить музыку на сайт – наглядная инструкция.

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

Переходим по ссылке «Загрузить видео» и выбираем интересующий способ – в данном случае я воспользуюсь загрузкой с компьютера.

В появившемся окне, кликнув по кнопке «добавьте ролики» мы выбираем нужную музыкальную композицию или даже несколько при необходимости. По желанию можно отредактировать название, проставить метки для вашего файла, настроить доступность и другие параметры.

Когда всё готово, остаётся лишь нажать по кнопке «Загрузить» и дождаться окончания загрузки.

По завершению у Вас появится окно с сообщением о том, что Ваши видео загружены – используя одноимённую ссылку «Перейдите к просмотру своих видео» и выберите нужный аудио-файл из списка.

Справа от загруженного ролика есть строка «Код для вставки на сайт или в блог» — используя ее, выбирайте, то, что вам нужно и внедряйте туда, куда надо. Скопировав iframe-код и разместив его на странице, Вы получаете вот такой проигрыватель.

Музыка: Darren Rhys — Lost Soul (Katakana Rmx)

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

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

Ещё один пример такого размещения можно увидеть в недавно опубликованной статье «Чего хотят люди, и чего хочу я» — вставленная в неё музыка находится практически в самом конце страницы.

Надеюсь, Вам понравится использованный и что самое главное проверенный мною способ.

Источник

Как поставить музыку на сайт без плеера

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

Но есть у этого способа и некоторые неудобства, а именно, чтобы поставить музыку на сайт, нужно немного повозиться — закачать файл плеера и аудиофайл на хостинг, а затем составить код для вставки в статью. Кроме того, аудиофайлы занимают место на хостинге, а их прослушивание отбирает ресурсы. Если аудиоподкастов на блоге много, и их количество постоянно увеличивается, то может наступить момент, когда блог начнет ощутимо тормозить.

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

Для начала рассмотрим одно из облачных хранилищ — облако Box .

Облако Box

Данное облачное хранилище при регистрации дает 10 Гб бесплатно, что само по себе очень неплохо. Также оно интересно своими возможностями по его использованию в качестве хранилища музыки для сайтов и блогов. Дело в том, что с этим сервисом поставить музыку — дело легкое и простое.

Для регистрации переходите на облако Box, нажимаете на кнопку Sign Up в правом верхнем углу, выбираете регистрацию Personal , заполняете поля, и подтверждаете свою почту, кликнув по ссылке в письме.

После этого Вы попадаете в свой кабинет. В последующем, чтобы попасть в кабинет, Вам нужно будет нажимать на кнопку Log In .

Файлы можно размещать, перетаскивая их в соответствующую область в облаке. После размещения они будут появляться в списке. Справа от названия аудиофайла Вы увидите надпись Share . Справа от ссылки Вам нужно будет нажать на иконку настроек в виде шестеренки. Нажимаете на иконку, и выбираете вкладку Embed . Подбираете размер и тему, и берете код для вставки музыки на сайт.

С помощью облака Box можно сделать и плейлист. Для этого нужно зайти в настройки ссылки, которая находится под списком аудиофайлов.

Теперь давайте разберемся с еще одним вариантом вставки музыки на сайт — с помощью сайта для прослушивания музыки ПростоПлеер .

ПростоПлеер

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

Регистрироваться на данном сервисе необязательно — регистрация нужна только, если Вы хотите сохранять прослушанные треки в плейлистах, чтобы не искать их снова. У этого сайта также есть расширение для Google Chrome, которое позволяет слушать любимую музыку, без захода на сайт, прямо из браузера.

База аудиофайлов там достаточно большая — можно найти много хорошей музыки.

Итак, заходите на сайт ПростоПлеер, при необходимости загружаете свою музыку, или находите ту, которая нужна, из уже имеющихся вариантов.

Для вставки на сайт требуется зайти в опции файла, и выбрать пункт Код для вставки .

Код неплохо будет подредактировать, а именно, убрать все лишнее, и уменьшить высоту. Нам нужен только код между тэгами

Чтобы в дальнейшем было проще редактировать код, можете брать готовый образец, и изменять в нем только ID трека, который берется из нового кода.

Вот, в принципе, и все. На мой взгляд,способ вставки музыки на сайт с помощью сайта ПростоПлеер — самый простой. Не нужно даже регистрироваться. И при этом результат получается вполне достойный. Так что используйте, и желаю Вам в этом успеха!

Более подробные сведения Вы можете получить в разделах «Все курсы» и «Полезности», в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:

Также приглашаю добавиться в друзья в социальных сетях:

Еще по теме.

7 комментариев »

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

Впервые слышу об этом Облаке Box и сайте ПростоПлеер. Благодарю за расширение кругозора!

Я думаю это баловство — хранить своё в чужом кармане. Установить плеер на комп несравненно проще и ресурсов он будет тратить несравненно меньше, чем всё это скачивать из сети.

Вообще очень много классных находок нахожу у вас на сайте! Спасибо! Музыка это здорово:)

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

Спасибо, искала и то, что нужно нашла на вашем сайте.

Чувствую найду еще много полезного.

с SoundHost можно вставить музыку на любой сайт быстро и легко.

Источник

Читайте также:  Где и как познакомиться с мужчиной вашей мечты 49 простых правил скачать бесплатно