Разное

Вставка музыки в html: Как вставить аудио в html

12.05.2023

Тег HTML аудио и музыка на сайт

Рейтинг: 4 из 5, голосов 13

23 декабря 2017 г.

Тег <audio> в HTML используется для вставки на сайт воспроизводимого аудио. Обычно содержит вложенные элементы <source> для указания нескольких вариантов источника аудио-файла.

Текстовую дороку к файлу можно указать при помощи тега <track>.

Этот тег был введен в HTML5.

Синтаксис

<audio>вложенные теги / альтернативный текст</audio>

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

Примеры использования <audio> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Вставка аудио на сайт</title>
</head>
<body>
<audio autoplay controls>
<source src="/music/track.mp3" type="audio/mpeg">
<source src="/music/track. ogg" type="audio/ogg">
Воспроизведение аудио-файла не поддерживается браузером
</audio>
</body>
</html>

Поддержка браузерами

Тег
<audio> Да 9+ Да Да Да
Поддержка форматов
MP3 Да Да Да Да Да
WAV
Да Нет Да Да Да
Ogg Да Нет Да Нет Да

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

Атрибут Значения Описание
autoplay не указывается / autoplay

Если указан, аудио-дорожка будет воспроизведена, как только будет загружена.

controls не указывается / controls

Если указан, будут выведены кнопки управления плеером (play, pause и т.д.).

loop не указывается / loop

Если указан, аудио-дорожка будет циклически воспроизводиться до закрытия страницы (после завершения, воспроизведение начнется сначала).

muted не указывается / muted

Если указан, аудио-дорожка будет воспроизводиться без звука.

preload

auto
metadata
none

Определяет особенности загрузки аудио элемента.
auto — загружать аудио-дорожку полностью при загрузке страницы.
metadata — при загрузке страницы загружается только техническая информация (метаданные, например, продолжительность аудио).
none — не загружать аудио при загрузке страницы.

Если указан атрибут autoplay

, атрибут preload будет проигнорирован.

src URL

Адрес аудио-файла.

by Lebedev

HTML/Атрибут autoplay (Элемент audio)

Синтаксис

<audio autoplay="autoplay">
  <source src="...">
  ...
</audio>

Описание

Атрибут / параметр autoplay (от англ. «autoplay» ‒ «автозапуск, автовоспроизведение») устанавливает автоматическое воспроизведение аудио файла. Воспроизведение начинается сразу же после полной загрузки страницы и при условии, что данный аудио файл начнёт воспроизведение без остановок (прерываний).

Примечание

Рекомендуется вместо соответствующих скриптов автозапуска использовать именно этот атрибут, так как он позволяет пользователю отменить автоматическое воспроизведение, когда это необходимо (например, при использовании программы чтения с экрана).


Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.


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

Верс.Раздел
HTML
2.0
3.2
4.01
5. 04.7.10.7 Ready states
The autoplay attribute…
5.14.7.14.7. Ready states
The autoplay attribute…
XHTML
1.0
1.1


Значения

Данный атрибут является логическим атрибутом. Может указываться либо без значения, либо с пустым значением, либо со значением «autoplay».

<audio autoplay> ... <audio>
<audio autoplay=""> ... <audio>
<audio autoplay="autoplay"> ... <audio>

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>

<title>Параметр autoplay (Элемент audio)</title>
</head>
<body>
<h2>Пример использования атрибута «autoplay»</h2>
<p>Рахманинов &#8210; Сад Эдема<br>
<audio controls=»controls» autoplay=»autoplay»>
<source src=»/examples/multimedia/audio/Rachmaninov_-_The_Garden_of_Eden. mp3″ type=»audio/mp3″>
Ваш web-браузер не поддерживает HTML элемент «<a href=»/html/audio/»>audio</a>».
</audio>
</p>
</body>
</html>

Параметр autoplay (Элемент audio)

Как встроить аудио в HTML5

Рекламные объявления

В этом уроке вы узнаете, как встроить аудио в документ HTML.

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

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

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

Использование элемента HTML5 audio

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

В следующем примере аудио просто вставляется в документ HTML5 с использованием набора элементов управления браузера по умолчанию, причем один источник определяется атрибутом src .

Пример
Попробуйте этот код »
  

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

Пример
Попробуйте этот код »
 

Трек «ogg» в приведенном выше примере работает в Firefox, Opera и Chrome, в то время как тот же трек в формате «mp3» добавляется, чтобы звук работал в Internet Explorer и Safari.


Связывание аудиофайлов

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

Давайте попробуем следующий пример, чтобы понять, как это в основном работает:

Пример
Попробуйте этот код »
 Дорожка 1
Дорожка 2 

Использование элемента object

Элемент используется для встраивания различных типов мультимедийных файлов в документ HTML. Первоначально этот элемент использовался для вставки элементов управления ActiveX, но согласно спецификации объектом может быть любой медиа-объект, такой как аудио, видео, PDF-файлы, Flash-анимация или даже изображения.

Следующий пример кода встраивает простой аудиофайл в веб-страницу.

Пример
Попробуйте этот код »
 
 

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


Использование элемента embed

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

Следующий фрагмент кода встраивает аудиофайлы в веб-страницу.

Пример
Попробуйте этот код »
 
 

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

Предыдущая страница Следующая страница

как я могу разместить музыку на своей веб-странице, встроить файлы midi (.mid) и файлы mp3 (.mp3)

 

как я могу добавить музыку на свою веб-страницу?

музыку можно добавлять на страницы с < вставить > ярлык добавление музыки на веб-страницы может быть проблематичным, некоторым браузерам требуются дополнительные плагины, а иногда браузеры не могут воспроизводить звуковой файл, если тег внедрения находится в таблице, но, вероятно, самая большая проблема заключается в том, что html-кодеры достигают определенного уровня навыков и доходят до стадии, когда они начать думать о добавлении свистков и колокольчиков в их код, или точнее начать думать
» Я собираюсь скачать лучший mp3 в Интернете и позволить посетителям моей веб-страницы послушать его, о нет, подождите, что я говорю, «пусть они слушают это», если я предоставлю посетителям возможность слушать к этому они могут полностью пропустить это и никогда не узнать, какой у меня хороший вкус, не говоря уже о том, какой я хороший кодер, я знаю, я заставлю их послушать это !! »

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

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

На этом сайте используются только музыкальные файлы .mid размером 25–50 КБ или меньше

встроенный HTML-код

ниже приведен пример html-кода для тега внедрения
< встроить src= » звуковой файл.mid » скрытый = » ложь « граница = » 0 » ширина = » 310 » высота= » 45 » автозапуск = « правда » автозапуск = « правда » цикл = « правда » volume= » 75% » >

используйте приведенный выше пример исходного HTML-кода для воспроизведения звука на веб-странице, вот пример исходного HTML-кода

как работает встраивание

как работают атрибуты внедрения

src= » звуковой файл.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *