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>
2 respuestas
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()">
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>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.