микроданные и внешний вид — 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"></button> <progress min="0" max="100" value="0" id="playhead"> </progress> </div> <audio src="/assets/audio/24-ghosts-III.Play mp3"id="audiotrack" preload="auto"> </audio> </figure>
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"><span itemprop="inAlbum">Album 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"></button> <progress min="0" max="100" value="0" id="playhead"> </progress> </div> <audio src="/assets/audio/24-ghosts-III.Play
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-blockblock;
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; }
5remДля кнопок используется иконочный шрифт с семантическими лигатурами, чтобы превратить их текст в изображение.
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: 16rem220px;
}
}
@media screen and (max-width:400px) {
figure#audioplayer figcaption {
width: 14rem;
}
}
2remSee the Pen Simple HTML5 Audio Player In Pure JS & CSS by Dudley Storey (@dudleystorey) on CodePen.
В следующей статье я буду использовать Web Audio API, чтобы добавить и анимировать отображение шкалы для правого и левого каналов плеера.
P.S. Это тоже может быть интересно:
Воспроизведение аудио файлов на своем сайте средствами HTML5
Administrator Программирование
Собственный аудиоплеер может быть полезен если вам нужно воспроизводить аудио файлы на сайте. Помимо аудио файлов можно воспроизводить аудио потоки, например радио. В статье я расскажу, как это сделать, используя возможности HTML5.
Содержание
- 1 Что представляет из себя аудиоплеер
- 2 Поддерживаемые форматы
- 3 JavaScript + <audio>
Что представляет из себя аудиоплеер
Совсем недавно медиа-контент на сайте воспроизводился с помощью инструмента flash. С появлением HTML5 аудио и видео контент можно воспроизводить средствами HTML, что, безусловно, является огромным плюсом. Достаточно добавить на страницу контейнер <audio>.
Можно так:
<audio src=src="name.ogg"></audio>
Или так:
<audio controls autoplay loop> <source src="name.ogg" type="audio/ogg"> <source src="name.
mp3" type="audio/mpeg">
<source src="name.wav" type="audio/wave">
<source src="name.aac" type="audio/aac">
<a href="upload/audio/name.mp3">Вы видите этот текст, так как ваш браузер не поддерживает воспроизведение аудио с помощью HTML, можете скачать файл name.mp3 для прослушивания.</a>
</audio>
- Если установить атрибут controls — браузер будет отображать стандартную панель для воспроизведения (кнопка play, громкость, и т.д.).
- Атрибут autoplay — указывает браузеру автоматически начать воспроизведение сразу после загрузки страницы.
- Атрибут loop — зацикливает воспроизведение одной записи.
- Атрибут muted — выключает звук воспроизводимого файла.
- Атрибут preload — определяет предварительную загрузку файла. Возможные значения:
— auto — браузер загрузит сразу весь файл при загрузке страницы
— metadata — браузер загрузит небольшой кусочек файла для определения его характеристик
— none — ничего загружено не будет, пока пользователь не начнет воспроизведение
Поддерживаемые форматы
MP3 — один из самых известных форматов аудио, но, к сожалению, поддерживается не всеми браузерами из-за необходимости отчислять лицензионные обязательства за использование кодека.
Firefox, Opera, Chrome не поддерживают. А вот Safari — поддерживает.
AAC (Advanced Audio Codec) — улучшенный аналог MP3, но также является закрытым и платным.
Ogg Vorbis — бесплатный формат с открытым исходным кодом кодека. Поддерживается Firefox, Opera и Chrome. Есть некоторые ограничения со стороны аппаратных проигрывателей.
Wav (Waveform Audio File Format) — формат хранения оцифрованного потока аудио, чаще всего несжатого.
Лучше всего использовать несколько вариантов файлов, чтобы избежать ситуации, когда в одном браузере файл воспроизводится без проблем, а в другом наблюдаются проблемы. Для этого используется вложенный тегс одним из вариантов аудио файла.
JavaScript + <audio>
Задействовав JavaScript можно легко воспроизводить аудио с элементами управления
<audio src="upload/audio/name.mp3"></audio> <div> <button>Play</button> <button>Pause</button> <button>Volume up</button> <button>Volume down</button> </div>
Вот так будет выглядеть стандартная панель браузера:
Вы видите этот текст, так как ваш браузер не поддерживает воспроизведение аудио с помощью HTML, можете скачать файл mp3 для прослушивания.
А вот так будет выглядеть элемент audio с использованием JavaScript:
Воспроизводить аудио на своем сайте не сложно. В статье я рассказал про воспроизведение файлов. Но воспроизводить можно не только файлы. Это может быть и потоковое аудио. Но об этом в другой раз.
7 лучших аудиоплееров HTML5
Браузеры HTML5 в последние годы начали завоевывать все большую долю рынка. Это воодушевило многих разработчиков, поскольку они могут отказаться от своих громоздких Flash-плееров в пользу более элегантных и быстрых медиаплееров HTML5. Если вы хотите переключиться, вот десять аудиоплееров HTML5, которые вы можете разместить на своем веб-сайте вместо Flash-плеера!
1. MediaElement
MediaElement может быть самым популярным проигрывателем HTML5 в этом списке, и на то есть веские причины: он поддерживает как аудио, так и видео, написан на чистом, чистом HTML5 и CSS и обладает высокой обратной совместимостью. Он включает в себя пользовательские проигрыватели Flash и Silverlight, которые будут работать со старыми браузерами, и эти проигрыватели разработаны так, чтобы имитировать обычный проигрыватель MediaElement.
У плеера есть плагины, доступные для большинства основных CMS, таких как WordPress, Joomla, Drupal и других. Он хорошо сочетается с другими пользовательскими фреймворками из-за простоты модификации, и его легко расширить с помощью «функциональных» плагинов JavaScript.
MediaElement предлагает широкие возможности настройки — он полностью настраиваемый и поддерживает Ambilight, полноэкранное видео, элемент , API Flash/HTML5 YouTube, автоматический перевод благодаря Google Translate и множество других функций.
[Ссылка]
2. jPlayer
Как и предыдущий проигрыватель MooTools, jPlayer основан на платформе jQuery. Как и MooTools, jPlayer предлагает возможности фреймворка: гибкий API, знакомый разработчикам jQuery. Это очень быстро и легко начать работу — вы можете запустить работающее развертывание всего за несколько минут, если вы не возражаете против версии по умолчанию. Он также очень маленький — всего около 8 КБ в сжатой и уменьшенной версии.
Одним из больших преимуществ jPlayer является его чрезвычайно активное сообщество разработчиков открытого исходного кода с широкой поддержкой платформ, бесплатными плагинами и исчерпывающей документацией. Если вы ищете простой, гибкий проигрыватель HTML5, который работает с jQuery и имеет отличную документацию и поддержку сообщества, тогда вам не нужно искать дальше, чем jPlayer!
[Ссылка]
3. Универсальный аудиоплеер HTML5
Хотя этот аудиоплеер HTML5 платный, всего за 5 долларов он предлагает богатый набор функций. Первый и самый очевидный из них — кросс-девайсная совместимость — плеер был тщательно протестирован и работает на iOS, Android и настольных браузерах.
Проигрыватель имеет изящные резервные возможности и удобный интерфейс. Вы можете переключить круговой индикатор прогресса, который показывает оставшееся время, а также позицию воспроизведения. Индикатор прогресса и аудиокнопки предлагают настраиваемый цвет и размеры в соответствии с вашей темой.
Определенно стоит посмотреть, если вам нужен умный недорогой аудиоплеер HTML5, который можно разместить на вашем веб-сайте, оптимизированном для мобильных устройств!
[Ссылка]
4. SoundManager 2
SoundManager 2 — один из самых настраиваемых продуктов в этом списке: в своей самой простой форме это не более чем небольшой проигрыватель HTML5, который может запускать и останавливать песню. Однако с некоторой настройкой его можно преобразовать практически в любую тему, изображение или дизайн, который только можно вообразить — на снимке экрана ниже показана настроенная установка SoundManager 2 с работающими проигрывателями!
SoundManager 2 невелик — вся установка занимает всего около 11 КБ после правильной оптимизации. API не имеет внешних зависимостей, является гибким и простым в использовании, поддерживает аудио HTML5, где это уместно, и изящно возвращается к Flash, когда это необходимо.
[Ссылка]
5.
audio.js
audio.js — это проигрыватель без излишеств, цель которого — обеспечить функциональность вставки в любом месте. После загрузки в браузере вы можете использовать теги в любом месте HTML-файла — даже если в браузере не включен HTML5, audio.js изящно возвращается к Flash.
audio.js небольшой, скудный и настраиваемый (в определенной степени), достаточный для того, чтобы его можно было легко добавить на большинство веб-сайтов. Мобильные сайты особенно полюбят небольшой размер этого проигрывателя, и было подтверждено, что он работает в мобильных браузерах Safari и Chrome, что делает его привлекательным для веб-сайтов, предназначенных для тех, кто в пути!
[Ссылка]
6. Codebase HTML5 Music Player
Проигрыватель HTML5 от Codebase — еще одна запись в категории минималистичных аудиоплееров, но он делает это хорошо: музыкальный проигрыватель полностью построен на jQuery, и его приверженность эстетике демонстрирует.
Кнопки мерцают и двигаются очень плавно, а весь интерфейс кажется очень гладким. Он имеет некоторые базовые функции, которые позволяют вам создавать список воспроизведения и оценивать песни в нем, а также возможность добавлять ссылки на песни для их покупки, и его можно модифицировать, добавляя, например, биографии исполнителей или тексты песен в песни в плейлисте.
Он совместим с разными браузерами и поддерживает резервный вариант Flash, что делает этот еще один медиаплеер идеальным для использования на мобильных устройствах, таких как Android и iPad.
[Ссылка]
7. Плагин OIPlayer jQuery
OIPlayer — еще один проигрыватель на основе jQuery, который поставляется с несколькими наворотами. Его легко внедрить и использовать, он поддерживает несколько игроков на странице, позволяет выполнять полный просмотр через HTML5. Он может вернуться к Flowplayer или Cortado, если требуется откат. Плеер и его кнопки настраиваются с помощью CSS, и вы можете разместить кнопки сверху или снизу проигрывателя.
Он совместим с iOS и Android и запускает пользовательские события для использования в статистике воспроизведения на любой странице. В целом, это удобный, простой в использовании плагин для jQuery, который заслуживает внимания, особенно если вы уже используете jQuery для других функций.
[Ссылка]
По мере того, как все больше и больше браузеров поддерживают HTML5, аудиоплееры HTML5 — отличный способ избавиться от головной боли, связанной с Flash, и убедиться, что у вас есть проигрыватель, который работает так, как задумано во всех браузерах. Каждый из плееров в этом списке хорошо подходит для разных целей — некоторые лучше подходят для мобильных устройств, другие более полнофункциональны, но крупнее. Однако все они приносят превосходство на стол! Попробуйте сегодня один из этих проигрывателей HTML5 и дополните свой веб-сайт мультимедийными материалами!
Follow @shoutmetech10 лучших проигрывателей 2023 года
Media Element
MediaElement — это аудио- и видеоплеер, написанный на чистом HTML5 и CSS.
Старые браузеры поддерживаются пользовательскими проигрывателями Flash и Silverlight, которые имитируют HTML5 MediaElement API.
Media Element имеет внешний вид и предлагает плагины для популярных платформ, таких как WordPress, Drupal, Joomla и т. д.0099
Этот плеер очень минималистичный, но работает хорошо. Отлично подходит для использования, когда вам не нужны плейлисты или какие-либо причудливые эффекты!
Динамик
Вот отличный плеер, наверное мой любимый из всего списка. Speakker очень прост в настройке и поставляется в двух вариантах и с невероятными возможностями настройки: гибкие размеры, неограниченное количество цветов и т. д.
Speakker совместим с разными браузерами и имеет резервную копию Flash для старых браузеров.
и два разных набора кнопок для светлой и темной тем оформления.
→ Посетите http://www.speakker.com/
MooTools HTML5 Audio Player
Используете ли вы Mootools на своем веб-сайте? Если да, вам, вероятно, понравится этот плеер, созданный с использованием HTML5 и JavaScript-фреймворка Mootools.
Плеер отлично работает во всех последних браузерах.
→ Посетите http://simulacre.org/mootools-html5-audio-player/
Универсальный аудиоплеер HTML5
Этот проигрыватель — единственный из списка, который не является бесплатным. Но это дешево (всего 5 долларов!) И работает хорошо. Он имеет множество полезных функций, таких как способ защиты вашего аудио от перехвата с помощью наложения звукового сигнала, что является отличным решением для коммерческого использования.
→ Посетите https://codecanyon.net/item/universal-html5-audio-player
SoundManager 2
Используя HTML5 и Flash, SoundManager 2 обеспечивает надежный кросс-платформенный звук в одном легком (10 КБ) ) API JavaScript.
Хотите узнать, что вы можете делать с помощью Sound Manager 2? Тогда посетите Wheelsofsteel.net для потрясающей демонстрации!
→ Посетите http://www.schillmania.com/projects/soundmanager2/
jplayer
jplayer — это подключаемый модуль jQuery, который был моим любимым аудиоплеером в течение нескольких месяцев из-за его простоты.