ползунок улучшения громкости с HTML и JS - PullRequest
Новая
       0

ползунок улучшения громкости с HTML и JS

0 голосов
/ 22 февраля 2020

Я создал простой аудио-слайдер (благодаря множеству ответов здесь), который автоматически воспроизводит звук (при нулевой громкости), когда пользователь нажимает на слайдер, а затем позволяет им увеличивать громкость, если они sh.

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

JS

var mediaClip;
var volume1;

function init()
{
    mediaClip = document.getElementById("mediaClip");
    volume1 = document.getElementById("volume1");

    mediaClip.play();
}

function setVolume() {
    var mediaClip = document.getElementById("mediaClip");
    mediaClip.volume = document.getElementById("volume1").value;
}


function play() {
    var audio = document.getElementById("mediaClip");
    audio.play();
}

HTML

<body onload="init()">
    <audio id="mediaClip" src="A Very Brady Special.mp3"  style="display:none" allow="autoplay" controls>
        <p>Your browser does not support the audio element</p>
    </audio>

    <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">
</body>

Ответы [ 2 ]

1 голос
/ 22 февраля 2020

Как и в случае с Connexo, используйте oninput вместо onchange, и я бы использовал setVolume(this), чтобы вы могли применить его к любому ползунку (и он аккуратнее). 

var mediaClip;
var volume1;

function init() {
  mediaClip = document.getElementById("mediaClip");
  volume1 = document.getElementById("volume1");

  mediaClip.play();
}

function setVolume(el) {
  var newVal = el.value;
  
  document.getElementById("volumeVal").innerHTML = newVal;
  mediaClip.volume = newVal;
}


function play() {
  var audio = document.getElementById("mediaClip");
  audio.play();
}
<body onload="init()">

  <audio id="mediaClip" src="A Very Brady Special.mp3" style="display:none" allow="autoplay" controls>
    <p>Your browser does not support the audio element</p>
  </audio>

  <p>onChange</p>
  <input type="range" onchange="setVolume(this)" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">
  
  <p>onInput</p>
  <input type="range" oninput="setVolume(this)" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">
  
  <h3>Volume: <span id="volumeVal">0</span></h3>

</body>
1 голос
/ 22 февраля 2020

Просто используйте 

<input type="range" oninput="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">

вместо 

<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...