Подготовительный курс HTML и CSS: Аудио

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

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

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

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

Тег <source>

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

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

Задание

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

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

Полезное

  • Если используется один файл, то достаточно его указать в атрибуте src. Если файлов несколько, то используйте теги <source>

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе по ссылке https://ttttt.me/HexletLearningBot. Там можно задать любой вопрос и повлиять на проект

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

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

В моей среде код работает, а здесь нет 🤨

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

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

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

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

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт

Loading...

Ваше упражнение проверяется по этим тестам

1const { test } = require('tests');
2
3test(({ query, expect }) => {
4  const element = query(document, 'audio');
5  expect(query(element, 'source:nth-child(1)')).to.exist;
6  expect(query(element, 'source:nth-child(2)')).to.exist;
7});
8

Решение учителя откроется через:

20:00
waiting_clock