- 增益控制器在 chrome 上動態作業，但在 Firefox 中卻不行。我需要為瀏覽器重新播放音頻檔案以識別 Firefox 輸入范圍的新輸入值。我不知道為什么。
- 順便說一句，您需要將一個 mp3 檔案放入“example.mp3”部分。
- 我是新來的。嘗試了reprex。對不起，如果它不是應該的
[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%);
}
uj5u.com熱心網友回復：
經過一些實驗并嘗試重現您的代碼后，我偶然發現了一些奇怪的東西。
每當我們使用時gainNode.gain.setTargetAtTime，我們都無法使用 setter 更新 Gain 值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
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/476222.html
標籤：javascript dom 网络音频 api