Разное

Css audio: — элемент добавления аудио на страницу — HTML

18.08.2023

микроданные и внешний вид — CSS-LIVE

Перевод статьи Making An Audio Player With HTML5, Part 3: Microdata and Skinning с сайта demosthenes.info, c разрешения автора — Дадли Стори.

В первых двух статьях этого цикла я представил концепцию и код для собственного аудиоплеера. Прототип, который сконструирован к этому моменту – «сырой», без какого-либо оформления: HTML5 и JavaScript был написан на скорую руку, чтобы убедиться, что базовая концепция работает. В этой статье я сосредоточусь на улучшении внешнего вида плеера и добавлении микроданных, прежде чем вводить дополнительные функции в четвёртой статье.

Элементы аудио

Первым делом давайте взглянем на DOM, который у нас есть на данный момент. Скрипт во второй статье этого цикла добавил ползунок и другие функции, реализуя подход постепенного улучшения, и в результате получился следующий код:

<figure id="audioplayer">
<figcaption>
<div>Track<span>24 Ghosts III</span></div>
<div id="album">Album<span>Ghosts III</span></div>
<div id="artist">Artist<span>Nine Inch Nails</span></div>
<div id="time">Time<span>00:00</span></div>
</figcaption>
<div id="fader">
<input type="range" min="0" max="1" step="any" value="1"id="volumeSlider">
<button type="button">volumehigh</button>
</div>
<div id="playback">
<button type="button">
 
Play</button>
<progress min="0" max="100" value="0" id="playhead">
</progress>
</div>
<audio src="/assets/audio/24-ghosts-III. mp3"id="audiotrack" preload="auto">
</audio>
</figure>

В этот код мы добавим микроданные, чтобы получить пользу от поисковых систем и подключить добавочный Javascript позже в этом цикле статей. Код стал таким в конце:

<figure id="audioplayer" itemprop="track"itemtype="http://schema.org/MusicRecording">
<figcaption>
<div>Track
<span itemprop="name">24 Ghosts III</span>
</div>
<div id="album">
 
Album
<span itemprop="inAlbum">Ghosts III</span>
</div>
<div id="artist">Artist
<span itemprop="byArtist">Nine Inch Nails</span>
</div>
<div id="time">Time
<span>00:00</span>
</div>
</figcaption>
<meta itemprop="duration" content="PT2M29S">
<div id="fader">
<input type="range" min="0" max="1" step="any" value="1"orient="vertical" id="volumeSlider">
<button type="button">volumehigh</button>
</div>
<div id="playback">
<button type="button">
 
Play</button>
<progress min="0" max="100" value="0" id="playhead">
</progress>
</div>
<audio src="/assets/audio/24-ghosts-III. mp3"id="audiotrack" itemprop="audio" preload="auto">
</audio>
</figure>

Оформление аудио

CSS, который применён к плееру, использует несколько техник от среднего до продвинутого уровня. Начальный CSS сбрасывает модель box-sizing, устанавливает общее оформление для аудиоплеера и полностью скрывает элемент <audio>:

 
* {
box-sizing: border-box;}
figure#audioplayer {
border: 1px solid #000;
background: url(dark_wall.png) #333;
overflow: hidden;
width: 27rem;
padding: .4rem;
margin: 2rem auto;
}
figure#audioplayer audio {
width: 0; height: 0;
}

Далее оформим элементы с различной информацией внутри плеера, установив им границы со всех сторон, чтобы между ними был разделитель. При помощи CSS (к сожалению, нестандартного — прим. перев.) элемент input с типом range сделан вертикальным для Webkit и Chrome:

figure#audioplayer figcaption {
width: 21. 5rem;
font-size: 0;
margin: .45rem;
background: #000;
float: left;
border: 1px solid #555;
text-align: left;}
figure#audioplayer figcaption div {
background: #000;
color: #fff;
padding: .8rem;
font-family: Avenir, Helvetica, sans-serif;
text-transform: uppercase;
font-size: .8rem
 
;
display: inline-block;}
figure#audioplayer figcaption div span {
display: block;
font-size: 1.3rem;
text-indent: 1rem;}
div#album {
border-top: 1px solid #555;
border-bottom: 1px solid #555;
width: 100%;}
div#time {
width: 7.55rem;
border-left: 1px solid #555;}
input#volumeSlider{
-webkit-appearance: slider-vertical;
width: 35px; }

Для кнопок используется иконочный шрифт с семантическими лигатурами, чтобы превратить их текст в изображение.

figure#audioplayer button {
width: 3rem;
height: 3rem;
background: #000;
color: #fff;
border: none;
-webkit-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";}
#playback {
clear: both;}
div#fader {
display: inline-block;}

Также я сделал оформление для элемента <progress>. Здесь используется HSL, чтобы в будущем (если потребуется) нам было легче менять цвет.

#playback progress {
margin-left: 1rem
 
;
width: 20rem;
height: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #888;
border: none;
color: hsl(44,100%,44%);
}
progress::-webkit-progress-bar,
progress::-moz-progress-bar,
progress::progress-bar {
background: hsl(44,100%,44%);
}
progress::-webkit-progress-value {
background: hsl(44,100%,44%);
}
progress::-moz-progress-bar {
background-color: hsl(44,100%,44%);
}

Наконец, плеер поддерживает адаптивность, перемещая элементы в нужное место и уменьшая отступы при сужении области просмотра:

@media screen and (max-width:500px){
div#time {
display: block !important;
border-top: 1px solid #555;
width: 100%;}
figure#audioplayer {
width: 100%;
padding: . 2rem;}
figure#audioplayer figcaption div {
padding: .4rem;}
}
@media screen and (max-width:450px){
figure#audioplayer figcaption {
width: 16rem
 
;
}
#playback progress {
width: 220px;
}
}
@media screen and (max-width:400px) {
figure#audioplayer figcaption {
width: 14rem;
}
}

See the Pen Simple HTML5 Audio Player In Pure JS & CSS by Dudley Storey (@dudleystorey) on CodePen.

В следующей статье я буду использовать Web Audio API, чтобы добавить и анимировать отображение шкалы для правого и левого каналов плеера.

P.S. Это тоже может быть интересно:

Встраивание аудио. HTML, XHTML и CSS на 100%

Встраивание аудио

Для начала возьмем самую распространенную задачу – проигрывание фонового звука.

Чтобы разобраться с ней, нужно немного отвлечься от элемента OBJECT, потому что есть способ встроить фоновый звук и без него. Создатели языка HTML предусмотрели для этого специальный элемент BGSOUND. Он должен располагаться в заголовке документа, его основные атрибуты – src (путь к звуковому файлу) и loop (количество повторных воспроизведений файла). Для управления звуком можно задавать параметр volume, который определяет громкость воспроизведения музыки. Пример установки фонового звука с помощью элемента BGSOUND приведен в листинге 4.15.

Листинг 4.15. Задание фонового звука с помощью элемента BGSOUND

<html>

<head>

<title>Встраивание объектов</title>

</head>

<body>

<bgsound src=»test.mp3″ loop=»1″ volume=»5″ />

</body>

</html>

В случае примера из листинга 4.15 музыка из файла test.mp3 будет проиграна один раз с пятой громкостью.

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

В листинге 4.16 приведен пример того, как задать фоновую музыку с использованием элемента OBJECT.

Листинг 4.16. Задание фоновой музыки с помощью элемента OBJECT

<html>

<head>

<title>Встраивание объектов</title>

</head>

<body>

<object classid=»CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95″ type=»audio/x-mpeg» >

<param name=»FileName» value=» test.mp3″ />

<param name=»AutoStart» value=»true» />

<param name=»Volume» value=»10″ />

<param name=»PlayCount» value=»2″ />

</object>

</body>

</html>

В листинге 4.16 используются параметры AutoStart и Volume, которые задают автоматическое начало воспроизведения и громкость звука соответственно, а сам файл для воспроизведения указывается с помощью параметра URL. Количество повторов определяет параметр PlayCount. При обработке кода из листинга 4.16 файл test.mp3 будет проигрываться сразу при открытии страницы с десятой громкостью два раза.

Примечание

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

С фоновым звуком все просто, но его явно недостаточно для создания полноценной мультимедийной галереи, чаще приходится встраивать на страницу музыку вместе с проигрывателем. В таком случае без элемента OBJECT не обойтись, и альтернатив здесь нет.

Начнем с того, что приведем проигрыватель к удобному для посетителя виду. При воспроизведении музыки пропадает необходимость в полном окне проигрывателя и поэтому графический дисплей можно «срезать». Это делается очень просто: нужно изменить высоту объекта, то есть просто опустить атрибут height элемента OBJECT, оставляя проигрыватель без высоты.

Код для такого отображения проигрывателя представлен в листинге 4.17.

Листинг 4.17. Неполное окно проигрывателя

<html>

<head>

<title>Встраивание объектов</title>

</head>

<body>

<object classid=»CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95″ type=»audio/x-mpeg»>

<param name=»FileName» value=»test.mp3″ />

<param name=»AutoStart» value=»1″ />

</object>

</body>

</html>

Результат обработки браузером листинга представлен на рис. 4.13.

Рис. 4.13. Аудиопроигрыватель

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

Итак, у нас есть удобный для посетителя сайта проигрыватель. Единственное, что хотелось бы добавить в него, это возможность видеть название песни и имя исполнителя данной мелодии. Это очень просто сделать: нужно добавить строку параметров: <PARAM name=»ShowDisplay» value=»1″/>.

Результат добавления такой строки параметров показан на рис. 4.14.

Рис. 4.14. Аудиопроигрыватель с дополнительной информацией

Теперь у нас есть удобный и симпатичный проигрыватель музыкальных файлов.

Примечание

При использовании Проигрывателя Windows Media версии выше 6. 4 параметры могут отличаться. Например, вместо FileName используется параметр URL. Идентификатор clsid для Проигрывателя Windows Media версий выше 6. 4: 6BF52A52-394A-11D3-B153-00C04F79FAA6.

Итак, музыка встроена, но нам не терпится добавить туда еще немного возможностей, например проигрывание видео.

Данный текст является ознакомительным фрагментом.

4.

1. Встраивание изображений

4.1. Встраивание изображений Начнем с добавления изображения, потому что это самый простой для добавления и самый распространенный мультимедийный элемент, встречающийся в Интернете. У изображений много плюсов: статичность, небольшие размеры файлов (относительно других

Встраивание объектов

Встраивание объектов Итак, есть способ загрузить наш мультимедиа-файл на страницу сразу, при этом надо учитывать, с помощью какой программы будет воспроизводиться файл, потому что загружать динамический объект нужно вместе с проигрывателем. Для обращения к этой

Встраивание видео

Встраивание видео Сейчас встраивать видео на сайт можно без опасений – нынешних скоростей доступа в Интернет достаточно, чтобы у пользователей не было проблем с просмотром и скачиванием видео. Тем более что сейчас перемещение видеоархивов в сеть становится весьма

Встраивание Flash-графики

Встраивание Flash-графики Необходимость Flash-графики не всегда очевидна, однако красиво нарисованная заставка может оживить вашу страницу. Не стоит ни пренебрегать Flash-графикой, ни переоценивать ее действие. Переизбыток подобного содержимого может замедлить загрузку

7.1. Встраивание CSS в HTML

7.1. Встраивание CSS в HTML Начнем разбирать таблицы стилей с небольшого HTML-документа (листинг 7.1).Листинг 7.1. Простой HTML-документ&lt;html&gt;&lt;head&gt;&lt;title&gt;Моя домашняя страница&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Моя домашняя страница&lt;/h2&gt;&lt;p&gt;На этой странице вы найдете информацию обо мне

Встраивание драйверов в ядро

Встраивание драйверов в ядро Драйвер устройства является частью кода ядра операционной системы и обеспечивает взаимодействие других подсистем UNIX с физическими или псевдоустройствами. Существует два основных метода встраивания кода и данных драйвера в ядро

Копирование аудио

Копирование аудио Вставьте аудиодиск в привод. Запустите программу Sound Forge, выполните команду File ? Extract Audio from CD (Файл ? Извлечь аудио с CD). Откроется окно Extract Audio from CD (Извлечь аудио с CD) (рис. 4.3). Рис. 4.3. Окно Extract Audio from CD (Извлечь аудио с CD).Из раскрывающегося списка Action

8.3.2. Расширение и встраивание языков

8.3.2. Расширение и встраивание языков Один из фундаментально важных вопросов заключается в том, возможно ли реализовать мини-язык путем расширения или встраивания существующего языка сценариев. Нередко такой подход является правильным путем к императивному мини-языку,

8.3.2. Расширение и встраивание языков

8. 3.2. Расширение и встраивание языков Один из фундаментально важных вопросов заключается в том, возможно ли реализовать мини-язык путем расширения или встраивания существующего языка сценариев. Нередко такой подход является правильным путем к императивному мини-языку,

Аудио– и видеопроигрыватели

Аудио– и видеопроигрыватели Где мы найдем любимое кино и песнюОтличие CD и DVD-дисковДиски бывают двух видов – CD и DVD.Отличие CD от DVD только в том, что на DVD помещается в четыре раза больше информации, чем на CD. То есть если на CD-диск помещается один фильм, да и то не в очень

Встраивание

Встраивание В некоторых случаях более удобно и эффективно выполнять подстановку тела функции вместо ее вызова. Непосредственная подстановка тела функции позволит сэкономить время процессора на вызове функции. В языке Си этого можно достичь при помощи директивы

3.

4. Аудио- и видеоплееры

3.4. Аудио- и видеоплееры Персональный компьютер — вещь поистине уникальная. C его помощью можно не только набирать тексты, путешествовать по просторам Интернета, играть в игры или заниматься научной работой — вы можете использовать своего железного друга как магнитофон

5.1.15. Аудио- и видеофайлы

5.1.15. Аудио- и видеофайлы Текстовый процессор Pages предоставляет возможность добавлять в документ звуковые файлы, клипы и Flash-ролики. Для запуска файла используется двойной щелчок по его пиктограмме. Как вы, наверное, догадались, эта замечательная возможность Pages

Видео- и аудиоконтент — Изучите веб-разработку

  • Предыдущий
  • Обзор: мультимедиа и встраивание
  • Следующий

Теперь, когда мы научились добавлять простые изображения на веб-страницу, следующим шагом будет добавление видео- и аудиоплееров в HTML-документы! В этой статье мы рассмотрим именно это с элементами и ; затем мы закончим просмотром того, как добавлять титры/субтитры к вашим видео.

Предпосылки: Базовая компьютерная грамотность, установлено базовое программное обеспечение, базовые знания работа с файлами, знакомство с основами HTML (как описано в Начало работы с HTML) и Изображения в HTML.
Цель: Чтобы узнать, как встраивать видео- и аудиоконтент на веб-страницу и добавлять титры/субтитры к видео.

Первый приток онлайн-видео и аудио стал возможен благодаря проприетарным технологиям на основе плагинов, таким как Flash и Silverlight. У обоих были проблемы с безопасностью и доступностью, и теперь они устарели в пользу собственных HTML-решений и элементов и доступности API-интерфейсов JavaScript для управления ими. Мы не будем рассматривать здесь JavaScript — только основные основы, которые можно получить с помощью HTML.

Мы не будем учить вас создавать аудио- и видеофайлы — это требует совершенно другого набора навыков. Мы предоставили вам образцы аудио- и видеофайлов и пример кода для ваших собственных экспериментов, если вы не можете получить свой собственный.

Примечание: Прежде чем начать здесь, вы также должны знать, что существует довольно много OVP (поставщиков онлайн-видео), таких как YouTube, Dailymotion и Vimeo, и поставщиков онлайн-аудио, таких как Soundcloud. Такие компании предлагают удобный и простой способ размещения и просмотра видео, так что вам не нужно беспокоиться об огромном потреблении полосы пропускания. OVP обычно даже предлагают готовый код для встраивания видео/аудио на ваши веб-страницы; если вы используете этот маршрут, вы можете избежать некоторых трудностей, которые мы обсуждаем в этой статье. Подробнее об этом виде услуг мы поговорим в следующей статье.

Элемент