Mejora del control deslizante de volumen con HTML y JS

Question

He creado un control deslizante de audio simple (gracias a muchas de las respuestas aquí) que reproduce automáticamente algo de audio (a volumen cero) cuando el usuario hace clic en el control deslizante, y luego les permite aumentar el volumen si lo desean.

Mi único problema es que, en lugar de ser un aumento constante en el volumen a medida que el usuario arrastra el control deslizante, solo ajusta el volumen cuando suelta el control deslizante con el mouse. ¿Hay alguna forma de lograr un ajuste de volumen constante con solo el movimiento del control deslizante mismo? Cualquier ayuda sería muy apreciada

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>

javascript html css

0

Alex W 22 feb. 2020 a las 21:20

Answer 1

Simplemente use

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

En lugar de

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

1

connexo 22 feb. 2020 a las 18:23

Answer 2

Como se ha señalado connexo, use oninput en lugar de onchange, y yo usaría setVolume(this) para que pueda aplicarlo a cualquier control deslizante (y es más ordenado).

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

Christian 22 feb. 2020 a las 18:27

Mejora del control deslizante de volumen con HTML y JS

2 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript