Сайт

Как вставить музыку на сайт html: Атрибут autoplay | htmlbook.ru

21.02.1970

Содержание

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

Здравствуйте уважаемые начинающие веб-мастера.

Очень частый вопрос: как добавить на сайт аудио, то-есть музыку, или собственное голосовое приветствие.

Пошаговый ответ в этой статье.

Шаг 1.

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

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

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

Шаг 2.

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

Для пользователей WordPress, это папка wp-content.

Для аудио файлов, в папке wp-content создаём папку audio, так как в коробочке она заранее не предусмотрена и уже в неё загружаем скачанный файл.

Шаг 3.

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

а) Музыка звучит на отдельной странице.

Заходим на нужную страницу или запись, переходим в Редактировать, переводим редактор в режим Текст, и в любом месте текстового поля вставляем следующий код:

<audio>
<source src="https://starper55plys.ru/wp-content/audio/lybe1.mp3">
</audio>

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

Для пользователей WordPress нужно будет только поменять название моего сайта starper55plys.ru на своё, и название моего файла lybe1 на название своего.

б) Музыка звучит на всех страницах сайта.

Заходим в Консоль — Внешний вид — Редактор — Заголовок (header.php) и после открывающего тега <body> Вставляем этот же код.

Не забудьте обновить файл.

Теперь о настройках.

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

1. controls

<audio controls="controls">

Если добавить этот атрибут, то в том месте где вы расположите код, на странице появится вот такая панелька упраления

2. autoplay

<audio autoplay="autoplay">

Музыка начинает играть сразу после загрузки страницы.

3. loop

<audio loop="loop">

Музыка после завершения повторяется бесконечно.

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

Как сделать голосовой файл

Для создания голосового файла потребуется микрофон.

Вставьте разьём микрофона в гнездо на компьютере и пройдите в меню Пуск — Все программы — Стандартные — Звукозапись.

Щелкаем по Звукозапись, и появляется вот такое окно

Нажимаем Начать запись и можно произносить в микрофон своё приветствие, или что-то ещё.

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

Сохраняете его в нужную папку, чтоб не потерять.

Теперь этот файл нужно загрузить в корень сайта в созданную папку audio, туда же где и музыка.

На страницы файл вставляется и настраивается точно так же как и музыкальный.

Если вам нужно запустить и музыку и голосовое приветствие, то каждый из файлов помещаете в отдельный тег </audio>.

Теперь, я надеюсь, вам не сложно будет установить музыку на сайт

Желаю творческих успехов.

Вставляем видео и делаем ему рамочку < < < В раздел > > > Форматирование текста

Фоновая музыка. Учебник html

Глава 13

.. или то чего лучше не делать.

Раскрывая все возможности HTML языка, в тринадцатой несчастливой главе, вынужден Вам рассказать о теге <bgsound> который позволяет внедрять в страницу сайта фоновую музыку. Другими словами когда пользователь зайдёт на Ваш сайт он услышит звучание музыки указанной с помощью вышеупомянутого тега, ну естественно если у него подключены колонки или наушники.

Итак, тег <bgsound> первое, что необходимо сказать об этом теге то, что он не входит в официальную спецификацию HTML, а является инициативой компании Microsoft для браузера Internet Explorer, так что большинство других браузеров игнорируют данный тег.

Для того чтобы вставить аудио файл в какую либо страницу сайта, в качестве фоновой музыки, нужно в теге <bgsound> с помощью атрибута src указать путь к аудио файлу

Вот так:

<bgsound src=»music.mid»> — закрывающий тег необязателен.

Ну и собственно вставить эту конструкцию в html документ, обычно тег <bgsound> располагают в «голове» документа между тегами <head> </head>.

Сам аудио файл должен быть в формате: WAV, AU или MIDI.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>
<head>
<title>Фоновая музыка</title>
<bgsound src=»mammoth.mid»>
</head>
<body>
<table border=»0″ align=»center» cellspacing=»0″ cellpadding=»15″>
<tr>
<td valign=»top»><img src=»mammoth. jpg» align=»left» alt=»Ищу маму..»></td>
<td>
<h3>Песенка мамонтенка.</h3>

<pre>
По синему морю, к зелёной земле
Плыву я на белом своём корабле.
На белом своём корабле,
На белом своём корабле.
… … …
<b>Музыка: В. Шаинский </b>
<b>Слова: Д. Непомнящий</b>
</pre>
</td>
</tr>
</table>
</body>
</html>

Музыка нааас сближала.. тайною нааашей стала.. 🙂

К тегу <bgsound> могут быть применены следующие атрибуты:

  • src — адрес звукового файла
  • loop — число повторов звукового файла
  • balance — стереобаланс
  • volume — громкость

Теперь поподробнее:

src — адрес звукового файла. . ну думаю понятно указывает путь к аудио файлу, например такая запись:
<bgsound src=»music/mammoth.mid»> говорит, что рядом с документом есть папка music, а в ней лежит музыкальный файл mammoth.mid который следует воспроизвести в качестве фоновой музыки.

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

balance — стереобаланс между правой и левой колонками компьютера, возможный диапазон значений от -10000 до 10000. Так, например значение -10000 переведёт весь звук на лёвую колонку компьютера при этом из правой колонки будет доносится лишь тишина.. Значение по умолчанию равно 0 т.

е. распределять звук равномерно между левой и правой колонками.

volume — громкость можно определить значениями в диапазоне от -10000 до 0, где ноль это максимальная громкость, а -10000 минимальная. Значение 0 стоит по умолчанию.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Фоновая музыка</title>
<bgsound src=»music/mammoth.mid» loop=»-1″ volume=»-800″ balance volume=»1500″>
</head>
<body>

<table border=»0″ align=»center» cellspacing=»0″ cellpadding=»15″>
<tr>
<td valign=»top»><img src=»mammoth.jpg» align=»left» alt=»Ищу маму..»></td>
<td>
<h3>Песенка мамонтенка.</h3>
<pre>
По синему морю, к зелёной земле
Плыву я на белом своём корабле.
На белом своём корабле,
На белом своём корабле.
… … …
<b>Музыка: В. Шаинский </b>
<b>Слова: Д. Непомнящий</b>

</pre>
</td>
</tr>
</table>
</body>
</html>

Вот собственно и всё.. а теперь внимательно читаем полезные советы..

  • Использование фоновой музыки, это не есть хорошо по нескольким причинам:

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

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

    В-третьих, музыкальные записи в форматах WAV, AU и MIDI, как правило, низкого качества, кому нравится слушать некачественную музыку?

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

    Ну и в-пятых, как уже говорилось раннее тег <bgsound> это придумка для браузера Internet Explorer так что в большинстве других браузеров музыка играть не будет! Кроме того, так как данный тег не входит в спецификацию HTML, то документ с этим тегом будет не валидным.

  • Если уж Вам действительно так необходима музыка на сайте, то внедряйте её с помощью тегов <embed> и/или <object>.. о данных тегах я постараюсь Вам рассказать в пока что ещё ненаписанной главе «объекты».



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

Подробности
Категория: Блогобзор
Автор: SEO & WEB — KELL4
Зачем нужна музыка на сайте?

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

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

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

1 способ.

Создание аудио проигрывателя музыки на сайте или плеера

Технология проста, создается файл проигрывателя, чтобы он не нагружал сайт или сервер выбираем технологию которую будем использовать: JavaScript, jQuery, AJAX. На основе выбранной технологии разрабатываем скрипт для нашего сайта и вставляем на сайт. Скрипт создается в зависимости от того, что Вам нужно: автоматическое воспроизведение фоновой музыки на сайте или управляемый посетителем плеер. Далее создаем папку в корне сайта для музыки и загружаем в нее аудио файлы.

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

2 способ.

Установка музыки на сайт с помощью HTML

Используя возможности HTML и браузера можно вставить на сайт плеер или фоновую музыку. Технология так же проста: создается HTML5 код с тегом «audio» и этот код прописывается в сайт, а когда пользователь заходит на сайт он видит минимизированный плеер, посетитель нажимает кнопку плэй или автоматически начинает играть фоновая музыка. Вид плеера будет зависеть от браузера с которого зашел посетитель, но функциональность останется стандартной: кнопки Play, Stop, Next, Prev, Volume. Выглядит плеер с HTML кодом вот так:

Cам код для вставки выглядит так:

Как вы могли заметить команда «controls autoplay» включает автопроигрывание музыки как только посетитель заходит на сайт.

Альтернативный вариант HTML кода это тег «bgsound», это вообще не использовать визуальный плеер, при посещении сайта начнет играть музыка на сайте, но регулировать громкость, поставить на паузу и т.д. пользователь не сможет. Настройка громкости воспроизведения звукового файла настраивается в самом коде.

Форматы звуковых файлов для проигрывания музыки на сайте могут быть: WAV, AU, MIDI, MP3, OGG (расширения). Музыкальные файлы загружаются на сайт, либо используются ссылки на те сайты, где располагается звуковой файл, главное, чтобы он находился в открытом доступе.

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

Такая фича как фоновый звук на html странице на сайте нужна довольно редко, но все же, было дело мне понадобилась. Реализуется очень просто.

Фоновый звук bgsound

Таким образом можно вставить в html страницу на сайте аудифайл в одном из форматов: WAV, AU, MIDI. В  код нужной страницы в теги body добавляем  тег:

<bgsound src=»путь_к_звуковому_файлу» loop=»1″></bgsound>

Теперь при просмотре этой страницы всегда будет присутствовать фоновая музыка.

Параметры тега <bgsound>:

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

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

Музыка в html. Тег <embed>

Это одиночный тег, то есть закрывающего тега нет. Проигрывает множество аудиоформатов. Пример вставки:

<embed src=»/music/1.mp3″ type=»audio/mpeg» hidden=»true» autostart=»true» loop=»true»></embed>

src = «путь к аудио-файлу».
hidden = «true» — скрывает панель управление воспроизведением. Скрывать панель нужно если только очень нужно, потому как многих раздражает на сайтах музыка, которую нельзя выключить — может спит кто, а может просто играет своя песня…
autostart = «true» — начинает воспроизводить звук сразу при загрузке страницы.
loop = «true» — бесконечное зацикливание звука, «false» — однократное воспроизведение, «х», где Х — число повторов.
type=»audio/x-mpeg» — подсказывает браузеру какой плагин использовать для воспроизведения (не обязателен, но надежнее указать) Если аудио-файл НЕ .mp3, лучше  не использовать type вообще.
width и height — задают размер панели управления звуком в пикселях, например:. Если захотите использовать эти параметры, тогда не забудьте удалить hidden = «true».
volume = «x» [X=0…100] — громкость звука в процентах, но не каждый браузер поддерживает регулировку звука.

Хорошо настраивается, правильно понимается всеми браузерами (за исключением регулировки звука), проигрывает мп3

Вставка аудио. Вставить музыку в видео онлайн Как вставить аудио в html

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

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

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 — только один раз

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


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

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

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

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

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


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

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

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

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



Тег audio

Аудио в HTML 5





Тег audio не поддерживается вашим браузером.
Скачайте музыку.

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

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

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

Есть два способа для вставки музыки в 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 можно использовать тег

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

Синтаксис тег
Браузер не поддерживает audio controls >

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

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

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

Теги, атрибуты и значения

  • — определяет фоновый HTML звук, музыку на сайте . Располагается в секторе .
  • — определяет url звукового файла в формате Wav или Mp3.
  • loop=»» — определяет количество проигрываний.
  • volume=»-1000″ — регулирует громкость звука. В данном случае обозначенная величина будет вычтена из текущего уровня громкости, установленного на компьютере пользователя.
  • balance=»0″ — регулирует баланс звучания.

Внимание! Описанный выше метод внедрения фонового звука в HTML -страницу приемлем только для браузеров Internet Explorer и Opera ранних выпусков. Для современных браузеров он не подходит ⇒ музыка и звук на странице сайта не воспроизводятся! Поэтому смотрим ниже , где подробно рассмотрен кроссбраузерный способ вставки звука и музыки на сайт для всех браузеров (Opera, Firefox, Internet Explorer, Chrome).

Звук в HTML или музыка на сайте для всех браузеров

Фоновый HTML звук для Opera, Firefox, Internet Explorer, Chrome:

Размещается код в секторе

.

Aтрибуты и значения

  • autostart=»» — определят будет ли музыка проигрываться автоматически при открытии интернет-станицы или нет. Возможны значения: true — да или false — нет.
  • loop=»» — определяет будут ли повторяться проигрывания. Возможны значения: true — да или false — нет.
  • hidden=»» — определяет будет ли скрыта панель управления плейера или нет. Возможны значения: true — да или false — нет. Если не будет, то указываются размеры панели: .

С овет напрашивается сам собой! Используйте фоновый HTML звук или музыку на своем сайте только в случае, когда это действительно оправдано!

Описание

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

Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры
КодекInternet ExplorerChromeOperaSafariFirefox
ogg/vorbis
wav
mp3
AAC

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

Синтаксис

Атрибуты

Звук начинает играть сразу после загрузки страницы. Добавляет панель управления к аудиофайлу. Повторяет воспроизведение звука с начала после его завершения. Используется для загрузки файла вместе с загрузкой веб-страницы. Указывает путь к воспроизводимому файлу.

Закрывающий тег

Обязателен.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Александр Клименков — Четырнадцать

Тег audio не поддерживается вашим браузером. Скачайте музыку.

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение аудиофайла

Браузеры

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

Приветствую, Друзья! В этом видео мы продолжим разговор о вставке объектов в HTML-документ.

После того, как скрипт подключен, мы должны дописать еще один скрипт, чтобы подключить саму оболочку плеера и указать параметры плеера:

Этот скрипт также необходимо прописать до закрывающего тега

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

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

Музыка

Здесь также стоит обратить внимание на ID , который использован для отображения плеера. Следует учесть, что если мы хотим добавить более одной композиции на страницу нам необходимо прописывать новый ID для каждого файла. Например, чтобы добавить еще один файл мы немного изменим ID , примерно так:

Музыка

Ну, вот в принципе и все. Теперь мы знаем, как добавить аудио в HTML-документ. Конечно, существуют и другие способы. Но я считаю в нашем случае этого варианта вполне достаточно.

Видео урок: Как вставить аудио в HTML-документ?

HTML-справочник и другие материалы можно и нужно скачать !

Вставить добавить аудио на сайт. Тег HTML5

В этой статье мы расскажем Вам как

вставить (добавить) аудио

файл на сайт. Сначала мы используем два флэш-плеера, а затем разместим аудио на сайте с помощью тега <audio> доступного в HTML5

Для примера, наш плеер, файл и скрипт находятся в папке PLAYER
Плеер 1
Пишем следующий код:

<script type="text/javascript" src="player/swfobject.js"></script>
<object type="application/x-shockwave-flash" data="player/player-a.swf">
<param name="movie" value="player/player-a.swf">
<!-- В этой строке меняем цвета у плеера,
также указываем проигрываемый файл -->
<param name="FlashVars" value="bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0x424141&rightbghover=0x636262&righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop=no&playerID=1&soundFile=player/music.mp3">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>

Плеер 2
Пишем следующий код:
<script type="text/javascript" src="player/swfobject.js"></script>
<object type="application/x-shockwave-flash" data="player/player-b.swf">
<param name="movie" value="player/player-b.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<!--
В этой строке меняем цвета у плеера, также указываем проигрываемый файл
-->
<param name="FlashVars" value="mp3=player/music.mp3&width=250&showstop=1&showvolume=1&buttonwidth=22&sliderwidth=12&volumeheight=8&bgcolor1=f5f5f5&bgcolor2=cccccc&slidercolor1=888888&slidercolor2=#333333&sliderovercolor=333333&buttoncolor=666666&buttonovercolor=000000&textcolor=666666&autoplay=0" />
</object>

Плеер HTML5
Тег <audio> добавляет аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами кодеков ограничен, поэтому лучше указывайте несколько аудио файлов.
<audio controls>
<source src="music.ogg" type="audio/ogg; codecs=vorbis">
<source src="music.mp3" type="audio/mpeg">
<source src="music.wav" type="audio/wav">
<source src="music.aac" type="audio/aac; codecs=vorbis">
</audio>

Для тега <audio> предусмотрено несколько атрибутов:
autoplay - звук начинает играть сразу после загрузки страницы;
controls - добавляет панель управления к аудиофайлу;
loop="loop" - повторение звукозаписи;
preload="none | metadata | auto" - загрузка аудиофайла вместе с загрузкой веб-страницы
none - файл не загружается;
metadat - загружается только служебная информация;
auto - файл загружается вместе с веб-страницей

Демонстрация

Как вставить аудио на сайт

Универсальный способ вставки audio в web страницу на основе HTML5 и флеш плеера. Работает во всех браузерах (и мобильных), легко настраивается, имеет минимум кода. Может проигрывать несколько файлов, как play лист. Не тормозит загрузку страницы, соответствует стандартам, открытый код. Идеальный вариант для вставки mp3 и других аудио в статью. Есть реализация для WordPress в виде плагина.

 

Вот как это будет выглядеть:

В этой статье я описываю реализацию аудио для тех, кто имеет возможность напрямую вставлять в свои статьи HTML и js код.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Замечание автора: Описанный в статье метод вставки видео прекрасно работает, однако он основан на использовании flash плеера, как проигрывателя аудио по умолчанию, что не является следованием актуальным тенденциям в вебе, где сейчас наблюдается сдвиг предпочтений в пользу использования js плееров. Но, на мой взгляд, решение должно быть как можно проще и без больших библиотек и множества кода, а js плееры, пока еще, оставляют желать лучшего в этом отношении.

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

Подход использует две технологии для проигрывания аудио файла и имеет три уровня «отказоустойчивости»:

  1. Первая, будет основной — это флеш плеер. Мною выбран был свободный WordPress Audio Player, который будет воспроизводить звук в тех браузерах, которые поддерживают flash плеер. Причина выбора мною в этом подходе flash, как основного плеера для аудио, в том, что он будет отображаться одинаково в разных браузерах в отличие от HTML5 плеера, вид которого, пока, оставляет желать лучшего. А подключать для воспроизведения аудио JS библиотеку управления HTML5 плеером мне кажется не совсем целесообразным, так как, такие JS плееры все же громоздки и не так идеальны, как хотелось бы. Для Воспроизведения видео файлов, безусловно, нужно использовать, как первичный, JS HTML5 плеер. Вообще, в идеале, хотелось бы обходиться для воспроизведения аудио и видео без использования дополнительных плееров (flash или JS), а использовать только возможности браузера.;
  2. Вторая — HTML5 тег <audio> — будет резервной для случаев, когда flash не поддерживается. В основном, это MAC и iГаджеты, но у них HTML5 плеер уже достаточно хорошо реализован в браузерах.
  3. Третий, резервный вариант, будет ссылка на скачку, когда первые две не сработают. Это вариант на крайний случай, так как сейчас уже все браузеры поддерживают HTML5 тег audio.

Нам понадобиться скачать zip с файлами flash плеера и js к нему (ссылка на официальный сайт ).

Нам нужны, толькло два файла из всего скачанного архива:

  • player.swf           —это сам flash player, который будет проигрывать mp3 файлы.
  • audio-player.js   —это js, который добавит функциональности по управлению плеером и устраняет неправильности его работы в разных браузерах.

Файлы из этого архива нужно разместить на сайте. Кстати js можете сжать.
В этой статье договоримся, что примеры будут использовать директорию «/audio» от корня вашего сайта.

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

РЕАЛИЗАЦИЯ РЕШЕНИЯ В ДВУХ ВАРИАНТАХ:

ПЕРВЫЙ — Формируем весь HTML код САМИ и вставляем в статью. Напишем шаблон HTML кода в котором нужно будет менять только пути для конкретного случая.

ВТОРОЙ — Формируем HTML ЧЕРЕЗ js. В пост (или куда вам нужно) вставляем маленький блок кода js.

 

Еще по теме:

Реализация video и audio в HTML5, шаблоны, schema.org микроразметка

HTML Аудио

Элемент HTML используется для воспроизвести аудиофайл на веб-странице.

Элемент HTML