Как сделать подобное для управления звуком?

Question

Вижу примерно такое на разных сайтах в плеерах так вот вопрос: как сделать нечто подобное для себя?

Answer 1

Думаю, что есть способы лучше, но это работает.

let audio = new Audio();
let volumeInfo = document.querySelector('.volume-info');
let volumes = document.querySelectorAll('.vol');
volumes.forEach(vol => {
  vol.addEventListener('click', function(event) {
    
    audio.volume = this.dataset.vol;
    volumeInfo.innerText = `${audio.volume * 100}%`;
    
    volumes.forEach(v => {
      if (v.dataset.vol <= audio.volume) {
        v.classList.add('active');
      } else {
        v.classList.remove('active');
      }
    });
  });
});

.volume {
  display: inline-flex;
  background: black;
}

.vol {
  width: 10px;
  height: 30px;
  background: gray;
  margin: 3px;
  cursor: pointer;
}

.vol.active {
  background: blue;
}

<div class="volume">
  <div class="vol active" data-vol="0"></div>
  <div class="vol active" data-vol="0.1"></div>
  <div class="vol active" data-vol="0.2"></div>
  <div class="vol active" data-vol="0.3"></div>
  <div class="vol active" data-vol="0.4"></div>
  <div class="vol active" data-vol="0.5"></div>
  <div class="vol" data-vol="0.6"></div>
  <div class="vol" data-vol="0.7"></div>
  <div class="vol" data-vol="0.8"></div>
  <div class="vol" data-vol="0.9"></div>
  <div class="vol" data-vol="1"></div>
</div>
<div class="volume-info">50%</div>

БЛОГ НА HUSL

Как сделать подобное для управления звуком?

Ответы (1 шт):