AudioContext 没有暂停 属性?
AudioContext does not have a pause property?
我以前用过javascript Audio()
,但现在我需要在音频中添加一些混响效果,我正在使用reverb.js,它使用AudioContext api .我有可用的开始 属性,但没有暂停 属性?如何暂停或停止音频?
这是我的代码:
<script src="http://reverbjs.org/reverb.js"></script>
<script>
// 1) Setup your audio context (once) and extend with Reverb.js.
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
reverbjs.extend(audioContext);
// 2) Load the impulse response; upon load, connect it to the audio output.
var reverbUrl = "http://reverbjs.org/Library/SaintLawrenceChurchMolenbeekWersbeekBelgium.m4a";
var reverbNode = audioContext.createReverbFromUrl(reverbUrl, function() {
reverbNode.connect(audioContext.destination);
});
// 3) Load a test sound; upon load, connect it to the reverb node.
var sourceUrl = "./sample.mp3";
var sourceNode = audioContext.createSourceFromUrl(sourceUrl, function() {
sourceNode.connect(reverbNode);
});
</script>
<a href="javascript:sourceNode.start()">Play</a>
<a href="javascript:sourceNode.stop()">Stop</a>
此外,我尝试使用 stop()
,它有效,但是当我在单击停止后触发 start()
时,start()
不起作用。你能帮我解决一下吗??
您可以使用 AudioContext
的 suspend()
和 resume()
方法暂停和恢复音频:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/suspend
使用 play/pause/resume 的单个按钮实现此功能的一种方法是添加一个控制播放器状态的功能。例如:
let started = false;
function pauseOrResume() {
if (!started) {
sourceNode.start();
started = true;
document.getElementById("pauseButton").innerHTML = 'Pause';
} else if (audioContext.state === 'running') {
audioContext.suspend().then(function () {
document.getElementById("pauseButton").innerHTML = 'Resume';
});
} else if (audioContext.state === 'suspended') {
audioContext.resume().then(function () {
document.getElementById("pauseButton").innerHTML = 'Pause';
});
}
}
并将您现有的 "Play" 按钮替换为:
<a id="pauseButton" href="javascript:pauseOrResume()">Play</a>
这会执行以下操作:
- 如果音频还没有开始,link会显示"Play"。
- 如果用户单击 "Play",音频将开始播放并且 link 的文本将更改为 "Pause"。
- 如果用户在播放音频时点击"Pause",音频将暂停,link的文本将变为"Resume"。
我以前用过javascript Audio()
,但现在我需要在音频中添加一些混响效果,我正在使用reverb.js,它使用AudioContext api .我有可用的开始 属性,但没有暂停 属性?如何暂停或停止音频?
这是我的代码:
<script src="http://reverbjs.org/reverb.js"></script>
<script>
// 1) Setup your audio context (once) and extend with Reverb.js.
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
reverbjs.extend(audioContext);
// 2) Load the impulse response; upon load, connect it to the audio output.
var reverbUrl = "http://reverbjs.org/Library/SaintLawrenceChurchMolenbeekWersbeekBelgium.m4a";
var reverbNode = audioContext.createReverbFromUrl(reverbUrl, function() {
reverbNode.connect(audioContext.destination);
});
// 3) Load a test sound; upon load, connect it to the reverb node.
var sourceUrl = "./sample.mp3";
var sourceNode = audioContext.createSourceFromUrl(sourceUrl, function() {
sourceNode.connect(reverbNode);
});
</script>
<a href="javascript:sourceNode.start()">Play</a>
<a href="javascript:sourceNode.stop()">Stop</a>
此外,我尝试使用 stop()
,它有效,但是当我在单击停止后触发 start()
时,start()
不起作用。你能帮我解决一下吗??
您可以使用 AudioContext
的 suspend()
和 resume()
方法暂停和恢复音频:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/suspend
使用 play/pause/resume 的单个按钮实现此功能的一种方法是添加一个控制播放器状态的功能。例如:
let started = false;
function pauseOrResume() {
if (!started) {
sourceNode.start();
started = true;
document.getElementById("pauseButton").innerHTML = 'Pause';
} else if (audioContext.state === 'running') {
audioContext.suspend().then(function () {
document.getElementById("pauseButton").innerHTML = 'Resume';
});
} else if (audioContext.state === 'suspended') {
audioContext.resume().then(function () {
document.getElementById("pauseButton").innerHTML = 'Pause';
});
}
}
并将您现有的 "Play" 按钮替换为:
<a id="pauseButton" href="javascript:pauseOrResume()">Play</a>
这会执行以下操作:
- 如果音频还没有开始,link会显示"Play"。
- 如果用户单击 "Play",音频将开始播放并且 link 的文本将更改为 "Pause"。
- 如果用户在播放音频时点击"Pause",音频将暂停,link的文本将变为"Resume"。