-范围类型输入在Firefox中不是动态的，但在Chrome -added reprex中是动态的。
-范围类型输入在Firefox中不是动态的，但在Chrome -added reprex中是动态的。
提问于 2022-05-08 18:40:47
- 增益控制器在chrome上动态工作，但在火狐中却不工作。我需要为浏览器重播音频文件，以识别火狐的范围输入的新输入值。我不知道为什么。
- ，你需要把一个mp3文件放到"example.mp3“里，顺便说一句。
- 我是新来的。试过了。对不起，如果不是应该是
HTML + Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<button class="button">click</button>
<input
class="input"
type="range"
step="0.01"
min="0"
max="1.20"
value="0.60"
/>
</div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>
<script type="text/javascript">
loopify("example.mp3", function (err, loop) {
// If something went wrong, `err` is supplied
document.querySelector(".button").dataset.playing = "false";
if (err) {
return console.err(err);
}
document.querySelector(".button").addEventListener("click", function () {
if (this.dataset.playing === "false") {
loop.play();
this.dataset.playing = "true";
} else if (this.dataset.playing === "true") {
setTimeout(loop.stop, 250);
this.dataset.playing = "false";
}
});
});
</script>Javascript
(function () {
function loopify(uri, cb) {
var context = new (window.AudioContext || window.webkitAudioContext)(),
request = new XMLHttpRequest();
const gainNode = context.createGain();
request.responseType = "arraybuffer";
request.open("GET", uri, true);
// XHR failed
request.onerror = function () {
cb(new Error("Couldn't load audio from " + uri));
};
// XHR complete
request.onload = function () {
context.decodeAudioData(request.response, success, function (err) {
// Audio was bad
cb(new Error("Couldn't decode audio from " + uri));
});
};
request.send();
function success(buffer) {
var source;
// fade-out
document.querySelector(".button").onclick = function () {
if (this.dataset.playing === "true") {
gainNode.gain.setTargetAtTime(0, context.currentTime, 0.25);
}
};
function play() {
// Stop if it's already playing
stop();
// Create a new source (can't replay an existing source)
source = context.createBufferSource();
source.connect(gainNode).connect(context.destination);
// fade-in
gainNode.gain.value = 0.1;
gainNode.gain.setTargetAtTime(
document.querySelector(".input").value,
context.currentTime,
0.25
);
//gain input assignment
document.querySelector(".input").addEventListener(
"input",
function () {
gainNode.gain.value = this.value;
},
false
);
// Set the buffer
source.buffer = buffer;
source.loop = true;
// Play it
source.start(0);
}
function stop() {
// Stop and clear if it's playing
if (source) {
source.stop();
source = null;
}
}
cb(null, {
play: play,
stop: stop,
});
}
}
loopify.version = "0.1";
if (typeof define === "function" && define.amd) {
define(function () {
return loopify;
});
} else if (typeof module === "object" && module.exports) {
module.exports = loopify;
} else {
this.loopify = loopify;
}
})();CSS
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-15 12:48:41
经过一些实验，并试图复制您的代码，我偶然发现了一些奇怪的东西。
无论何时使用gainNode.gain.setTargetAtTime，我们都无法通过使用setter gainNode.gain.value来更新增益值。我在setTargetAtTime或value的文档中找不到任何解释为什么会发生这种情况。
幸运的是，有一个不破坏setTargetAtTime提供的淡入的修补程序。
解决方案在于使用setValueAtTime而不是设置器来设置增益值。
const input = document.querySelector(".input");
gainNode.gain.value = 0.1;
gainNode.gain.setTargetAtTime(
input.value,
context.currentTime,
0.25
);
input.addEventListener(
"input",
function () {
gainNode.gain.setValueAtTime(
this.value,
context.currentTime
)
},
false
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72164092
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号