I have started to learn about OscillatorNode, and find out that it is difficult to understand how the frequency and type of Oscillator affects a sound wave.

Is it a good idea to add visualization for OscillatorNode documentation? It will help to better understand how OscillatorNode works.

Example of visualization — https://codepen.io/VoloshchenkoAl/pen/gOwdpKx

Due to content security policy issues, the example is not able to load viper.ogg.

https://github.com/mdn/webaudio-examples/tree/master/decode-audio-data

What information was incorrect, unhelpful, or incomplete?

TLDR: Noise Dur slider positions left of the midpoint break the step sequencer app

Noise Dur slider positions left of the midpoint cause the noiseBuffer AudioBuffer to be initialized with a length of 0 resulting in the following error:

Uncaught DOMException: Failed to construct 'AudioBuffer': The number of frames provided (0) is less than or equal to the minimum bound (0).

What did you expect to see?

Non-breaking functionality of the Noise Dur slider in the Step Sequencer

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

There are some empty HTML comments in step-sequencer/index.html.

I created pull request #48 to remove them. This ticket is to track this issue.

In the demo, an ogg format file is used in the decodeAudioData interface. I try aac and aacplus audio data, but the demo do not work and the chrome ouputs error like "Unable to decode audio data".

Hello,

I have the following question. For example, when I call the "Voice-change-O-matic" demo with an IPhone, the output is routed only to the phone speaker. But I would like to have the output to the "normal" speaker. The problem seems to occur only when the microphone is also enabled in the application. Is there a solution for this?

Thanks

Greetings Henri

I realized that the headers I added for the directory descriptions in #38 are not consistent.

(e.g. the header for the "audio-basics" directory is "Audio Basics" and the header for the "decode-audio-data" is "decodeAudioData"). I did this because some directory names are associated with a specific method, whereas others are more of a description.

For consistency purposes, I think it makes sense for all headers to be capital letters separated by spaces. If there is a method name associated with the directory, then it will appear in the description.

Thoughts on this, @chrisdavidmills?

What information was incorrect, unhelpful, or incomplete?

The two sliders to set the envelope of the "Sweep" sound are not working as expected.

What did you expect to see?

There are actually 2 issues:

1. For both inputs, the values are not updated properly. The input should update the value progressively with a 0.1 step, but it only updates to 0 or 1. The problem comes from that the value is cast into an int in the event listener callback.

const attackControl = document.querySelector("#attack");
    attackControl.addEventListener(
        "input",
        (ev) => {
             attackTime = parseInt(ev.target.value, 10);
        },
        false
);

Since their value are between 0 and 1 with a step of 0.1, the usage of "parseInt" is inadecuate.

<section class="controls">
  <label for="attack">Att</label>
  <input
    name="attack"
    id="attack"
    type="range"
    min="0"
    max="1"
    value="0.2"
    step="0.1"
  />
  <label for="release">Rel</label>
  <input
    name="release"
    id="release"
    type="range"
    min="0"
    max="1"
    value="0.5"
    step="0.1"
  />
</section>

2. The way the release input works is not correct. When the slider is set to left, the release should be 0, whereas when it's set to the right, we should be able to hear the release.
   Your can try for yourself here:
   If you set the values like this you hear a sound that is plucked:

When you set it like this you hear a longer release:

It should be the other way around

The problem comes from the implementation of the envelope:

sweepEnv.gain.linearRampToValueAtTime(
  0,
  time + attackTime - releaseTime // here it shouldn't be a "-" operator
);

I'm currently going through the Web API guide where this step sequencer is used: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques

Since I identified the what causes the issue in the code I'd be happy to work on a fix + updating the doc.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

There is an error in the demo of AnalyserNode (https://mdn.github.io/webaudio-examples/audio-analyser/). The played song located in https://mdn.github.io/audio-analyser/viper.ogg does not exist anymore.

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createBuffer

What specific section or headline is this issue about?

white noise live demo throws error in Chrome

What information was incorrect, unhelpful, or incomplete?

The white noise demo at https://mdn.github.io/webaudio-examples/audio-buffer/ produces an error: on the js console

Uncaught TypeError: Failed to construct 'AudioBuffer': Failed to read the 'length' property from 'AudioBufferOptions': Required member is undefined.
    at button.onclick ((index):35:22)

as a result, it plays no noise :(

What did you expect to see?

no error, white noise played

Do you have any supporting links, references, or citations?

Chrome: Version 105.0.5195.52 (Official Build) beta (64-bit)
Windows 11 build : 22000.856

Do you have anything more you want to share?

No response

MDN metadata

The Multi track example looks like it has potential for some mixing board features to be added. I'm looking for an example to contribute to, so I would be happy to add some functionality here if it would be helpful.

Some possible additions for the individual tracks:

1. Volume faders
2. Solo buttons
3. Bypass buttons

The mobile-responsiveness aspect makes it somewhat tricky to fit everything though:

Perhaps it's best to keep it simple and start with just the volume faders and then add new issues for the additional features once this is complete? I can refer to the Boombox example for how to implement the faders using the same styling, functionality and responsiveness settings.

I think it makes sense to shrink the text and/or play button on page resize so the faders will all fit (mostly needed for the 'Lead Guitar' and 'Bass Guitar' tracks).

Wondering if you might add a simple example of drawing waveforms of decoded audio, as opposed to the meter in https://mdn.github.io/webaudio-examples/audio-analyser/ ?

Cheers

Live example: https://mdn.github.io/webaudio-examples/media-source-buffer/

I found this example from the docs here: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource

With Safari (Version 15.2 build 17612.3.6.1.6), this example using createMediaElementSource() doesn't output any audio. It works fine in Chrome (96.0.4664.110) and Firefox (95.0.2).

Hey there.
Thanks for all the nice examples.

Could you add an example for an <audio> element, how to unregister all the webaudio nodes, to get back to a normal audio element? Like to be able to register all that stuff again?

I've noticed problem here: https://mdn.github.io/webaudio-examples/audio-buffer/

When I click button, nothing happens (using Chrome). I see error message:
The AudioContext was not allowed to start. It must be resume (or created) after a user gesture on the page. https://goo.gl/7K7WLu.

I think, the click handler should start with audioCtx.resume() at

Is there somewhere an explanation how to add new filters?

Something like a female to male or robotic voice filter or so?

Thanks :)

The "multi-track", "output-timestamp", and "spacialization" directories are missing from the README.md. I would like to write descriptions for these directories.

Using an iPhone 14 Pro
iOS version: 16.1.2

I've attached a screenshot from the console output from the iPhone.

I'm also attaching a screen recording to show what I did

What information was incorrect, unhelpful, or incomplete?

The audio-basics example does not work . Uncaught (in promise) DOMException: The element has no supported sources. line 101 in index.html in audio-basics.

What did you expect to see?

I was expecting the example to work.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

example of the example of basics stops at line 109: audioElement.play();
Web Tools of Chrome states: the element has no supported sources.
Something "basic" is missing. What could it be?

What information was incorrect, unhelpful, or incomplete?

This input doesn't behave as it should:

What did you expect to see?

When setting the slider like this, we don't hear anything anymore (here):

The problem comes from that the value is cast into an int in the event listener callback (also happens in #117).

rateControl.addEventListener(
  "input",
  (ev) => {
    playbackRate = parseInt(ev.target.value, 10);
  },
  false
);

It was written to have a 0.1 step:

<section class="controls">
  <label for="rate">Rate</label>
  <input
    name="rate"
    id="rate"
    type="range"
    min="0.1"
    max="2"
    value="1"
    step="0.1"
  />
</section>

Since I identified what causes the issue in the code I'd be happy to work on a fix + updating the doc.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

in README.md it's suggested to run the samples with

python3 -m http.server

However this server returns the text/html MIME type for .js and .css files. Therefore, on Chrome the audioworklet sample does not work.

I now use this Python script, providing the correct MIME type for javascript and css files.

try:
    from http import server # Python 3
except ImportError:
    import SimpleHTTPServer as server # Python 2

if __name__ == '__main__':
    server.SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
    server.SimpleHTTPRequestHandler.extensions_map['.css'] = 'text/css'
    server.test(port=8114, HandlerClass=server.SimpleHTTPRequestHandler, protocol="HTTP/1.1")

I wanted to try out this cool demo:
https://mdn.github.io/webaudio-examples/compressor-example/

But, alas:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please see Mozilla-GitHub-Standards or email [email protected].

(Message COC001)

media-source-buffer stays silent on Safari, unless this line is added (and the permission to use microphone is granted):

navigator.mediaDevices.getUserMedia({ audio: true, video: false });

I could not figure out whether this is a bug on Safari, or is it an undocumented behavior.

I changed AudioBufferSourceNode.playbackRate using the code here https://github.com/mdn/webaudio-examples/blob/master/offline-audio-context-promise/index.html but found out that the pitch was not preserved.
I looked up the documentation and found out that there is no pitch correction when using AudioBufferSourceNode.playbackRate.

If we change an audio's playbackRate using HTML audio element, the pitch would be preserved. Is there a way that I can obtain the same effect?

https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode

audioCtx.decodeAudioData(audioData, function(buffer) {
      myBuffer = buffer;
      source.buffer = myBuffer;
      source.connect(offlineCtx.destination);
      source.playbackRate = 1.5; // <<<<<<<<< added this to change playbackRate
      source.start();
      //source.loop = true;
      offlineCtx.startRendering().then(function(renderedBuffer) {
        console.log('Rendering completed successfully');
        
        let song = audioCtx.createBufferSource();
        song.buffer = renderedBuffer;

        song.connect(audioCtx.destination);

        play.onclick = function() {
          song.start();
        }
      }).catch(function(err) {
          console.log('Rendering failed: ' + err);
          // Note: The promise should reject when startRendering is called a second time on an OfflineAudioContext
      });
    });

-> https://mdn.github.io/webaudio-examples/decode-audio-data/

does not work on safari (Version 11.0.2 (11604.4.7.1.6) on OSX 10.11.6)

Steps to reproduce

• open https://mdn.github.io/webaudio-examples/decode-audio-data/ on safari
• push "play" button
• nothing happens
• open debugger (ALT-CMD-I)
• you see the point of failure

  request.onload = function() {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function(buffer) {
        myBuffer = buffer;
        songLength = buffer.duration;
        source.buffer = myBuffer;
        source.playbackRate.value = playbackControl.value;
        source.connect(audioCtx.destination);
        //source.loop = true;

        loopstartControl.setAttribute('max', Math.floor(songLength));
        loopendControl.setAttribute('max', Math.floor(songLength));
      },

      function(e){"Error with decoding audio data" + e.err});   //<-- null is not an object

  }

In fact the error callback gets a null parameter.

pushing the play button results in:

index.html:81 Uncaught (in promise) DOMException: The element has no supported sources.

here:

audioElement.play();

Most of the directory descriptions reference at least one method or object from the Web Audio API (e.g. AudioParam, createDynamicsCompressor(), or MediaRecorder). I'd be happy to hyperlink all methods and objects to their respective URLs in the MDN Web Audio API docs. Some are already hyperlinked.