Подготовительный курс 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. Там можно задать любой вопрос и повлиять на проект
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник". Как правильно задать вопрос:
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт
Ваше упражнение проверяется по этим тестам
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Решение учителя откроется через:
