Звук и музыка в HTML5:
<audio controls style="width:100%;max-width:600px;">
<source src="/music/mark_bernes_-_zhuravli.mp3" type="audio/mp3">
Тег audio не поддерживается вашим браузером.
</audio>
<a href="/music/mark_bernes_-_zhuravli.mp3" download="mark_bernes_-_zhuravli.mp3"><br>
Скачать песню "Журавли" в исполнении Марка Бернеса</a>.
Несколько разных форматов объединяются в один audio:
<audio controls>
<source src="sound.ogg" type="audio/ogg" >
<source src="sound.mp3" type="audio/mp3" >
Ваш браузер не поддерживает тег audio!
</audio>
Атрибуты тега <audio>
- autoplay
- Автоматически запустить воспроизведение
- loop
- Зациклить воспроизведение
- controls
- Отобразить элементы управления
- preload
-
Буфферизация. Возможные значения:
- none – не использовать буфер файлов,
- auto – чтобы браузер буферизировал файл целиком,
- metadata – для загрузки лишь служебной информации (продолжительность звучания и др.).
Свойства тега <audio>
- currentTime
- Позиция курсора проигрывателя, double (секунды)
- duration
- Длительность воспроизведения, double (секунды); только чтение
- muted
- Заглушен ли звук, boolean
- paused
- Остановлено ли воспроизведение, boolean
- volume
- Уровень громкости, double (от 0 до 1)
- played
- Были ли воспроизведены интервалы полностью, возвращает объект TimeRanges
- seekable
- Интервалы, которые готовы для немедленного воспроизведения, возвращает объект TimeRanges
- buffered
- Возвращает объект TimeRanges буферизованного файла
События тега <audio>
- durationchange
- Обновлён атрибут duration
- ended
- Воспроизведение остановлено по достижению конца
- pause
- Воспроизведение было остановлено (обратите внимание на отсутствие события stop)
- play
- Файл начал проигрываться
- timeupdate
- Текущая позиция воспроизведения изменилась (обычно каждые 250 мс)
- volumechange
- Значение изменилось
- canplay
- Файл может быть воспроизведен, но, возможно, потребуется пауза, пока он загружается.
- canplaythrough
- При имеющемся темпе скачивания предполагается, что файл может быть проигран от начала до конца без перерыва.
- progress
- Браузер показывает состояние проигрывания (обычно каждые 250 мс)
Объект TimeRanges
Содержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) и имеет свойства:
- length
- Число интервалов
- start(index
- Начальное время указанного интервала
- end(index)
- Конечное время указанного интервала (отсчитывается от начала воспроизведения)
Управление воспроизведением через JavaScript
<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Воспроизведение</button>
<button onclick="document.getElementById('player').pause()">Пауза</button>
<button onclick="audio=document.getElementById('player'); audio.currentTime=0; audio.pause(); ">Сначала</button>
<button onclick="document.getElementById('player').volume+=0.1">Громкость +</button>
<button onclick="document.getElementById('player').volume-=0.1">Громкость -</button>
</div>
Для создания объекта audio в javascript используется:
var audio = new Audio();
Чтобы определить, поддерживается ли данный формат файла в браузере используйте метод canPlayType()
,
который возвращает одно из 3 значений:
- probably,
- maybe,
- “” (пустая строка).
var audio = new Audio();
var canPlayOgg = !!audio.canPlayType
&& audio.canPlayType('audio/ogg; codecs="vorbis"') != "";
или
var audio = document.getElementById('my-audio-id'); // получим доступ к объекту audio.
audio.canPlayType('audio/ogg');
// или сразу задав кодек:
// audio.canPlayType('audio/ogg; codecs="vorbis"');
Как вариант, объект создаётся полностью на Javascript.
var audio = new Audio();
Пример отдельной кнопки play/pause
Старые форматы вставки музыки:
<embed src ="/towngold.mid" width="0" heught="0" autostart="true" volume="100">
<bgsound src="/towngold.mid" loop="100">
Пример
<script type="text/javascript">
if (navigator.appName == "Netscape") {
document.write('<EMBED SRC ="TownGold.mid" width=0 heught=0 autostart=true volume=100>');
} else {
document.write('<BGSOUND SRC="TownGold.mid" LOOP=100>');
}
function Music()
{ if (navigator.appName == "Netscape")
document.write('<EMBED SRC ="/towngold.mid" width=0 heught=0 autostart=true volume=100>')
else
document.write('<BGSOUND SRC="/towngold.mid" LOOP=100>')
}
</script>
<form>
<input TYPE="button" VALUE="Включить музыку" ONCLICK="Music()">
</form>
Поддерживаемые форматы: Ogg Vorbis, WAV PCM, MP3, AAC, Speex (зависит от конкретного браузера).
Подробнее на Wiki: Audio format support
Читать дальше: Видео на сайте
Тег <audio>
(от англ. audio – звук, аудио) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src
или вложенный элемент <source>
.
Внутри контейнера <audio>
можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.
Для универсального воспроизведения в браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source>
.
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Изображения и мультимедиа
- area
- audio
- img
- figcaption
- figure
- map
- track
- video
- embed
- iframe
- object
- param
- picture
- source
Поддержка браузерами¶
Can I Use audio? Data on support for the audio feature across the major browsers from caniuse.com.
Поддержка MP3 аудио-кодека:
Can I Use mp3? Data on support for the mp3 feature across the major browsers from caniuse.com.
Поддержка WAV аудио-кодека:
Can I Use wav? Data on support for the wav feature across the major browsers from caniuse.com.
Поддержка FLAC аудио-кодека:
Can I Use flac? Data on support for the flac feature across the major browsers from caniuse.com.
Поддержка AAC аудио-кодека:
Can I Use aac? Data on support for the aac feature across the major browsers from caniuse.com.
Поддержка Ogg Vorbis аудио-кодека:
Can I Use ogg-vorbis? Data on support for the ogg-vorbis feature across the major browsers from caniuse.com.
Синтаксис¶
<audio src="URL"></audio>
<audio>
<source src="URL" />
</audio>
Закрывающий тег обязателен.
Атрибуты¶
autoplay
- Звук начинает играть сразу после загрузки страницы.
controls
- Добавляет панель управления к аудиофайлу.
loop
- Повторяет воспроизведение звука с начала после его завершения.
muted
- Отключает звук при воспроизведении музыки.
preload
- Управляет предварительной загрузкой аудио данных.
src
- Указывает путь к воспроизводимому файлу.
volume
- Громкость воспроизведения, в диапазоне от 0.0 (самая тихая) до 1.0 (самая громкая).
autoplay¶
При наличии этого атрибута аудио начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay
отменяет действие атрибута preload
.
Синтаксис
<audio autoplay="autoplay"></audio>
Значения
В качестве значения указывается autoplay
, также допустимо вообще не указывать никакое значение.
Значение по умолчанию
По умолчанию этот атрибут выключен.
controls¶
Добавляет панель управления к аудиотреку. Вид панели и её содержимое зависит от браузера и может в себя включать: кнопку воспроизведения, паузы, перемотки, ползунок для изменения уровня громкости и др.
Синтаксис
<audio controls="controls"></audio>
Значения
В качестве значения указывается controls
, также допустимо писать атрибут без значения.
Значение по умолчанию
По умолчанию этот атрибут выключен.
loop¶
Зацикливает воспроизведение аудио, чтобы оно бесконечно повторялось после завершения.
Синтаксис
<audio loop="loop"></audio>
Значения
В качестве значения указывается loop
, также допустимо писать атрибут без значения.
Значение по умолчанию
По умолчанию этот атрибут выключен.
muted¶
Отключает звук при воспроизведении музыки.
Синтаксис
<audio muted="muted"></audio>
Значения
В качестве значения указывается muted
, также допустимо вообще не указывать никакое значение.
Значение по умолчанию
По умолчанию этот атрибут выключен.
preload¶
Этот перечисляемый аттрибут предназначен для предоставления подсказки браузеру о том, что автор считает лучшим для сайта. Тег может иметь следующие значения
Синтаксис
<audio preload="auto"></audio>
Значения
none
- указывает, что аудио не должно предварительно загружаться
metadata
- указывает, что загрузить нужно только метаданные;
auto
- указывает на то, что весь звуковой файл может быть загружен, даже если пользователь не будет использовать его;
Значение по умолчанию
Если он не указан, это будет определенное браузером значение. Спецификация советует использование аттрибута metadata
.
Примечания
- Аттрибут
autoplay
имеет приоритет надpreload
. Еслиautoplay
указан, браузер, должен начать загрузку для воспроизведения. - Браузер не принуждается спецификацией следовать значению этого аттрибута; это просто подсказка.
src¶
Указывает путь к воспроизводимому аудиофайлу. Для этой же цели также можно использовать элемент <source>
.
Синтаксис
<audio src="<адрес>"></audio>
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Спецификации¶
- WHATWG HTML Living Standard
- HTML5
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>audio</title>
</head>
<body>
<p>Александр Клименков - Четырнадцать</p>
<audio controls>
<source
src="audio/music.ogg"
type="audio/ogg; codecs=vorbis"
/>
<source src="audio/music.mp3" type="audio/mpeg" />
Тег audio не поддерживается вашим браузером.
<a href="audio/music.mp3">Скачайте музыку</a>.
</audio>
</body>
</html>
Базовое использование:
<!-- Simple audio playback -->
<audio
src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
autoplay
>
Ваш браузер не поддерживает <code>audio</code> элемент.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track
kind="captions"
src="foo.en.vtt"
srclang="en"
label="English"
/>
<track
kind="captions"
src="foo.sv.vtt"
srclang="sv"
label="Svenska"
/>
</audio>
Аудио элемент с элементом источника:
<audio controls="controls">
Ваш браузер не поддерживает <code>audio</code> элемент.
<source src="foo.wav" type="audio/wav" />
</audio>
Ссылки¶
- Тег
<audio>
MDN (рус.)
Цель урока: Как вставить видео и аудио в html, форматы файлов
Вставка аудио
Форматы аудио-файлов:
- mp3
- wav
- ogg
Для вставки аудио-плеера используется следующий код:
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> </audio>
В браузере Google Chrome плеер будет выглядеть:
Атрибуты тега <audio>
для плеера:
Атрибут | Значение | Описание |
---|---|---|
autoplay | autoplay | Указывает, что аудио должен начать играть, как только будет готов |
controls | controls | Указывает, что элементы управления воспроизведением должны отображаться |
loop | loop | Указывает, что аудио должно начаться снова, когда оно будет закончено |
preload | auto metadata none |
Определяет, должно ли аудио быть загруженным при загрузке страницы |
src | url | Указывает адрес аудио для проигрывания |
Другие возможности вставки аудио на сайт
<а href="имя_файла.mp3">Щелкни </а>
<bgsound src="04.wav" loop="5">
*только для форматов: wav, mp3, aiff, wma
<embed src="имя_файла.wav" height="150" width="180">
Вставка видео
Формат видео-файлов:
- MP4
- WebM
- Ogg
<video width="320" height="240" controls="controls" poster="logo.png"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Ваш браузер не поддерживает video. </video>
Результат в браузере:
Атрибуты тега <video>
для плеера:
Атрибут | Значение | Описание |
---|---|---|
audio | muted | Определяет по умолчанию состояние звука. В настоящий момент только “muted” разрешено |
autoplay | autoplay | Если указан, видео начнет играть сразу как только оно будет готово |
controls | controls | Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения |
height | пиксели | Указывает высоту видео плеера |
loop | loop | Если указан, видео начнет проигрываться снова, как только закончится |
poster | url | Указывает URL изображения, представляющего видео |
preload | auto metadata none |
Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если “autoplay” указан |
src | url | Адрес URL видео для проигрывания |
width | пиксели | Указывает ширину видео плеера |
Пример:
<video src="04.avi" loop="loop" audio="muted">
Другой вариант вставки видео (без плеера):
<а href="имя_файла.avi">Щелкни и смотри</а> <!-- Пример: --> <а href="ocean.qt"> Видеоклип 1 Мб</а>
* для форматов mpeg, avi
Фавикон Favicon
Фавиконка отображается в адресной строке браузера перед URL страницы, также Фавикон можно заметить во вкладке браузера страницы. Поисковые системы передают Favicon вместе с результатами поиска.
- файлы с расширением .ico
- размер 16×16 пикселей
Сервис для преобразования в ico-формат: http://image.online-convert.com/
<html> <head> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head>
- Семантические теги обычно несут смысловую нагрузку и не имеют никакого внешнего оформления в html. Но их можно и нужно оформлять стилями CSS. Такие теги важны для удобства читаемости кода и влияют на выдачу поисковиков.
- Рассмотрим примеры семантических тегов и их использования:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Заголовок</title> </head> <body> <header> header элемент - здесь следует какая-то информация в заголовке сайта. Обычно это лого компании и иногда дополнительная навигация по сайту. <nav>nav (сокращенное от navigation) элемент - обычно представляет горизонтальное меню для навигации по отдельным частям сайта.</nav> </header> <h1>Главный заголовок страницы</h1> <section> Секция 1 <article>Статья 1</article> <article>Статья 2</article> <article>Статья 3</article> </section> <section> Секция 2 <article>Статья 4</article> <article>Статья 5</article> <article>Статья 6</article> <div>Обычный div, блочный элемент</div> </section> <aside> ASIDE - какая-то информация, имеющая отношение к теме страницы. </aside> <footer> labs-org.ru, Copyright 2020 </footer> </body> </html>
Задание: Оформите фрагменты готового реферата или курсовой работы в веб-странице, используя семантические теги. Главы работы — это теги section
, подглавы — теги article
. Не нужно вставлять большие фрагменты текста, это могут быть несколько абзацев на каждый подпункт главы. Все семантические теги должны быть использованы.
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 3.0+ | 10.5+ | 3.1+ | 3.5+ | 2.2+ | 3.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.
Кодек | Internet Explorer | Chrome | Opera | Safari | Firefox |
ogg/vorbis | |||||
wav | |||||
mp3 | |||||
AAC |
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.
Синтаксис
<audio src="URL"></audio>
<audio>
<source src="URL">
</audio>
Атрибуты
- autoplay
- Звук начинает играть сразу после загрузки страницы.
- controls
- Добавляет панель управления к аудиофайлу.
- loop
- Повторяет воспроизведение звука с начала после его завершения.
- preload
- Используется для загрузки файла вместе с загрузкой веб-страницы.
- src
- Указывает путь к воспроизводимому файлу.
Закрывающий тег
Обязателен.
Пример
HTML5IE 8IE 9+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<p>Александр Клименков - Четырнадцать</p>
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href="audio/music.mp3">Скачайте музыку</a>.
</audio>
</body>
</html>
Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Воспроизведение аудиофайла
Браузеры
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.