Comments (11)
The requirement can be achieved using a single, dedicated AudioContext
, resume()
, suspend()
, and close()
methods of the same
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="file" id="file" accept=".webm,.opus" /><br />
<button id="start">start</button>
<button id="pause">pause</button>
<button id="resume">resume</button>
<button id="close">close</button>
<script>
onload = async (_) => {
const ac = new AudioContext();
console.log(ac.state);
ac.onstatechange = (e) => console.log(ac.state);
let absn;
let buffer;
let ab;
const sources = _ => absn instanceof AudioBufferSourceNode
&& buffer instanceof AudioBuffer;
document.getElementById('file').onchange = async (e) => {
ab = await e.target.files[0].arrayBuffer();
if (ac.state === 'running') {
await ac.suspend();
}
};
document.getElementById('start').onclick = async (e) => {
if (!sources()) {
buffer = await ac.decodeAudioData(ab);
absn = new AudioBufferSourceNode(ac, { buffer, loop: true });
absn.onended = async (e) => {
console.log(e);
};
absn.connect(ac.destination);
if (ac.state === 'suspended') {
ac.resume();
console.log({ab, buffer}, ac.state);
absn.start(ac.currentTime);
}
}
};
document.getElementById('pause').onclick = async (e) => {
if (sources() && ac.state === 'running') {
await ac.suspend();
}
};
document.getElementById('resume').onclick = async (e) => {
if (sources() && ac.state === 'suspended') {
await ac.resume();
}
};
document.getElementById('close').onclick = async (e) => {
await ac.close();
};
};
</script>
</body>
</html>
from web-audio-api-v2.
Currently, the only way I know of to pause an AudioBufferSourceNode
is to set the playbackRate
to 0. Nice thing about this is that you can do it with sample-accurate timing using setValueAtTime()
. Well, to the accuracy of a render quantum; playbackRate
is a k-rate AudioParam
.
from web-audio-api-v2.
from web-audio-api-v2.
Cool. Ty very much for that. I made a simpler example with just play/pause buttons and it works nice.
But this is resuming/suspending on the context level, wouldn't it be nice if you could suspend/resume on the source node level?
from web-audio-api-v2.
The difference is if you have 2 AudioBufferSourceNodes or AudioBufferSourceNode along some other source nodes. You wouldn't have to pause all of them as with context.suspend(), but only certain source.
from web-audio-api-v2.
One option to connect source nodes is to an MediaStreamAudioDestinationNode
with the stream
property set at HTMLMediaElement
srcObject
, use the <audio>
or <video>
element to play and pause (output audio) an AudioBufferSourceNode
and, or other connected audio nodes
const ac = new AudioContext();
const mediaElement = new Audio();
mediaElement.controls = mediaElement.autoplay = true;
document.body.appendChild(mediaElement);
const source = new MediaStreamAudioDestinationNode(ac);
absn.connect(source);
mediaElement.srcObject = source.stream;
from web-audio-api-v2.
OK, I forgot to add
sourceNode.start();
for the AudioBufferSourceNode to start "playing" its content into the next node, but even then the pause on the audio element just stops the sound to be outputted on my device, the AudioBufferSourceNode is not paused and continues to play and consume the buffer.
from web-audio-api-v2.
Teleconf: Current browsers take advantage of the fact that once stop is called, it can't be restarted. This includes cleaning up all internal storage and methods and possibly disconnecting (internally) from downstream nodes. These improve memory usage and performance.
If setting the playbackRate is not good enough, we also note that we're adding a playbackPosition #26 so you can schedule a stop and get the playback position at that time. Then construct a new ABSN with the same buffer, and start the ABSN where you left off using start with the appropriate offset.
from web-audio-api-v2.
But this is resuming/suspending on the context level, wouldn't it be nice if you could suspend/resume on the source node level?
Would there be an observable difference?
AudioBufferSourceNode
class could probably be extended with pause()
and resume()
methods that use AudioContext
suspend()
and resume()
.
from web-audio-api-v2.
@guest271314 I tried your solution but it seems not to be working as expected. https://jsfiddle.net/croraf/m49rwpqn/
(Try in FF which doesn't respect the autoplay policy) The audio element shows "streaming" but there is no sound.
@rtoy Yes, I heard about the playbackRate=0 hack.
But these are all workarounds. I'm wondering why can't AudioBufferSourceNode be just paused and resumed.
from web-audio-api-v2.
AudioWG virtual F2F:
playbackRate.value = 0
works without any downside, this would just be syntactic sugar, that one can add by mangling the prototype if they want- The solution proposed by @rtoy also works
from web-audio-api-v2.
Related Issues (20)
- V2 documentation logistics HOT 2
- interaction between audio elements and the Web Audio API HOT 2
- AudioOutputContext HOT 21
- AnalyserNode: provide access to complex FFT result HOT 15
- AnalyserNode: efficiency improvements to FFT post-processing HOT 3
- Alternatives for module loading of AudioWorklet HOT 5
- Should 'Atomics.wait' be available in AudioWorklets associated with an OfflineAudioContext? HOT 8
- Request to Expose AudioBuffer to DedicatedWorker HOT 29
- Rename master branch to main HOT 2
- Set up to display the spec. HOT 10
- AudioWorklet should have a 'oversample' and a 'bufferSize' property HOT 5
- cancelScheduledValues and cancelAndHoldAtTime throws RangeError for non-finite
- Switching between 2 Microphones HOT 1
- No way to convert data from WebCodecs AudioData to AudioBuffer HOT 7
- Add frequency of one oscillator to be based on another HOT 1
- Define TextEncoderStream(), and TextDecoderStream() in AudioWorkletGlobalScope HOT 1
- Add Travis CI HOT 1
- RawPCMStreamNode (StreamNode, or InputStreamNode) HOT 8
- Set up PR review HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web-audio-api-v2.