Как найти музыку в html

Звук и музыка в 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

Для вставки аудио-плеера используется следующий код:
вставка аудио в html

<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 Указывает адрес аудио для проигрывания

Другие возможности вставки аудио на сайт

  1. href="имя_файла.mp3">Щелкни </а>
  2. <bgsound src="04.wav" loop="5">

    *только для форматов: wav, mp3, aiff, wma

  3. <embed src="имя_файла.wav" height="150" width="180">

Вставка видео

Формат видео-файлов:

  • MP4
  • WebM
  • Ogg

вставка аудио в html

<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.

Табл. 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. Воспроизведение аудиофайла

Браузеры

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

Статьи по теме

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