Разное

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

20.03.2019

Содержание

Атрибут preload | htmlbook.ru


Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 3.0+ 10.5+ 3.1+ 4.0+ 2.2+ 3.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Используется для загрузки аудиофайла вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay.

Синтаксис

<audio preload="none | metadata | auto">
</audio>

Значения

none
Не загружать аудиофайл.
metadata
Загрузить только служебную информацию (продолжительность звучания и др. ).
auto
Загрузить аудиофайл целиком при загрузке страницы.

Пустое значение атрибута воспринимается как auto.

Значение по умолчанию

none

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>preload</title>
 </head> 
 <body>
   <audio autoplay preload="metadata">
    <source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>.
   </audio>
 </body> 
</html>

Браузеры

Opera вместо preload поддерживает атрибут autobuffer.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку.

Так и результат сразу увидят.

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

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

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

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

Шаг 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

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


Фоновая музыка

Прежде чем устанавливать на сайт(особенно на главную его страницу) фоновую музыку, следует подумать, не будет ли она раздражать посетителей, ведь у каждого из нас свои предпочтения к музыке. Также стоит учитывать, что многие пользователи могут зайти на ваш сайт, слушая свою музыку, им будет не очень приятно слушать одновременно два музыкальных трека. Также у посетителей должен быть установлен веб-плеер (Quick Time, VLC media player), иначе ничего они не услышат. Существует два способа задать фоновую музыку, однако мы рассмотрим только один, т.к второй работает не во всех браузерах и задается в контейнере head, что не всегда удобно.

Пример вставки фоновой музыки:

<body>

<embed src=»http://phantomx5.ucoz.ru/Lisa_Miskovsky-.mp3″ autostart=»true» hidden=»false» loop=»false» align=»bottom»> </embed>

</body>

Благодаря этому коду сейчас на сайте играет фоновая музыка. Рассмотрим более детально параметры и значения тега <embed>

  • autostart – параметр определят будет ли автоматически играть музыка после открытия станицы. При значении true – да, при false – нет.
  • loop – параметр определяет будет ли фоновая музыка играть бесконечно или один раз прозвучит и все. При значении true – да, при false – только один раз.
  • hidden — определяет наличие панели управления плеера. При значении true – отображается, при false – отсутствует.
  • width — задает ширину панели управления проигрывателя (если проигрыватель не отображается, то и задавать не следует)
  • height — задает высоту панели управления проигрывателя (если проигрыватель не отображается, то и задавать не следует)

Есть еще один способ задать фоновую музыку, однако качество такой музыки будет намного хуже, так как парный тег <bgsound>, работает с файлами таких форматов — wav, au, midi. Данный тег имеет следующие параметры:

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

Пример использования такой фоновой музыки: <bgsound src=»http://phantomx5.ucoz.ru/Frozen_Madonna.mid» loop=»1″></bgsound>

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


Подключение проигрывателей

Проигрыватели также можно настроить, чтоб они автоматически начинали воспроизведение музыки(в качестве фоновой), при загрузке веб-страницы, преимуществом такого способа является, что музыку можно остановить, если уж сильно раздражает. Можно подключить проигрыватель с помощью того же <embed>, включив отображение плагина, например:

<body>

<embed src=»http://phantomx5. ucoz.ru/Lisa_Miskovsky-.mp3″ autostart=»true» hidden=»true» loop=»false» align=»bottom»> </embed>

</body>

Вид в браузере:

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

В HTML5 существует еще один парный тег <audio>, к сожалению он воспроизводит музыку не во всех браузерах, однако браузеры постоянно обновляются и улучшаются, так что это лишь вопрос времени. Если рассматривать Google Chrome, то он предпочтет тег <audio>, чем открывать веб-проигрыватели, ведь у него есть свои, встроенные. Opera наоборот, скорее «предпочтет» первый способ, так как mp3 в данном теге не поддерживает. Тег <audio> имеет следующие параметры:

  • src – задает путь к воспроизводимому файлу
  • autoplay – автоматическое воспроизведение файла при открытии страницы
  • loop — зацикливает воспроизведения трека.
  • control — добавляет панель управления

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

<audio src=»http://phantomx5.ucoz.ru/Lisa_Miskovsky-.mp3″ controls=»controls»></audio>

 

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

Тег <embed> предназначен не только для вставки в HTML-код музыки, однако с появлением тега Тег <object>, благодаря которому можно вставлять большинство мультимедийных объектов, он немного устарел. Более подробно рассмотрим <object> на следующем уроке: Встраивание мультимедийных объектов

Видео и аудио контент — Изучение веб-разработки

Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами <video> и <audio> ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.

Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности размещения на сайтах видео и аудио контента, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Такая технология работала нормально, но у неё было много недостатков, включавших плохую работу с функционалом HTML и CSS, проблемы безопасности и проблемы доступности.

Собственное решение устранило бы большую часть этой проблемы, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификации HTML5 были добавлены такие функции, с элементами <video> и <audio>, и некоторые новые JavaScript API для их управления. Мы не будем рассматривать JavaScript здесь — только необходимые основы, которые могут быть достигнуты с помощью HTML.

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

Примечание: Прежде всего, вы также должны знать, что есть немало OVPs (провайдеров онлайн-видео) вроде YouTube, Dailymotion и Vimeo, а также онлайн аудио-провайдеров вроде Soundcloud. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.

Элемент <video>

Элемент <video>  позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:

<video src="rabbit320.webm" controls>
  <p>Ваш браузер не поддерживает HTML5 видео. Используйте <a href="rabbit320.webm">ссылку на видео</a> для доступа.</p>
</video>

Описание параметров:

src
Точно так же, как для элемента <img> , атрибут src (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.
controls
Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны  эпилепсией). Вы должны либо использовать атрибут controls,  чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие JavaScript API. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.
Параграф внутри тегов <video>
Это называют резервный контент — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент <video>, позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.

Встроенное видео будет выглядеть примерно так:

Вы можете посмотреть живой пример (взгляните также на исходный код).

Поддержка нескольких форматов

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

Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются форматами контейнеров. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.

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

Аудио и видео треки также находятся в разных форматах, например:

  • Контейнер WebM обычно загружает звук Ogg Vorbis с видео VP8 / VP9. Поддерживается в основном в Firefox и Chrome.
  • Контейнер MP4 часто включает аудио AAC или MP3 с видео H. 264. Поддерживается в основном в Internet Explorer и Safari.
  • Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.

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

Еще одна такая ситуация — всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах <video> и <audio>, они могут поддерживать MP3 из-за его популярности.

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

Поддержка медиафайлов в браузерах

Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные кодеки, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.

Примечание: Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года,  так что браузеры, которые не являются держетелями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.

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

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

Еще одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определенных типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.

Так как мы это сделаем? Взгляните на следующий обновленный пример (и попробуйте живой пример):

<video controls>
  <source src="rabbit320. mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Ваш браузер не подддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p>
</video>

Здесь мы изъяли атрибут src  из нашего тега <video>, и вместо этого включали отдельные  элементы <source>, каждый из которых ссылается на собственный источник. В этом случае браузер пройдется по элементам <source> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.

Каждый элемент <source> также имеет атрибут type. Он не обязательный, но рекомендуется его включать — он содержит MIME types видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если type не включен, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.

Другие параметры <video>

Есть ряд других параметры, которые вы можете включить в HTML5 элемент video. Взгляните на наш третий пример:

<video controls
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

На выходе получим нечто, подобное этому:

Новые параметры:

width and height
Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью CSS. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона.
autoplay
Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим.
loop
Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.
muted
Этот атрибут заставляет проигрыватель воспроизводить звук, отключенный по умолчанию.
poster
Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.
preload

этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трех значений:

  • "none" не буферизирует файл
  • "auto" буферизирует медиафайл
  • "metadata" буферирует только метаданные файла

Вы можете найти приведенный выше пример для воспроизведения на Github (также просмотрите исходный код.) Обратите внимание, что мы не включили атрибут autoplay в live-версию — если видео начнет воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!

Элемент <audio> 

Элемент <audio> работает точно так же, как элемент <video>, с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead. </p>
</audio>

В браузере это вызывает следующее:

Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента — вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:

  • Элемент <audio> не поддерживает атрибуты width и height — опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.
  • Он также не поддерживает атрибут​​​​​ poster опять же, из-за отсутствия визуального компонента. 

Помимо этого, <audio> поддерживает все те же функции, что и <video> — просмотрите приведенные выше разделы для получения дополнительной информации о них.

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

  • У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).
  • Другие могут не слышать звук, потому что они находятся в шумной обстановке (например, в переполненном баре при показе спортивной игры) или, возможно, не хотят беспокоить других, если они находятся в тихом месте (например, в библиотеке).
  • Люди, которые не говорят на языке из видео, могут захотеть увидеть текстовую расшифровку или даже перевод, чтобы помочь им понять медиа-контент.

Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом WebVTT и элементом <track>.

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

WebVTT — это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространенными являются:

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

Типичный файл WebVTT будет выглядеть примерно так:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
Это первый субтитр.

2
00:00:30.739 --> 00:00:34.074
Это второй.

  ...

Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:

  1. Сохраните его как .vtt— файл, в разумном месте.
  2. Ссылка на файл .vtt с элементом <track>. <track> должен быть помещен в <audio> или <video>, но после элементов <source>. Используйте атрибут kind, чтобы указать, являются ли реплики субтитрами, титрами или описаниями. Кроме того, используйте srclang, чтобы сообщить браузеру, на каком языке вы записывали субтитры.

Вот пример:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

Это приведет к просмотру видео с субтитрами, таким как:

Подробнее читайте в разделе добавление титров и субтитров к видео HTML5. Вы можете найти пример, который соответствует этой статье в Github, написанной Яном Девлином (см. также исходный код). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами.  Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант — английский, немецкий или испанский.

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

Активное обучение: Внедрение собственного аудио и видео

Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придется сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовали сделать это!

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

Мы хотим, чтобы вы сделали следующие действия:

  1. Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.
  2. Создайте новый HTML файл в том же каталоге и назовите его index.html.
  3. Добавьте элементы <audio> и <video> на страницу; чтобы они отображали элементы управления браузером по умолчанию.
  4. Введите оба варианта элемента <source>, чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать type атрибуты.
  5. Дайте элементу <video> заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.

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

Мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Web, используя такие технологии, как <iframe> и <object>.

Фоновая музыка на сайте

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

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

Музыка начинает звучать сразу после открытия страницы,у многих проигрывателей нет даже кнопки ее отключить,а еще чаще проигрывателя вообще не видно. К тому же для фоновой музыки нет универсального проигрывателя для всех браузеров.В России больше всего используются четыре браузера — Opera,Mozilla Firefox,Internet Explorer,Google.

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

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

</bgsound>

<bgsound src=»name.mid» balance =»0″ volume=»500″ loop=»1″></bgsound>

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

Можно вставить фоновую музыку на ваш сайт HTML с помощью контейнера audio,для всех браузеров кроме Internet Explorer.При вводе в код проигрывателя элемента управления controls, в проигрывателе будут видны кнопки управления «Play», «Пауза»,без controls кнопки не будут отображаться.

Если вы видите это сообщение ,значит ваш браузер не поддерживает элемент audio.

Код этого проигрывателя.

Если вы видите это сообщение ,значит ваш браузер не поддерживает элемент audio.

Если ввести в код autoplay=»autoplay,то музыка будет играть сразу ,как откроется страница.

Если вы видите это сообщение ,значит ваш браузер не поддерживает элемент audio.

Между тегами <p> и </p> можете вставить свой текст.

Попробуйте вариант проигрывания, когда посетитель вашего сайта нажимает на ссылку.В этом случае музыка должна быть в формате «WAV» и «Midi».Напишите обычную ссылку в HTML,замените вместо имя свой файл.
Этот вариант работает в IE с кнопками управления ,в других браузерах проигрыватель невидим,но музыка играет и если у вас Google,Opera,Mozilla, то лучше зту ссылку не включать ,и если вы захотите выключить музыку то вам придется покинуть страницу ,или придется уменьшить громкость.

Фоновая музыка

<a href=»имя.wav»>Фоновая музыка WAV и Midi</a>

А это еще один вариант проигрывания музыки на сайте. Он работает в Internet Explorer и Google Chrome.Здесь есть панель управления,кнопка включения/выключения. Если у вас не установлены плагины в Mozilla Firefox музыка проигрываться не будет.Если в Opera у вас вместо проигрывателя написано что нет плагина,щелкните по надписи, в открывшемся окошке нажмите кнопку «Открыть содержимое»,затем еще раз в другом окне «Открыть» и вы сможете прослушать музыку.
<embed src=»имя.mp3″ autostart=»true» hidden=»false» loop=»false» align=»center»>
</embed>

Размещается он между тегами <body></body>

Атрибуты тега <embed>

src=»имя.mp3″ —Указывает на расположение файла,который должен
     находиться в одной папке с сайтом,или src=»htpp://адрес ресурса/имя.mp3″
     если он находиться в Интернете.

autostart=»true» —Автостарт проигрывания — да, или «false»-нет.

hidden=»false» —Будет ли скрыта панель управления проигрывателя -нет, или      «true» -да.

loop=»false» —Повторение проигрывания -нет, или «true»-да.

width=»300″ —Ширина проигрывателя в пикселях -изменяемая.

height=»65″ —Высота проигрывателя в пикселях -изменяемая.

align=»center»—Расположение проигрывателя в ячейке,возможно
      «left»-левый,»center»-центр, «right»-правый.

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

Вставка аудио. Вставить музыку в видео онлайн Как вставить аудио в 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 Explorer Chrome Opera Safari Firefox
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-справочник и другие материалы можно и нужно скачать !

Фоновая музыка. Учебник 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>.. о данных тегах я постараюсь Вам рассказать в пока что ещё ненаписанной главе «объекты».



HTML Код фоновой музыки

Как добавить фоновую музыку на сайт с помощью HTML.

Вы можете добавить код фоновой музыки HTML на свой веб-сайт, используя элемент , но опуская атрибут control . Атрибут controls указывает, что должны быть элементы управления (например, кнопка «Воспроизвести», кнопка «Пауза» и т. Д.), Поэтому при удалении этого атрибута никакие элементы управления отображаться не будут.

Попробуй

Вы можете попробовать это на примере ниже.Обновите control с autoplay , затем щелкните Refresh Result .

Это скроет элементы управления и автоматически проиграет музыку в фоновом режиме.

Если вы читаете это, значит, ваш браузер не поддерживает элемент audio.

Если вы не видите приведенный выше пример, возможно, ваш браузер еще не поддерживает элемент (этот элемент был введен в HTML5).Для браузеров, которые не поддерживают этот элемент, вы можете вложить элемент в элемент . Таким образом несовместимые браузеры будут игнорировать элемент и переходить сразу к элементу . Хотя этот элемент также был представлен только в HTML5, он существует уже давно (но только не является частью официальной спецификации HTML) и широко поддерживается браузерами.

Атрибуты для элемента

Элемент поддерживает ряд атрибутов — как глобальных, так и локальных. Чтобы просмотреть их список вместе с описанием, посетите страницу тегов HTML5 .

Вы также можете добавить код фоновой музыки HTML на свою веб-страницу, используя атрибут hidden тега . Опять же, вы можете вложить этот тег в тег для максимальной совместимости с браузером. Для этого см. Музыкальный код HTML.

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

Добавление элементов управления звуком

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

HTML Аудио


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


Элемент HTML