mdn · sideshowbarker · Mar 9, 2021 · Mar 9, 2021
@@ -13,7 +13,7 @@
 
 <p><span class="seoSummary">The <strong><code>DelayNode</code></strong> interface represents a <a href="https://en.wikipedia.org/wiki/Digital_delay_line" title="Wikipedia: Digital delay line">delay-line</a>; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.</span> A <code>DelayNode</code> always has exactly one input and one output, both with the same amount of channels.</p>
 
-<p><img alt="The DelayNode acts as a delay-line, here with a value of 1s." src="https://mdn.mozillademos.org/files/9711/WebAudioDelayNode.png" style="height: 116px; width: 774px;"></p>
+<p><img alt="The DelayNode acts as a delay-line, here with a value of 1s." src="webaudiodelaynode.png"></p>
 
 <p>When creating a graph that has a cycle, it is mandatory to have at least one <code>DelayNode</code> in the cycle, or the nodes taking part in the cycle will be muted.</p>
 
@@ -90,5 +90,5 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
-	<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+	<li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
 </ul>
@@ -51,7 +51,7 @@ <h2 id="Examples">Examples</h2>
 
 <p>Because of the event handler we set up inside the <code>ReportingObserver()</code> constructor, we can now click the button to display the report details.</p>
 
-<p><img alt="image of a jolly bearded man with various stats displayed below it about a deprecated feature" src="https://mdn.mozillademos.org/files/16561/reporting_api_example.png" style="border-style: solid; border-width: 1px; display: block; height: 476px; margin: 0px auto; width: 902px;"></p>
+<p><img alt="image of a jolly bearded man with various stats displayed below it about a deprecated feature" src="reporting_api_example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
 <p>The report details are displayed via the <code>displayReports()</code> fuction, which takes the observer callback's <code>reports</code> parameter as its parameter:</p>
 

@@ -13,11 +13,11 @@
 <p>{{ APIRef("Web Audio API") }}</p>
 
 <div>
-<p>The <code>knee</code> property of the {{ domxref("DynamicsCompressorNode") }} interface is a <a href="/en-US/docs/DOM/AudioParam#k-rate">k-rate</a> {{domxref("AudioParam")}} containing a decibel value representing the range above the threshold where the curve smoothly transitions to the compressed portion.</p>
+<p>The <code>knee</code> property of the {{ domxref("DynamicsCompressorNode") }} interface is a <a href="/en-US/docs/Web/API/AudioParam#k-rate">k-rate</a> {{domxref("AudioParam")}} containing a decibel value representing the range above the threshold where the curve smoothly transitions to the compressed portion.</p>
 
 <p>The <code>knee</code> property's default value is <code>30</code> and it can be set between <code>0</code> and <code>40</code>.</p>
 
-<p><img alt="Describes the effect of a knee, showing two curves one for a hard knee, the other for a soft knee." src="https://mdn.mozillademos.org/files/5113/WebAudioKnee.png" style="height: 244px; width: 257px;"></p>
+<p><img alt="Describes the effect of a knee, showing two curves one for a hard knee, the other for a soft knee." src="webaudioknee.png"></p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>
@@ -63,5 +63,5 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
 </ul>
@@ -12,11 +12,11 @@
 <p>{{ APIRef("Web Audio API") }}</p>
 
 <div>
-<p>The <code>ratio</code> property of the {{ domxref("DynamicsCompressorNode") }} interface Is a <a href="/en-US/docs/DOM/AudioParam#k-rate">k-rate</a> {{domxref("AudioParam")}} representing the amount of change, in dB, needed in the input for a 1 dB change in the output.</p>
+<p>The <code>ratio</code> property of the {{ domxref("DynamicsCompressorNode") }} interface Is a <a href="/en-US/docs/Web/API/AudioParam#k-rate">k-rate</a> {{domxref("AudioParam")}} representing the amount of change, in dB, needed in the input for a 1 dB change in the output.</p>
 
 <p>The <code>ratio</code> property's default value is <code>12</code> and it can be set between <code>1</code> and <code>20</code>.</p>
 
-<p><img alt="Describes the effect of different ratio on the output signal" src="https://mdn.mozillademos.org/files/5115/WebAudioRatio.png"></p>
+<p><img alt="Describes the effect of different ratio on the output signal" src="webaudioratio.png"></p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>
@@ -62,5 +62,5 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
 </ul>
@@ -54,7 +54,7 @@ <h3 id="Writing_system_keys">Writing system keys</h3>
 
 <p>“Writing system keys” are defined in the <a href="https://w3c.github.io/uievents-code/#key-alphanumeric-writing-system">Writing System Keys</a> section of the <a href="https://w3c.github.io/uievents-code/">UI Events KeyboardEvent code Values</a> spec as the physical keys that change meaning based on the current locale and keyboard layout. These keys are shown below. Blue keys are present on all standard keyboards while green keys are only available on some keyboards.</p>
 
-<p><img alt="Writing system keys as defined by the UI Events KeyboardEvent code Values spec." src="https://mdn.mozillademos.org/files/16174/writing-system-keys.png" style="height: 938px; width: 2719px;"></p>
+<p><img alt="Writing system keys as defined by the UI Events KeyboardEvent code Values spec." src="writing-system-keys.png"></p>
 
 <h2 id="Interfaces">Interfaces</h2>
 

@@ -120,7 +120,7 @@ <h2 id="Examples">Examples</h2>
 
 <p>This causes a deprecation report to be generated; because of the event handler we set up inside the <code>ReportingObserver()</code> constructor, we can now click the button to display the report details.</p>
 
-<p><img alt="image of a jolly bearded man with various stats displayed below it about a deprecated feature" src="https://mdn.mozillademos.org/files/16561/reporting_api_example.png" style="border-style: solid; border-width: 1px; display: block; height: 476px; margin: 0px auto; width: 902px;"></p>
+<p><img alt="image of a jolly bearded man with various stats displayed below it about a deprecated feature" src="reporting_api_example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
 <div class="notecard note">
 <p><strong>Note</strong>: If you look at the <a href="https://github.com/mdn/dom-examples/blob/master/reporting-api/deprecation_report.html">complete source code</a>, you'll notice that we actually call the deprecated <code>getUserMedia()</code> method twice. After the first time we call {{domxref("ReportingObserver.takeRecords()")}}, which returns the first generated report and empties the queue. Because of this, when the button is pressed only the second report is listed.</p>

@@ -17,7 +17,7 @@
 
 <p>The {{domxref("StereoPannerNode.pan", "pan")}} property takes a unitless value between <code>-1</code> (full left pan) and <code>1</code> (full right pan). This interface was introduced as a much simpler way to apply a simple panning effect than having to use a full {{domxref("PannerNode")}}.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/10105/StereoPannerNode.png" style="display: block; height: 89px; margin: 0px auto; width: 687px;"></p>
+<p><img alt="" src="stereopannernode.png" style="display: block; margin: 0px auto;"></p>
 
 <table class="properties">
  <tbody>
@@ -92,5 +92,5 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
 </ul>
@@ -25,7 +25,7 @@ <h2 id="The_technique">The technique</h2>
 
 <p>The diagram below shows how this works; an input value, <code>N</code>, is set as the value of the {{domxref("ConstantSourceNode.offset")}} property. The <code>ConstantSourceNode</code> can have as many outputs as necessary; in this case, we've connected it to three nodes: two {{domxref("GainNode")}}s and a {{domxref("StereoPannerNode")}}. So <code>N</code> becomes the value of the specified parameter ({{domxref("GainNode.gain", "gain")}} for the {{domxref("GainNode")}}s and pan for the {{domxref("StereoPannerNode")}}.</p>
 
-<p><img alt="Dagram in SVG showing how ConstantSourceNode can be used to split an input parameter to share it with multiple nodes." src="https://mdn.mozillademos.org/files/14627/CustomSourceNode-as-Splitter.svg" style="height: 394px; width: 660px;"></p>
+<p><img alt="Dagram in SVG showing how ConstantSourceNode can be used to split an input parameter to share it with multiple nodes." src="customsourcenode-as-splitter.svg"></p>
 
 <p>As a result, every time you change <code>N</code> (the value of the input {{domxref("AudioParam")}}, the values of the two <code>GainNode</code>s' <code>gain</code> properties and the value of the <code>StereoPannerNode</code>'s <code>pan</code> propertry are all set to <code>N</code> as well.</p>
 
@@ -182,9 +182,9 @@ <h4 id="Setting_up">Setting up</h4>
 
 <p>Next, the {{domxref("GainNode")}} <code>gainNode1</code> is created to handle the volume for the non-linked oscillator (<code>oscNode1</code>). We set that gain to 0.5. We also create <code>gainNode2</code> and <code>gainNode3</code>, setting their values to match <code>gainNode1</code>, then set the value of the volume slider to the same value, so it is synchronized with the gain level it controls.</p>
 
-<p>Once all the gain nodes are created, we create the {{domxref("ConstantSourceNode")}}, <code>constantNode</code>. We connect its output to the <code>gain</code> {{domxref("AudioParam")}} on both <code>gainNode2</code> and <code>gainNode3</code>, and we start the constant node running by calling its {{domxref("ConstantSourceNode.start", "start()")}} method; now it's sending the value 0.5 to the two gain nodes' values, and any change to {{domxref("ConstantSourceNode.offset", "constantNode.offset")}} will automatically set the gain of both <code>gainNode2</code> and <code>gainNode3</code> (affecting their audio inputs as expected).</p>
+<p>Once all the gain nodes are created, we create the {{domxref("ConstantSourceNode")}}, <code>constantNode</code>. We connect its output to the <code>gain</code> {{domxref("AudioParam")}} on both <code>gainNode2</code> and <code>gainNode3</code>, and we start the constant node running by calling its {{domxref("AudioScheduledSourceNode/start", "start()")}} method; now it's sending the value 0.5 to the two gain nodes' values, and any change to {{domxref("ConstantSourceNode.offset", "constantNode.offset")}} will automatically set the gain of both <code>gainNode2</code> and <code>gainNode3</code> (affecting their audio inputs as expected).</p>
 
-<p>Finally, we connect all the gain nodes to the {{domxref("AudioContext")}}'s {{domxref("AudioContext.destination", "destination")}}, so that any sound delivered to the gain nodes will reach the output, whether that output be speakers, headphones, a recording stream, or any other destination type.</p>
+<p>Finally, we connect all the gain nodes to the {{domxref("AudioContext")}}'s {{domxref("BaseAudioContext/destination", "destination")}}, so that any sound delivered to the gain nodes will reach the output, whether that output be speakers, headphones, a recording stream, or any other destination type.</p>
 
 <p>After setting the window's {{event("load")}} event handler to be the <code>setup()</code> function, the stage is set. Let's see how the action plays out.</p>
 
@@ -248,7 +248,7 @@ <h4 id="Starting_the_oscillators">Starting the oscillators</h4>
 <p>Each of the three oscillators is set up the same way:</p>
 
 <ol>
- <li>Create the {{domxref("OscillatorNode")}} by calling {{domxref("AudioContext.createOscillator()")}}.</li>
+ <li>Create the {{domxref("OscillatorNode")}} by calling {{domxref("BaseAudioContext.createOscillator")}}.</li>
  <li>Set the oscillator's type to <code>"sine"</code> to use a sine wave as the audio waveform.</li>
  <li>Set the oscillator's frequency to the desired value; in this case, <code>oscNode1</code> is set to a middle C, while <code>oscNode2</code> and <code>oscNode3</code> round out the chord by playing the E and G notes.</li>
  <li>Connect the new oscillator to the corresponding gain node.</li>

@@ -17,7 +17,7 @@ <h2 id="Demo">Demo</h2>
 
 <p>Our simple example for this guide provides a play/pause button that starts and pauses audio play, and a toggle that turns an IIR filter on and off, altering the tone of the sound. It also provides a canvas on which is drawn the frequency response of the audio, so you can see what effect the IIR filter has.</p>
 
-<p><img alt="A demo featuring a play button, and toggle to turn a filter on and off, and a line graph showing the filter frequencies returned after the filter has been applied." src="https://mdn.mozillademos.org/files/16207/iir-filter-demo.png" style="border-style: solid; border-width: 1px; display: block; height: 401px; margin: 0 auto; width: 400px;"></p>
+<p><img alt="A demo featuring a play button, and toggle to turn a filter on and off, and a line graph showing the filter frequencies returned after the filter has been applied." src="iir-filter-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0 auto;"></p>
 
 <p>You can check out the <a href="https://codepen.io/Rumyra/pen/oPxvYB/">full demo here on Codepen</a>. Also see the <a href="https://github.com/mdn/webaudio-examples/tree/master/iirfilter-node">source code on GitHub</a>. It includes some different coefficient values for different lowpass frequencies — you can change the value of the <code>filterNumber</code> constant to a value between 0 and 3 to check out the different available effects.</p>