Аудиоплеер html: Аудиоплеер на JavaScript и HTML для чайников

Сравниваем 6 популярных музыкальных плееров под Android с поддержкой BitPerfect-доступа к USB ЦАПу. Кто победит? / Hi-Fi и цифровой звук / iXBT Live

Напоминаю, что в прошлом сравнении у нас схлестнулись 5 бесплатных музыкальных плееров под Android с поддержкой Hi-Res Audio. Кто пропустил, рекомендую почитать сначала первую часть. Теперь пойдет самая жара, так как сегодня в сравнении примут участие 6 музыкальных плееров, которые поддерживают BitPerfect доступ к USB ЦАПам. То есть через них можно напрямую выводит звук на тот самый «свисток», о которых так часто заходит речь в наших обзорах. Для примера можно вспомнить воистину народные ЦАПы: iBasso DC03, HiBy FC3, TempoTec Sonata HD II или E1DA 9038D. Это я привел по одному из разных ценовых категорий, еще больше вариантов можете посмотреть в соответствующей подборке на этом же ресурсе.

В сравнении примут участие (о чем вы меня неоднократно просили) PowerAmp, Neutron, USB Audio Player, NePlayer, HiBy Music и FiiO Music. К сожалению, плееры от Shanling умеют работать только со своими устройствами. Исключались также программы не поддерживающие разрешение 24 бита 96 кГц, которое по определению является нижней границей Hi-Res Audio и на котором у нас происходят все измерения. Из аппаратуры использовался аудиоинтерфейс Motu M4, а в качестве источника я взял Hi-Res аудиоплеер на Android Shanling M3X и к нему USB ЦАП iBasso DC03. Уровень громкости составляет 100%, все приложения скачаны из Play Market, величина дополнительной нагрузки — 32 ома. В процессе я делаю ровно 4 замера, чтобы исключить случайные отклонения. Итак, все формальности учтены, пора представлять участников.

Участники

О HiBy Music и FiiO Music мы уже говорили в первой части сравнений. Это крупные производители аудиообрудования с которыми уже давно принято считаться у всего аудиофилского сообщества. Кроме того, HiBy Music много лет был известен как поставщик программного обеспечения для большого числа аудиодевайсов из Китая и не только. Возможностей у этих музыкальных плееров просто масса: разного вида эквалайзеры, поддержка Hi-Res форматов, MQA, DSD. В общем, довольно серьезные программы.

PowerAmp, пожалуй что был первым нормальным плеером с поддержкой lossless форматов на Android. Он реально пионер в этой сфере, поэтому и количество скачиваний у него превосходит все возможные пределы. Звуковой движок менялся уже несколько раз, есть все необходимые настройки, эквалайзер и красивые эффекты визуализации. По умолчанию схема формирования сигнала у PowerAmp какая-то просто дичайшая, но ее можно настроить.

Следом за PowerAmp появился аудиофилский Neutron. Он также поддерживает USB ЦАПы, имеет целую кучу разнообразных настроек, есть даже тонкости для DSD сигнала. Интерфейс конечно тут на любителя, но то дело второе.

USB Audio Player изначально предназначался исключительно для воспроизведения музыки через USB ЦАПы, но по просьбе пользователей его функционал был расширен. Один из лучших в своем классе, не единичны случаи, когда производители аудиообрудования предустанавливали его на свои девайсы в качестве основного музыкального софта. Мой фаворит, думаю, что именно он превзойдет всех.

Следующий участник — NePlayer. Играет он только из плейлиста, причем к папкам доступа нет вообще. Родом, судя по всему, из Японии. Очень мало информации, однако USB ЦАПы он тоже поддерживает и умеет разделять музыку по качеству.

Тестирование

1. Начнем с неравномерности АЧХ в диапазоне 40 Гц — 15 кГц (Дб).

HiBy Music	-0.06	-0.18
FiiO Music	+0.04	-0.09
PowerAmp	-0.05	-0.24
Neutron	-0.06	-0.18
USB Audio Player	-0.06	-0.17
NePlayer	-0.06	-0.17

По цифрам видно, что все справились очень хорошо, но Neutron зачем-то обрезает частотный диапазон на 20 кГц. По этой причине он здесь оказался аутсайдером.

2. Следом идет уровень шума (Дб).

HiBy Music	-108.8
FiiO Music	-108.8
PowerAmp	-108.2
Neutron	-107.8
USB Audio Player	-108.8
NePlayer	-108.5

Тоже все в принципе молодцы, худший результат у Neutron.

3. Самый важный, на мой взгляд, параметр — динамический диапазон (Дб).

HiBy Music	109.0
FiiO Music	102.2
PowerAmp	108.2
Neutron	107.8
USB Audio Player	109.0
NePlayer	108.6

В этом случае сплоховал FiiO Music и чуть лучше результат у Neutron. Самый же топ показали HiBy Music и USB Audio Player.

4. Ну и последняя пара — уровень гармонических и интермодуляционых искажений в процентах.

HiBy Music	0.00080	0.00165
FiiO Music	0.00078	0.314
PowerAmp	0.00082	0.00323
Neutron	0.00080	0.010
USB Audio Player	0.00078	0.00168
NePlayer	0.00078	0.00166

Аутсайдеры опять FiiO Music и Neutron, все остальные почти ноздря в ноздрю.

Выводы

Какие можно подвести итоги? Если вы планируете использовать со смартфоном мобильный, ну или даже стационарный, USB ЦАП, то выбирать FiiO Music и Neutron не нужно, у них самые низкие показатели качества среди измеренных нами. На удивление неплохо себя показал PowerAmp на своем новом движке и неочень популярный NePlayer. От них, честно скажу, не ожидал. Ну а реальными лидерами оказались бесплатный HiBy Music и платный USB Audio Player. Разницы между ними в данном аспекте использования вообще никакой. Однозначно могу их рекомендовать и использовать по назначению. Тем более, что они к тому же еще и поддерживают стримминговые сервисы в режиме BitPerfect, а это вообще высший уровень качества.

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

P.S. По просьбе трудящихся была проверена и платная версия Onkyo HF Player. Однако, в силу лишь программной громкости, высокий класс по уровню шумов и динамическому диапазону она показать не смогла: -107.7 и 107.7 Дб. соответственно. АЧХ еще хуже, чем у Neutron, поскольку даже раньше затухает и вполне нормальные значения искажений. Рекордов плеер точно не бьет, хороший средний уровень наряду с PowerAmp и NePlayer.

Новости

Публикации

Продавец называет данное устройство увлажнителем воздуха, но учитывая производительность 15-20мл/ч, это всё же больше ароматизатор и бонусом ночник с имитацией пламени. Объем резервуара 250 мл,…

Честно признаться, в свете последних событий с Твиттер, моё мнение об Илоне Маске изменилось. Начнём с того, что я никогда не считал его Тони Старком, но сейчас их сравнение стало вовсе не…

Детские наушники Hiper LUCKY VTX1- выполнены в розовом цвете. Пластиковое оголовье легко регулируется по размеру головы ребенка. Наушники подключаются к устройству, с помощью кабеля 1.2 метра на…

Введение В этой публикации мы разберемся, что такое P2P-торговля в криптовалюте, какие есть плюсы и минусы в таком способе обмена средств. А также я поделюсь своим опытом обмена на…

Колонка Tribit XSound Go имеет небольшую заявленную мощность, поэтому невелика в размерах. Модель оказалась меньше, чем я думал, и меньше моей предыдущей портативной колонки от Tronsmart. После…

Страх — плохой советчик, особенно при совершении покупок. И лишний раз напомнить об этом стоит. Что порой лучше потерпеть разрешения ситуации, чем сломя голову бежать в магазин. Я уверен,…

Ошибка 404 :: Страница не найдена

ЕГЭ

 Единый государственный экзамен (ЕГЭ) — это форма государственной итоговой аттестации (ГИА) по образовательным программам среднего общего образования.

При проведении ЕГЭ используются контрольные измерительные материалы (КИМ), представляющие собой комплексы заданий стандартизированной формы. Для оформления ответов на задания КИМ используются специальные бланки.

ЕГЭ по всем учебным предметам, кроме иностранных языков, проводится в письменной форме на русском языке. ЕГЭ по иностранным языкам проводится в устной и письменной форме.

ЕГЭ организуется и проводится Федеральной службой по надзору в сфере образования и науки (Рособрнадзором) совместно с органами исполнительной власти субъектов Российской Федерации, осуществляющими государственное управление в сфере образования.

ЕГЭ проводится по 15 учебным предметам:

• Русский язык
• Математика
• Физика
• Химия
• История
• Обществознание
• Информатика и информационно-коммуникационные технологии (ИКТ)
• Биология
• География
• Английский язык
• Немецкий язык
• Французский язык
• Китайский язык
• Испанский язык
• Литература

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

Другие предметы ЕГЭ участники сдают на добровольной основе.

Сдать можно любое количество предметов из списка.

ОГЭ

Освоение образовательных программ основного общего образования завершается обязательной государственной итоговой аттестацией (далее – ГИА).

Формы проведения ГИА по образовательным программам основного общего образования – основной государственный экзамен (ОГЭ) и государственный выпускной экзамен (ГВЭ).

ОГЭ – это форма государственной итоговой аттестации по образовательным программам основного общего образования. При проведении ОГЭ используются контрольные измерительные материалы стандартизированной формы.

ГВЭ – форма ГИА в виде письменных и устных экзаменов с использованием текстов, тем, заданий, билетов.

ГИА в форме ОГЭ и (или) ГВЭ включает в себя четыре экзамена по следующим предметам: экзамены по русскому языку и математике (далее – обязательные учебные предметы), а также экзамены по выбору обучающегося, экстерна (далее вместе – участники ГИА) по двум учебным предметам из числа учебных предметов, названных в Порядке проведения ГИА по образовательным программам основного общего образования: физика, химия, биология, литература, география, история, обществознание, иностранные языки (английский, французский, немецкий и испанский языки), информатика и информационно-коммуникационные технологии (ИКТ).

Для участников ГИА с ограниченными возможностями здоровья, участников ГИА – детей-инвалидов и инвалидов по их желанию ГИА проводится только по обязательным учебным предметам.

Лицам, изучавшим родной язык из числа языков народов Российской Федерации и литературу народов Российской Федерации на родном языке из числа языков народов Российской Федерации при получении основного общего образования, предоставляется право выбрать экзамен по родному языку и/или родной литературе.

Информация о проведении государственной итоговой аттестации в форме ЕГЭ и ОГЭ взята на сайте Федерального института педагогических измерений. https://fipi.ru/

Издательство «Экзамен» – ведущее издательство Российской Федерации, специализирующееся на выпуске учебной литературы для подготовки к ЕГЭ и ОГЭ.

Издательство «Экзамен» имеет в своём активе обширный банк заданий ЕГЭ и ОГЭ, что позволяет создавать практичные, удобные учебные пособия, удовлетворяющие разнообразные потребности школьников, готовящихся к сдаче итоговой аттестации.

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

Авторами учебных пособий являются действующие разработчики вариантов демонстрационных версий ЕГЭ и ОГЭ.

Методисты издательства тщательно отслеживают все изменения, которые происходят в порядке проведения выпускных экзаменов. Они полностью учтены в новых учебных пособиях для подготовки к ЕГЭ и ОГЭ 2023 года. 

Издательство «Экзамен» является лидером по выпуску пособий для подготовки к ВПР. Большинство пособий по всем предметам прошли экспертизу ФИОКО и имеют официальный гриф «Рекомендовано Федеральным институтом оценки качества образования для использования в организациях, осуществляющих образовательную деятельность по программам общего образования», который обозначен на обложках изданий логотипом ФИОКО.

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

Пособия «Издательства «Экзамен» отражают все последние изменения, созданы разработчиками ВПР, содержат от 10 до 25 вариантов типовых экзаменационных заданий, все необходимые инструкции, детальные разборы выполнения заданий, подробные критерии оценивания, ответы, которые в случае необходимости легко изымаются из пособия, а также тематические задания. 

 Для более подробного ознакомления с пособиями рекомендуется использовать таблицу (иконки содержат ссылки для клика):

Предмет	Класс
	4	5	6	7	8	10	11
Русский язык						—	—
Математика						—	—
Окружающий мир		—	—	—	—	—	—
История	—					—	—
Обществознание	—	—				—	—
Биология	—					—	—
Химия	—	—	—	—		—	—
Физика	—	—	—			—	—
География	—	—				—	—
Иностранный язык	—	—	—		—	—

Уважаемые коллеги!

Учебники физики для 7, 8 и 9 классов Перышкина А. В. включены в ФПУ (приказ №766 от 23. 12. 2020)

В связи с пандемией коронавируса и массовым переходом школ на удаленное обучение, в целях поддержки образовательных процессов предлагаем Вам бесплатно установить Электронную Форму Учебников (ЭФУ) физики 
А. В. Перышкина «Издательство «Экзамен». Скачайте и установите выбранный учебник. После установки введите соответствующий код активации.

1. «Физика. 7 класс: учебник / А. В. Перышкин. «Издательство «Экзамен»

Код активации: LARY7-1PHZA-2YGOU-2XP2V-OKUMA

2. «Физика. 8 класс: учебник / А. В. Перышкин. «Издательство «Экзамен»

Код активации: 263UP-BQY4J-JFWLR-UPN4W-18SQJ

3. «Физика. 9 класс: учебник / А. В. Перышкин. «Издательство «Экзамен»

          

             Код активации: LNUQ9-ZM4VP-6ZAMS-HEUS8-5NYWB

Предлагаем Вашему вниманию краткий видеообзор новой линии учебников по физике А.

В. Перышкина для 7—9 классов, разработанных издательством «Экзамен».

Также вашему вниманию предлагается краткий видеообзор электронной формы учебников.

Более полную информацию о линии учебников А. В. Перышкина для 7—9 классов Вы можете получить, посмотрев вебинар, который провёл Александр Александрович Кудрявцев, учитель физики и информатики, автор цифровых образовательных ресурсов.  

В единый Учебно-методический комплект с учебниками «Издательства «Экзамен» линии Перышкина А. В. для 7-9 классов входят «Дидактические материалы, направленные на формирование естественно-научной грамотности обучающихся» для 7, 8 и 9 классов.

Уважаемые коллеги!

Уведомляем Вас о нижеследующем.

1. Опубликован Приказ № 699 Минобрнауки от 9 июня 2016 года «Об утверждении перечня организаций, осуществляющих выпуск учебных пособий, которые допускаются к использованию при реализации имеющих государственную аккредитацию образовательных программ начального общего, основного общего, среднего общего образования». Приказ зарегистрирован в Минюсте РФ. Регистрационный № 42729 от 04 июля 2016 года.

2. На основании Приказа № 699 утвержден новый перечень организаций, осуществляющих выпуск учебных пособий, которые допускаются к использованию при реализации имеющих государственную аккредитацию образовательных программ начального общего, основного общего, среднего общего образования.

3. На основании Приказа № 699 ИЗДАТЕЛЬСТВО «ЭКЗАМЕН» вошло в перечень организаций, осуществляющих выпуск учебных пособий.

В настоящее время все учебные пособия, созданные ИЗДАТЕЛЬСТВОМ «ЭКЗАМЕН», могут использоваться в образовательных организациях Российской Федерации.

С Приказом № 699 можно ознакомиться на сайте Министерства просвещения Российской Федерации: https://docs.edu.gov.ru/document/c360e712db042eedb83fddd1b41b9999/

УМК. Начальная школа 

Издательство «Экзамен» — лидер на рынке образовательных услуг по выпуску учебных пособий. Пособия для начальной школы в издательстве «Экзамен» реализуют требования Федерального государственного образовательного стандарта начального общего образования (ФГОС НОО). В них оперативно учитываются изменения, происходящие в образовательном процессе, их содержание соответствует примерным программам по учебным предметам. Красочное оформление пособий соответствует возрастным особенностям учащихся. Все пособия являются необходимым дополнением к учебникам Федерального перечня.

Пособия для начальной школы издательства:

— развивают у ребенка логические способности и логическое мышление;

— учат ориентироваться и взаимодействовать с окружающим миром, способствуют социализации учащихся;

— формируют метапредметные умения и навыки;

— развивают самостоятельность.

Особое место занимают пособия для подготовки к Всероссийской проверочной работе в 1, 2, 3 и 4-х классах начальной школы. К ним относятся:

— «Всероссийская проверочная работа по математике за курс начальной школы»;

— «Всероссийская проверочная работа по русскому языку за курс начальной школы»;

— «Всероссийская проверочная работа по литературному чтению за курс начальной школы»;

— «Всероссийская проверочная работа по окружающему миру за курс начальной школы».

Дорогие учителя, ученики и их родители! Вы можете легко найти все необходимые книги в разделе «Каталог», там же размещена информация о способах доставки заказа.

 

 

Освойте это прямо сейчас с нашим примером кода »

В тегах HTML, New

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Что делает Новый аудио HTML-элемент: освойте его прямо сейчас с нашим примером кода ?

Элемент

Display

inline

Contents

• 1 Code Example
  • 1.1 Flamingo Sounds
• 2 Audio Syntax
• 3 Styling the Audio Player
  • 3.1 Block display and sizing
• 4 Audio File Formats
• 5 Поддержка браузером аудио
• 6 Атрибуты аудио

Пример кода

 
Звуки фламинго
 
<управление звуком>
  
    ogg">
   
    Вы увидите этот текст, если собственное воспроизведение звука не поддерживается.
    

Аудио от Beeld en Geluid [CC BY-SA 3.0], через Wikimedia Commons
<стиль>
#аудио-пример {
дисплей: блок;
}
 

Звуки фламинго

Вы увидите этот текст, если собственное воспроизведение звука не поддерживается. Audio от Beeld en Geluid [CC BY-SA 3.0], через Wikimedia Commons

Синтаксис аудио

Элемент определяет встроенный в браузер аудиоплеер. Аудиоплеер может предоставить один фрагмент аудиоконтента. Чтобы указать исходный файл аудиоконтента, используйте один или несколько элементов внутри элемента. Все файлы должны содержать один и тот же аудиоконтент, но в разных форматах файлов. Браузер выберет первый формат файла, который он сможет воспроизвести. (Поэтому закажите их в соответствии с вашими предпочтениями.) Если вы , а не собираетесь предоставлять несколько форматов исходных файлов, вы можете указать исходный файл в атрибуте src , а не в отдельном элемент.

Стилизация аудиоплеера

стиль CSS). По большей части лучше всего оставить стиль аудиоплеера в покое, позволяя браузеру управлять им. Это обеспечивает знакомый внешний вид для пользователя.

Отображение блока и его размер

Для элемента можно указать два стиля CSS: display и width . Стиль по умолчанию для элемента — inline . Это может привести к некоторым нежелательным конфликтам:

 <управление звуком>    Вы увидите этот текст, если собственное воспроизведение звука не поддерживается.   Аудио от Beeld en Geluid [CC BY-SA 3.0], через Викисклад 

Вы увидите этот текст, если собственное воспроизведение звука не поддерживается. Audio от Beeld en Geluid [CC BY-SA 3.0], через Wikimedia Commons

Как правило, в дизайне страницы вам действительно нужно, чтобы элемент отображался как элемент block .

 #пример аудиоблока { display: block; } 

 <управление звуком>    Вы увидите этот текст, если собственное воспроизведение звука не поддерживается.   Аудио от Beeld en Geluid [CC BY-SA 3.0], через Викисклад 

#audio-block-example { display: block; } Вы увидите этот текст, если собственное воспроизведение звука не поддерживается. Audio от Beeld en Geluid [CC BY-SA 3.0], через Wikimedia Commons

Наконец, вы можете указать ширину элемента , чтобы он лучше соответствовал вашему общему макету. Для большинства адаптивных макетов хорошо работает ширина : 100% , особенно если вы используете такой же стиль ширины для других подобных элементов.

 .full-width { display: block; ширина: 100%; } 

  <управление звуком>   Ваш браузер не поддерживает воспроизведение аудио.  Аудио от Beeld en Geluid [CC BY-SA 3.0], через Wikimedia Общие 

.full-width { display: block; ширина: 100%; нижняя граница: 5px; }

Ваш браузер не поддерживает воспроизведение аудио. Audio от Beeld en Geluid [CC BY-SA 3.0], через Wikimedia Commons

Совет: Различные браузеры будут отображать элемент по-разному. Хотя вы не должны пытаться бороться с этим, вы определенно хотите проверить, как все выглядит в нескольких часто используемых браузерах (включая мобильные). Помимо стилей отображения, разные браузеры обрабатывают margin и height немного отличаются, и это может привести к некрасивым результатам, если не проверить. В частности, установка height:auto; в элементе нарушит интервал в некоторых браузерах, но не в других.

Форматы аудиофайлов

Наиболее хорошо поддерживаемым аудиоформатом является .mp3 , который распознается всеми основными браузерами, которые распознают элемент . После этого вторым наиболее хорошо поддерживаемым форматом является 9.0010 .wav , который поддерживается большинством браузеров, все еще находящихся в активной разработке (то есть, не Internet Explorer). Другие форматы, такие как .ogg и .acc , время от времени поддерживаются. Если вы хотите использовать один из этих форматов, вы должны предоставить более хорошо поддерживаемую альтернативу. (В приведенных выше примерах используются два элемента в демонстрационных целях. На практике нет реальной причины предоставлять что-либо, кроме файла .mp3 , который смогут воспроизводить практически все пользователи.)

Адам Вуд

Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.

Browser Support for audio

9	43	45	13	9	34

Attributes of audio

Имя атрибута	Значения	Примечания
громкость		Задает начальную настройку громкости аудиоэлемента в диапазоне от 0,0 до 1,0.
предварительная загрузка		Запрашивает определенное поведение предварительной загрузки в браузере, которому браузер может следовать или не следовать.
приглушен		Указывает, что громкость на аудиоплеере изначально должна быть отключена.
цикл		Указывает, что после начала воспроизведения аудиоконтент должен повторяться бесконечно.
элементы управления		Переключает отображение элементов управления воспроизведением звука.
autoplay		Указывает, что воспроизведение звука должно начинаться сразу после загрузки страницы.
src		Указывает исходный файл для аудиоэлемента.

Учебное пособие. Как создать стиль для аудиоплеера HTML 5 | Джей Роджерс

С появлением HTML 5 тег audio обеспечивает простой способ воспроизведения аудиофайлов без использования Adobe Flash. Однако с атрибутом общих элементов управления все теги аудио выглядят одинаково, но без определенных элементов управления тег аудио невидим. В этом уроке я привожу примеры и простую библиотеку для взаимодействия с аудиоэлементом через Javascript и CSS. Это дает разработчику возможность стилизовать все кнопки и создавать собственный пользовательский интерфейс для элемента Audio.

Обновление от 10–4–2014
Из-за популярности этого поста мы решили открыть исходный код библиотеки. Мы полностью удалили Amplitude.js и разместили обновления на нашем GitHub. Посетите сайт Amplitude для получения последней документации и последних функций:

Элемент Audio

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

Для более подробного ознакомления с тегом audio посетите страницу http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#audio. Многие наши функции будут запускаться обработчиком действия ontimeupdate, который вызывает функцию updateTime(). Если вы хотите использовать предопределенные стандартные элементы управления, просто поместите логические «элементы управления» в тег audio. Это противоречит всему объему этой статьи, но если вы хотите пойти по этому пути, вы тоже можете это сделать.

Элементы управления

Существует определенный набор элементов управления, которые необходимы для полного взаимодействия с аудиотегом. Я воссоздал наиболее распространенные из них:

• Play
• Пауза
• Play/Pause
• Stop
• Том Up, Down
• Meter
• Song Meter и Time Tracker

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

Javascript

Обратите внимание, что громкость указана по шкале от 0 до 1. Это означает, что 50% объема представлено как 0,5. С помощью состояния громкости и индикатора индикатор показывает, какой объем можно применить, а статус — текущий уровень громкости.

С помощью CSS вы можете стилизовать div songPlay так, как вам нравится. Например, вы можете определить цвет фона, изображение и т. д. В HTML все, что вам нужно сделать, это определить div «songPlay», а затем определить обработчик действия onclick для вызова функции воспроизведения и передачи идентификатора аудиотега. .

Кнопка паузы

Кнопка паузы имеет очень простую функцию. Приостанавливает активную песню. Поскольку активная песня устанавливается кнопкой воспроизведения, все, что делает кнопка паузы, — это приостанавливает ее, поэтому для нее не нужны никакие параметры.

HTML просто вызывает функцию паузы при нажатии. Обработчик действия onclick вызывает функцию javascript, чтобы приостановить воспроизведение песни.

Кнопка воспроизведения/паузы

Кнопка воспроизведения/паузы переключает функции в зависимости от текущего состояния песни. Если песня воспроизводится, она приостанавливается при следующем нажатии. Если песня поставлена ​​на паузу, она воспроизводится при следующем нажатии кнопки. Поскольку песня может воспроизводиться впервые, нам нужно передать идентификатор песни в качестве параметра и установить для него активную переменную песни.

Поскольку CSS не распознает состояние песни, любые изменения, которые вы хотите внести во внешний вид кнопки в виде цветов или изображений, должны выполняться с помощью Javascript.

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

Кнопка остановки

Кнопка остановки довольно проста, она останавливает песню, устанавливая текущее время песни обратно на ноль, а затем приостанавливая ее. Это имитирует событие остановки.

Кнопки увеличения и уменьшения громкости

Кнопки увеличения и уменьшения громкости имеют единственную функцию, в которой вы указываете желаемое направление громкости в качестве одного параметра и размер увеличения/уменьшения в качестве другого параметра. Чтобы настроить размер увеличения/уменьшения, просто измените значение в вызове функции.

Ползунок состояния тома заполняется в зависимости от процента объема, используемого в данный момент, и размера раздела состояния тома.

Измеритель объема

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

Вы можете установить ширину строки состояния громкости в CSS. JavaScript получает местоположение клика на горизонтальной полосе, получая местоположение клика и вычитая смещение слева. Как только процент рассчитан, вызывается функция setVolume, и ей передается процент. В этой функции устанавливается громкость активной песни и соответственно обновляется визуальный дисплей.

Счетчик песни и счетчик времени

Счетчик песни (в минутах и ​​секундах) и визуальное положение идут рука об руку. Основная цель — показать текущее местоположение песни во времени и визуально в процентах.