Текущий уровень громкости как в вк?

Question

[Yariik]

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

Answer 1

[Stalker_RED]

Примерно так


Стили еще нужно допиливать и добавить throttle/debounce наверное.
Можно еще transition, и скрывать через opacity.

Answer 2

[fallus]

Если это 1 аудиоплеер, то:

spoiler

Если плееров много будет, то вместо querySelector юзать нужно querySelectorAll.
Потом циклом по ним проходиться, подписывая события на каждый.
И в этом случае, стоит обозначать, какой контейнер(с атрибутом data-hint) соответствует какому аудио-плееру.
Проще всего, как в этом примере. Чтобы этот контейнер был родителем аудио-плееру.
Чтобы в цикле, например, этот аудио-плеер можно было легко найти, например так:

var myAudio = myAudioHoverBlock[i].querySelector('audio')