Какие форматы аудио поддерживает браузер
Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами <video> и <audio> ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.
| Предпосылки: | Базовая компьютерная грамотность, установка базового ПО, базовые знания работа с файлами, знакомство с основами HTML (как описано в Начало работы с HTML) и Изображения в HTML. |
|---|---|
| Задача: | Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео. |
Аудио и видео в Интернете
Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности размещения на сайтах видео и аудио контента, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Эти технологии работали нормально, но у них было много недостатков, в числе которых плохая поддержка возможностей HTML и CSS, проблемы безопасности и проблемы доступности.
Собственное решение устранило бы большую часть этой проблемы, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификации HTML5 были добавлены такие функции, с элементами <video> и <audio> , и некоторые новые JavaScript API для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.
Мы не будем учить вас, как создавать аудио и видеофайлы - для этого требуется совершенно другой набор навыков. Мы предоставили вам образцы аудио и видеофайлов и пример кода для вашего собственного эксперимента, на случай, если у вас нет под рукой собственных.
Примечание: Прежде всего, вы также должны знать, что есть немало OVPs (провайдеров онлайн-видео) вроде YouTube, Dailymotion и Vimeo, а также онлайн аудио-провайдеров вроде Soundcloud. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.
Элемент <video>
Элемент <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 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.
Все становится немного сложнее, потому что каждый браузер не только поддерживает свой набор форматов файлов-контейнеров, но и каждый из них поддерживает свой выбор кодеков. Чтобы максимизировать вероятность того, что ваш веб-сайт или приложение будет работать в браузере пользователя, вам может потребоваться предоставить каждый медиафайл, который вы используете, в нескольких форматах. Если ваш сайт и браузер пользователя не используют общий медиаформат, ваши медиа просто не будут воспроизводиться.
Из-за сложности обеспечения возможности просмотра мультимедийных файлов вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. Смотрите выбор подходящего контейнера для получения помощи по выбору формата файла контейнера, наиболее подходящего для ваших нужд; аналогичным образом смотрите выбор видеокодека и выбор аудиокодека для помощи в выборе первых медиакодеков, которые будут использоваться для вашего контента и вашей целевой аудитории.
Ещё одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определённых типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.
Так как мы это сделаем? Взгляните на следующий обновлённый пример (и попробуйте живой пример):
Здесь мы изъяли атрибут src из нашего тега <video> , и вместо этого включали отдельные элементы <source> , каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам <source> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.
Каждый элемент <source> также имеет атрибут type . Он не обязательный, но рекомендуется его включать — он содержит MIME types видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если type не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.
Примечание: Наша статья о поддерживаемых медиаформатах описывает некоторые распространённые MIME types.
Другие параметры <video>
Есть ряд других параметры, которые вы можете включить в HTML5 элемент video . Взгляните на наш третий пример:
На выходе получим нечто, подобное этому:
Новые параметры:
width and height Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью CSS. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона. autoplay Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим. loop Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо. muted Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию. poster Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы. preload
этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:
- "none" не буферизирует файл
- "auto" буферизирует медиафайл
- "metadata" буферирует только метаданные файла
Вы можете найти приведённый выше пример для воспроизведения на Github (также просмотрите исходный код.) Обратите внимание, что мы не включили атрибут autoplay в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!
Элемент <audio>
Элемент <audio> работает точно так же, как элемент <video> , с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:
В браузере это вызывает следующее:
Примечание: вы можете запустить аудио-демо в Github (см. также исходный код аудиоплеера.)
Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:
- Элемент <audio> не поддерживает атрибуты width и height - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.
- Он также не поддерживает атрибут poster опять же, из-за отсутствия визуального компонента.
Помимо этого, <audio> поддерживает все те же функции, что и <video> - просмотрите приведённые выше разделы для получения дополнительной информации о них.
Отображение текстовых дорожек к видео
Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:
- У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).
- Другие могут не слышать звук, потому что они находятся в шумной обстановке (например, в переполненном баре при показе спортивной игры) или, возможно, не хотят беспокоить других, если они находятся в тихом месте (например, в библиотеке).
- Люди, которые не говорят на языке из видео, могут захотеть увидеть текстовую расшифровку или даже перевод, чтобы помочь им понять медиа-контент.
Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом WebVTT и элементом <track> .
Замечание: "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».
WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:
субтитры Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио. титры Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит. рассчитанные описания Текст для преобразования в аудио, чтобы обслуживать людей с нарушениями зрения.
Типичный файл WebVTT будет выглядеть примерно так:
Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:
- Сохраните его как .vtt - файл, в разумном месте.
- Ссылка на файл .vtt с элементом <track> . <track> должен быть помещён в <audio> или <video> , но после элементов <source> . Используйте атрибут kind , чтобы указать, являются ли реплики субтитрами , титрами или описаниями . Кроме того, используйте srclang , чтобы сообщить браузеру, на каком языке вы записывали субтитры.
Это приведёт к просмотру видео с субтитрами, таким как:
Подробнее читайте в разделе добавление титров и субтитров к видео HTML5. Вы можете найти пример, который соответствует этой статье в Github, написанной Яном Девлином (см. также исходный код). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.
Примечание: Текстовые треки также помогут вам с SEO, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.
Активное обучение: Внедрение собственного аудио и видео
Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовали сделать это!
Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими образцами аудио и видео файлов для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.
Мы хотим, чтобы вы сделали следующие действия:
- Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.
- Создайте новый HTML файл в том же каталоге и назовите его index.html .
- Добавьте элементы <audio> и <video> на страницу; чтобы они отображали элементы управления браузером по умолчанию.
- Введите оба варианта элемента <source> , чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать type атрибуты.
- Дайте элементу <video> заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.
Для дополнительного бонуса вы можете попробовать исследовать текстовые треки и выяснить, как добавить некоторые титры к вашему видео.
Краткое изложение
Мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Web, используя такие технологии, как <iframe> (en-US) и <object> (en-US).
Хотя веб-браузеры имеют встроенную поддержку изображений с самых первых дней, встраивание аудио или видео на веб-страницу всегда требовало дополнительных подключаемых модулей (отдельных программных компонентов), которые добавляют больше возможностей браузеру, но не являются его частью (например Flash, QuickTime, RealPlayer и другие).
Плагин также означает, что приложение, которое воспроизводит аудио и видео содержимое, не является частью браузера. Подключаемый модуль заблокирован в виртуальной среде со своей программой, изолированной от браузера и от другого содержимого страницы. Кроме того, подключаемые модули являются необязательными, так что нельзя быть уверенным, что посетители сайта имеют нужное программное обеспечение для просмотра содержимого.
Стандарт HTML5 вводит новые элементы <audio> и <video>, которые позволяют веб-разработчикам встраивать звук и видео на веб-страницу, не требуя собственных плагинов. Конечно из этого следует, что сам браузер должен иметь возможность воспроизведения таких файлов, на данный момент только последние версии браузеров поддерживают эти элементы.
Медиа кодеки и форматы
Цифровые аудио и видео данные обрабатываются через кодек, формулу, которая преобразует и сжимает звук или видео в поток битов для передачи через Интернет (термин "кодек" представляет сокращенное сочетание двух слов "код" и "декодирование"). Когда данные доходят до конечного пользователя, то он должен иметь тот же кодек для декодирования закодированного сигнала и преобразования его обратно в звук или видео.
Некоторые медиа кодеки запатентованы, то есть они принадлежат только одной компании и не относятся к открытым стандартам, и, как правило, владельцы патентов обычно взимают лицензионные сборы за использование их алгоритмов. Разработчики браузеров, такие как Apple, Google и Microsoft, имеют большой капитал и готовы лицензировать запатентованные кодеки для своих браузеров. Другие производители браузеров, такие как Mozilla и Opera вместо этого выбирают открытые стандарты кодеков и не используют запатентованные их виды. Даже не смотря на то, что последние версии всех браузеров поддерживают встроенные медиа-файлы HTML5, они еще не пришли к соглашению какие кодеки лучше использовать.
После того как медиа данные закодированы, они должны быть инкапсулированы и упакованы для доставки в одном из нескольких форматов. Эти форматы являются контейнерами для медиа-файлов, которые передаются между сервером и клиентом. Для проигрывания встроенных медиа-файлов браузер должен сначала прочитать формат контейнера, а затем расшифровать закодированные данные внутри него. Так же, как браузеры поддерживают разные кодеки, они также поддерживают различные форматы контейнеров для встроенных медиа-файлов.
Встроенные медиа-файлы должны быть переданы с надлежащим типом контента для каждого формата, так и клиент, и сервер смогут распознать, как обрабатывать эти файлы. Веб-сервер обрабатывает медиа типы автоматически, по крайней мере, для наиболее распространенных форматов. Для некоторых новых форматов может понадобиться дополнительная настройка сервера, обычно это заключается в добавлении нового типа контента в файл конфигурации.
Тег <audio>
Элемент <audio> внедряет звуковой файл на веб-страницу. Это заменяемый элемент, но он не относится к пустым элементам, поэтому он может содержать и собственный контент и другие элементы. В своей простейшей форме элемент <audio> должен иметь только атрибут src, указывающий путь к звуковому файлу:
Однако он редко используется в такой простой форме. По умолчанию элемент <audio> не имеет элементов управления и поэтому полностью невидимый. Он будет располагаться в HTML-документе и может быть доступен в браузере или JavaScript, но простое внедрение аудио файла не принесет особой пользы. С помощью логического атрибута controls можно добавить к аудио-файлу его собственные элементы управления, которые будут отображаться на веб-странице в месте расположения элемента <audio>:
Эти элементы управления предоставляются браузером и могут визуально отличаться в зависимости от браузера, но предоставляемые функции остаются неизменными:
- кнопка play/pause
- полоса прокрутки
- отображение времени
- громкость
Элемент <audio> может содержать один или несколько элементов <source>, каждый из которых будет ссылаться на свой аудио-файл, что будет полезно из-за отсутствия единого формата, поддерживаемого всеми браузерами. В этом случае браузер будет проигрывать первый медиа-файл, который он поддерживает, игнорируя все остальные:
Аудио форматы и поддержка браузерами
В настоящее время, существует 3 поддерживаемых аудио формата для элемента <audio>: MP3, Wav, Ogg
| Браузер | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9 или выше | да | нет | нет |
| Firefox 4.0 или выше | нет | нет | да |
| Google Chrome 6 или выше | да | да | да |
| Apple Safari 5 или выше | да | да | нет |
| Opera 10.6 или выше | нет | да | да |
Тег <video>
Элемент <video> встраивает цифровое видео на веб-страницу. Как и в случае с <audio>, элемент <video> может иметь атрибут src, указывающий URL-адрес видеофайла:
Атрибут controls добавляет элементы управления, с помощью которых пользователь сможет взаимодействовать с плеером. Атрибут autoplay указывает браузеру, что видео должно начать воспроизведение сразу, как только страница будет загружена, если он не указан, то в плеере будет отображен первый кадр исходного видео. Но чаще всего он не несет никакой полезной информации о том, что будет представлено с помощью видео-контента. Вместо этого можно предоставить любое изображение, указав к нему путь в атрибуте poster:
Элемент <video> также может содержать один или несколько элементов <source>, которые будут указывать на файлы разных форматов:
Видео форматы и поддержка браузерами
В настоящее время, существует 3 поддерживаемых видео формата для элемента <video>: MP4, WebM и Ogg.
Яндекс.Браузер умеет открывать аудиофайлы с расширениями\n mp3 , wav , m4a , wma , ogg , x-m4a , mpeg .
Аудио на боковой панели
В Яндекс.Браузере можно одновременно просматривать сайт и слушать музыку, запущенную на другой вкладке. Чтобы не переключаться между вкладками, нажмите значок на боковой панели. В появившейся панели управления можно поставить трек на паузу или запустить заново, переключиться на предыдущий или следующий трек в плейлисте.
Примечание. Если значок не нужен, нажмите правой кнопкой мыши на боковую панель и снимите отметку с опции Управление музыкой .Если вы запустили музыку на нескольких вкладках, на панели отображаются все треки, и вы можете легко переключаться между ними.
Если у вас играют несколько аудиодорожек и нет времени останавливать каждую, нажмите кнопку Заглушить все вкладки .
Примечание. Воспроизведение музыки на заглушенной вкладке не останавливается.Проблемы со звуком
Звук тихий или его нет вообще
Проверьте, включен ли звук на вкладке браузера. Откройте боковую панель и нажмите значок . Если звук выключен, то вы увидите на вкладке значок . Чтобы включить звук, нажмите этот значок.
Проверьте микшер громкости в настройках операционной системы Включите любой видеоролик или музыкальный плеер в интернете через Яндекс.Браузер. В правом нижнем углу экрана на панели задач нажмите правой кнопкой мыши значок . В открывшемся меню нажмите Открыть микшер громкости и увеличьте громкость. Включите любой видеоролик или музыкальный плеер в интернете через Яндекс.Браузер. Прокрутите страницу вниз и нажмите Расширенные настройки сайтов . В блоке Доступ к микрофону выберите устройство вручную.На боковой панели браузера нажмите значок и произнесите любую фразу. Если, когда вы говорите, в окне программы пульсирует значок , микрофон настроен верно.
Если значок не пульсирует, проверьте работу микрофона:
Нажмите на него правой кнопкой мыши и выберите команду Использовать по умолчанию . Еще раз нажмите на микрофон правой кнопкой мыши и выберите команду Свойства . В открывшемся окне перейдите на вкладку Уровни . Оба параметра не должны быть одновременно установлены на минимум или максимум. Перейдите на вкладку Дополнительно и убедитесь, что опция Включить дополнительные средства звука не активна. Отключите использование специальных звуковых эффектов. Откройте вкладку Улучшения . Выберите опцию Отключение всех звуковых эффектов и нажмите Применить → Оk .Подробные сведения о настройке микрофона см. в Справке Windows.
Аудио не воспроизводится
Попробуйте найти расширение, блокирующее аудио:
Откройте → Дополнения и отключите все расширения. Если проблема исчезла, методом перебора найдите расширение, которое ее вызвало. Отключите расширение. Вы можете также написать его разработчикам о проблеме. ">,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Прослушивание аудио в браузере. Справка","canonical":"https://browser.yandex.ru/help/working-with-files/audio.html","productName":"Яндекс.Браузер","extra_js":[[],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>]],"extra_css":[[],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"documentPath":"/help/working-with-files/audio.html","isBreadcrumbsEnabled":true,"lang":"ru","params":<>>>>'>Какие аудиоформаты поддерживает браузер?Яндекс.Браузер умеет открывать аудиофайлы с расширениями mp3 , wav , m4a , wma , ogg , x-m4a , mpeg .
Аудио на боковой панели
В Яндекс.Браузере можно одновременно просматривать сайт и слушать музыку, запущенную на другой вкладке. Чтобы не переключаться между вкладками, нажмите значок на боковой панели. В появившейся панели управления можно поставить трек на паузу или запустить заново, переключиться на предыдущий или следующий трек в плейлисте.
Если вы запустили музыку на нескольких вкладках, на панели отображаются все треки, и вы можете легко переключаться между ними.
Если у вас играют несколько аудиодорожек и нет времени останавливать каждую, нажмите кнопку Заглушить все вкладки .
Примечание. Воспроизведение музыки на заглушенной вкладке не останавливается.
Проблемы со звуком
Звук тихий или его нет вообще
Проверьте, включен ли звук на вкладке браузера. Откройте боковую панель и нажмите значок . Если звук выключен, то вы увидите на вкладке значок . Чтобы включить звук, нажмите этот значок.
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.
Ниже приведен простейший пример использования тега , он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.
Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.
Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls .
При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type .
А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег
- none - если вы не хотите использовать буфер файлов;
- auto - если вы хотите, чтобы браузер беферизировал файл целиком;
- metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).
Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:
Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .
Читайте также: