<div id="myAudioHoverBlock" data-hint>
  <audio id="myAudio" controls="controls" controlslist="nodownload">
    <source src="https://w1.musify.club/track/dl/1678273/%d0%ba%d1%80%d0%be%d0%b2%d0%be%d1%81%d1%82%d0%be%d0%ba-%d1%81%d0%b4%d0%b0%d0%b2%d0%b0%d1%82%d1%8c-%d0%b3%d0%be%d0%b2%d0%bd%d0%be.mp3" type="audio/mpeg">
  </audio>
</div>

body{
  margin: 0;
  padding: 50px
}

[data-hint]{
    position: relative;
    width: max-content;
    font-family: system-ui
}

[data-hint]::before{
    content: attr(data-hint);
    position: absolute;
    left: 50%;
    bottom: 100%;
    background: rgba(0,0,0,.9);
    z-index: 2;
    padding: 3px 7px;
    color: #fff;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease
}
[data-hint]:hover::before{
    opacity: 1;
    pointer-events: auto;
}

window.addEventListener('load', function(){

// Блок, при наведении мыши на который появляется подсказка из атрибута data-hint
var myAudioHoverBlock = document.querySelector('#myAudioHoverBlock')
// Аудио-штука, громкость которой мы будем менять
var myAudio = document.querySelector('#myAudio')

// Подписка на событие изменения громкости у Аудио-штуки
myAudio.addEventListener('volumechange', setAudioHint);

// Функция, которая добавляет в атрибут data-hint нужные вкуснявочки
function setAudioHint(){
    myAudioHoverBlock.setAttribute('data-hint', (myAudio.volume * 100).toFixed(0) + '%')
}

// Вызываем эту функцию после загрузки страницы.
setAudioHint()

})