Git Product home page Git Product logo

Comments (11)

guest271314 avatar guest271314 commented on July 22, 2024 2

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.

rtoy avatar rtoy commented on July 22, 2024 2

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.

rtoy avatar rtoy commented on July 22, 2024 2

from web-audio-api-v2.

croraf avatar croraf commented on July 22, 2024 1

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.

croraf avatar croraf commented on July 22, 2024 1

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.

guest271314 avatar guest271314 commented on July 22, 2024 1

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.

croraf avatar croraf commented on July 22, 2024 1

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.

rtoy avatar rtoy commented on July 22, 2024 1

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.

guest271314 avatar guest271314 commented on July 22, 2024

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.

croraf avatar croraf commented on July 22, 2024

@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.
image

@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.

padenot avatar padenot commented on July 22, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.