Разное

Html audio: Атрибут autoplay | htmlbook.ru

28.02.2023

Содержание

HTML/Элемент audio

Синтаксис

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

Описание

Элемент audio (от англ. «audio» ‒ «аудио, звук») вставляет аудио файл в web-документ и даёт возможность управлять некоторыми настройками воспроизведения аудио. Расположение аудио указывается с помощью элемента source. Элемент audio может содержать в себе сразу несколько элементов source в каждом из которых (при помощи параметра «src») указывается вариация одного и того же аудио перекодированного с помощью различных кодеков (для кроссбраузерности аудио-файла).

Примечание

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

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Примечание: смотрите также форматы поддерживаемые браузерами.

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

Верс.Раздел
HTML
2.0—
3.2—
4.01
—
5.04.7.7 The audio elementПеревод
5.14.7.11. The audio element
XHTML
1. 0—
1.1—

Атрибуты

autoplay
Автоматическое воспроизведение музыки (после полной загрузки страницы).
controls
Устанавливает элементы управления.
crossorigin
Определяет то как элемент обрабатывает crossorigin запросы.
loop
Устанавливает повторение аудио файла.
mediagroup
Группы медиа элементов вместе с неявной MediaController.
muted
Блокирует возможность изменения громкости.
preload
Указывает тип предварительной загрузки файла.
src
Указывает местоположение аудио файла.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

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

</audio>
</body>
</html>

Элемент audio

Аудио | HTML | CodeBasics

Ранее, для добавления аудио на HTML-страницу, необходимо было пользоваться специальными «расширениями», которые давали возможность встраивать на страницу аудио-плеер. Начиная со стандарта HTML5, данная возможность есть по умолчанию. Она реализуется с помощью тега <audio>.

Данный тег является парным и в самом простом случае выглядит так:

<audio src="путь_к_аудио-файлу" controls></audio>

Атрибут controls добавляет элементы интерфейса для плеера. Каждый браузер реализует их по-своему, и единого стандарта на этот счёт нет

Тег

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

<audio controls>
  <source src="https://example.com/audio.mp3">
  <source src="https://example.com/audio.ogg">
</audio>

Задание

Добавьте аудио на страницу. Используйте следующие аудио файлы:

  • https://www.w3schools.com/html/horse.ogg
  • https://www.w3schools.com/html/horse.mp3

На всякий случай сделайте звук потише 😉

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

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

Прочитал урок — ничего не понятно 🙄

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

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

Полезное

← Предыдущий

Следующий →

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Аудио элемент | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Аудио элемент

— ЛС

  • Глобальное использование
    98,72% + 0,13% знак равно 98,85%

Метод воспроизведения звука на веб-страницах (без плагина). Включает поддержку следующих свойств носителя:

currentSrc , currentTime , paused , playbackRate , buffered , duration , played , seekable , ended , autoplay , loop , controls , volume и Приглушенный

Chrome
  1. 45% — Supported»> 4 — 107: Поддерживается
  2. 108: Поддерживается
  3. 109 — 111: Поддерживается
Край
  1. 12 — 106: Подпонима
    0015
  2. 107: Supported
Safari
  1. 3.1 — 3.2: Not supported
  2. 4 — 16.0: Supported
  3. 16.1: Supported
  4. 16.2 — TP: Supported
Firefox
  1. 2 — 3: Not supported
  2. 3,5 — 19: Частичная поддержка
  3. 20 — 106: Поддерживается
  4. 107: Поддерживается
  5. 00% — Supported»> 108 — 109: Поддерживается
Opera
  1. 9: Не поддержано
  2. 9.5 -11: 10.10149
  3. .0015
  4. 10.5 — 91: Supported
  5. 92: Supported
IE
  1. 5.5 — 8: Not supported
  2. 9 — 10: Supported
  3. 11: Supported
Chrome for Android
  1. 107: Supported
Safari на iOS
  1. 3.2: не поддерживается
  2. 4 — 16,0: поддержан
  3. 16,1: поддержано
Samsung Internet
  1. 84% — Supported»> 4 — 18,01: 70015 9001:
  2. 9001: 9001: 9001: 9001:
    1. 0056
      Opera Mini
      1. Все: не поддерживается
      Opera Mobile
      1. 10: не поддерживается
      2. 11 — 12,1: поддержан
      3. 72: поддержан
      uc.
    2. 72: поддержан
    uc.
    Браузер Android
    1. 2.1–2.2: Не поддерживается
    2. 2.3–4.4.4: Поддерживается
    3. 107: Поддерживается
    Firefox для Android
    1. 28% — Supported»> 906:172 100056
      QQ Browser
      1. 13.1: Supported
      Baidu Browser
      1. 13.18: Supported
      KaiOS Browser
      1. 2.5: Supported
      Resources:
      Detailed article on support
      Detailed article on video /audio elements
      HTML5 Doctor article
      has.js test
      WebPlatform Docs
      Демонстрации аудиоплеера, использующего аудиоэлемент
      Состояние HTML5 Audio
      Sub -Features:
      AUDIO FORMAT WAV
      MP3 Audio Format
      Opus Audio Format
      AAC AUDIO AUDIO AUDIO AUDIO AUDIO FAIL Воспроизведение аудиофайлов

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

      Чтобы создать правильный код HTML-аудиоплеера , помимо элемента audio необходимо использовать другие элементы и атрибуты HTML.

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

      Содержание

      • Что такое тег HTML Audio?
      • Обучение созданию синтаксиса аудиоэлемента HTML
        • — пример кода 1: основные элементы
        • — пример кода 2: один атрибут
        • — Создание полного синтаксиса аудиоэлемента HTML
        • — Пример кода 3: Полный синтаксис
        • — Синтаксис HTML-аудио без исходного элемента
        • — Пример кода 4: Без исходного элемента
      • Как реализовать тег аудио?
      • Дополнительные сведения об атрибутах элементов
        • — HTML Autoplay
        • — HTML Controls
        • — HTML Crossorigin
        • — HTML Loop
        • — HTML Muted
        • – Предварительная загрузка HTML
        • – Источник HTML
      • Заключительные слова и дополнительные примечания:

      Что такое тег HTML Audio?

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

      Обучение созданию синтаксиса аудиоэлемента HTML

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

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

      – Пример кода 1: Основные элементы

      В следующем примере показано, как выглядит синтаксис HTML без дополнительных элементов или атрибутов:

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

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

      — пример кода 2: одиночный атрибут

      Синтаксис HTML, который мы собираемся вам показать, содержит одиночный атрибут внутри открывающего тега HTML audio:

      .ogg” type=”audio/ogg”>

      Ваш браузер несовместим с этим аудиоэлементом.

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

      – Создание полного синтаксиса аудиоэлемента HTML

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

      – Пример кода 3: Полный синтаксис

      Следующий синтаксис содержит полный HTML-синтаксис , содержащий все остальные элементы HTML:

      плитка вашего документа в этом элементе HTML


      <управление звуком>


      Ваш браузер несовместим с этим аудиоэлементом.

      Нажмите эту кнопку, чтобы воспроизвести звук



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

      — Синтаксис аудио HTML без исходного элемента

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

      — Пример кода 4: Нет исходного элемента

      Все, что требуется для создания полнофункционального синтаксиса аудио HTML без исходного элемента HTML, — это следующий код :




      Включите заголовок вашего документа в этот элемент



      Прослушайте официальный трек:

      < управление звуком src="/media/cvb1-audio/official-track. mp3″>
      Ваш браузер не совместим с этим элементом
      audio .



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

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

      Как реализовать аудиотег?

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

      • Элемент HTML audio — используется только как проигрыватель аудиодокумента
      • Исходный элемент HTML — используется для представления и указания альтернативных аудиофайлов
      • Специальные атрибуты HTML — используются для улучшения и помощи вашему браузеру в правильном отображении аудиофайла

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

      Дополнительные сведения об атрибутах элементов

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

      • Атрибут
        • автозапуска HTML
      • HTML управляет атрибутом
      • Атрибут перекрестного происхождения HTML
      • Атрибут цикла HTML
      • Атрибут HTML отключен
      • Предварительная загрузка HTML атрибут
      • Атрибут HTML src

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

      – Автовоспроизведение HTML

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

      — Пример кода 1: Синтаксис автовоспроизведения

      Внимательно посмотрите на следующий пример, который содержит атрибут автозапуска HTML внутри открывающего тега audio:

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

      – HTML-элементы управления

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

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

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

      — HTML Crossorigin

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

      • Анонимный — он собирается отправить в браузер перекрестный запрос без файла cookie или учетных данных
      • Use-credentials — это значение будет отправлять в браузер перекрестный запрос с файлом cookie или учетными данными
        • .

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

      — Пример кода 2. Разделение атрибутов

      Узнайте, как использовать этот HTML-атрибут, просмотрев следующий синтаксис :

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

      — Цикл HTML

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

      — Пример кода 3

      Синтаксис HTML — не сильно отличается от из предыдущих примеров, как видно из следующего кода:

      <цикл управления звуком>


      Ваш браузер не поддерживает элемент audio.

      Веб-разработчики рекомендуют не включать атрибут цикла HTML без элементов управления. Если вы не включили атрибут 9 элементов управления 0231 пользователь не сможет остановить аудиодокумент, что иногда может раздражать. Давайте теперь узнаем кое-что больше об атрибуте HTML muted.

      — Атрибут HTML Muted

      Атрибут HTML muted также представляет собой логический атрибут, который по умолчанию используется для отключения звука аудиодокумента. Это означает, что пользователь может взаимодействовать с аудиофайлом , и когда он нажмет кнопку воспроизведения, аудиофайл будет воспроизводиться, но без звука. Все, что нужно сделать пользователям, чтобы вернуть звук, — это нажать кнопку включения звука на вкладке элементов управления.

      — пример кода 4

      Все, что вам нужно сделать, чтобы ввести его в свой синтаксис, — это написать его внутри открывающего тега HTML audio, как показано здесь:

      <управление звуком отключено>


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

      – Предварительная загрузка HTML

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

      • Авто — используется для указания, что браузер загрузит весь аудиодокумент после загрузки всей страницы
      • Метаданные — используется для указания, что браузер должен загружать метаданные аудиодокумента только после загрузки страницы
      • Нет — используется для указания, что браузер не должен загружать аудиофайл при загрузке страницы

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

      — пример кода 5

      Как и для всех предыдущих атрибутов HTML, взгляните на следующий синтаксис, чтобы узнать, как его использовать: media7.mp3″ type=»audio/mpeg»>

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

      — The HTML Src

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

      • Создание относительного URL-адреса — ссылается на аудиодокумент с той же веб-страницы
        • .
      • Создание абсолютного URL-адреса — связывает аудиодокумент с другой веб-страницы

      Если вы создаете абсолютный URL-адрес, все, что вам нужно сделать, это скопировать полную ссылку аудиодокумента и вставить ее в качестве значения атрибута src. С другой стороны, укажите путь и местоположение аудиодокумента, расположенного на той же веб-странице, используя относительный URL-адрес. Это все, что нужно, чтобы узнать все о том, как правильно использовать HTML-тег audio и все его атрибуты в документе. Наконец, давайте взглянем на краткое изложение всех важных моментов из этой статьи.

      Заключительные слова и дополнительные примечания:

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

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

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