mdn · teoli2003 · Aug 23, 2021 · Aug 23, 2021 · Aug 23, 2021 · Aug 23, 2021
@@ -17,7 +17,7 @@
 <p>The Web Animations API's <code><strong>cancel()</strong></code> method of the {{domxref("Animation")}} interface clears all {{domxref("KeyframeEffect")}}s caused by this animation and aborts its playback.</p>
 
 <div class="note">
-<p>When an animation is cancelled, its {{domxref("Animation.startTime", "startTime")}} and {{domxref("Animation.currentTime", "currentTime")}} are set to <code>null</code>.</p>
+<p><strong>Note:</strong> When an animation is cancelled, its {{domxref("Animation.startTime", "startTime")}} and {{domxref("Animation.currentTime", "currentTime")}} are set to <code>null</code>.</p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>

@@ -17,7 +17,7 @@
 <p>The <code><strong>Animation</strong></code><strong><code>.finished</code></strong> read-only property of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> returns a {{jsxref("Promise")}} which resolves once the animation has finished playing.</p>
 
 <div class="note">
-<p>Every time the animation leaves the <code>finished</code> play state (that is, when it starts playing again), a new <code>Promise</code> is created for this property. The new <code>Promise</code> will resolve once the new animation sequence has completed.</p>
+<p><strong>Note:</strong> Every time the animation leaves the <code>finished</code> play state (that is, when it starts playing again), a new <code>Promise</code> is created for this property. The new <code>Promise</code> will resolve once the new animation sequence has completed.</p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>

@@ -19,7 +19,7 @@
 <p>The <code>cancel</code> event can be triggered manually with {{domxref("Animation.cancel()")}} when the animation enters the <code>"idle"</code> play state from another state, such as when the animation is removed from an element before it finishes playing</p>
 
 <div class="note">
-<p>Creating a new animation that is initially idle does not trigger a {{event("cancel")}} event on the new animation.</p>
+<p><strong>Note:</strong> Creating a new animation that is initially idle does not trigger a {{event("cancel")}} event on the new animation.</p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>

@@ -26,7 +26,7 @@
   animation to finish up.</p>
 
 <div class="note">
-  <p>The <code>"paused"</code> play state supersedes the <code>"finished"</code> play
+  <p><strong>Note:</strong> The <code>"paused"</code> play state supersedes the <code>"finished"</code> play
     state; if the animation is both paused and finished, the <code>"paused"</code> state
     is the one that will be reported. You can force the animation into the
     <code>"finished"</code> state by setting its {{domxref("Animation.startTime",

@@ -30,7 +30,7 @@ <h3 id="Value">Value</h3>
 <p>Takes a number that can be 0, negative, or positive. Negative values reverse the animation. The value is a scaling factor, so for example a value of 2 would double the playback rate.</p>
 
 <div class="note">
-<p>Setting an animation’s <code>playbackRate</code> to <code>0</code> effectively pauses the animation (however, its {{domxref("Animation.playstate", "playstate")}} does not necessarily become <code>paused</code>).</p>
+<p><strong>Note:</strong> Setting an animation’s <code>playbackRate</code> to <code>0</code> effectively pauses the animation (however, its {{domxref("Animation.playstate", "playstate")}} does not necessarily become <code>paused</code>).</p>
 </div>
 
 <h2 id="Examples">Examples</h2>

@@ -16,7 +16,7 @@
 <p>The <code><strong>Animation</strong></code><strong><code>.playState</code></strong> property of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> returns and sets an enumerated value describing the playback state of an animation.</p>
 
 <div class="note">
-<p>This property is read-only for CSS Animations and Transitions.</p>
+<p><strong>Note:</strong> This property is read-only for CSS Animations and Transitions.</p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>

@@ -18,7 +18,7 @@
 <p>The read-only <strong><code>Animation.ready</code></strong> property of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> returns a {{jsxref("Promise")}} which resolves when the animation is ready to play. A new promise is created every time the animation enters the <code>"pending"</code> <a href="/en-US/docs/Web/API/Animation/playState">play state</a> as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again.</p>
 
 <div class="note">
-<p>Since the same {{jsxref("Promise")}} is used for both pending <code>play</code> and pending <code>pause</code> requests, authors are advised to check the state of the animation when the promise is resolved.</p>
+<p><strong>Note:</strong> Since the same {{jsxref("Promise")}} is used for both pending <code>play</code> and pending <code>pause</code> requests, authors are advised to check the state of the animation when the promise is resolved.</p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>

@@ -25,7 +25,7 @@
 </dl>
 
 <div class="note">
-<p>These values are comparable to the computed styles of an Element returned using <code>window.getComputedStyle(elem)</code>.</p>
+<p><strong>Note:</strong> These values are comparable to the computed styles of an Element returned using <code>window.getComputedStyle(elem)</code>.</p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>

@@ -84,7 +84,7 @@ <h2 id="Examples">Examples</h2>
 <p>In this example, we create a two-second buffer, fill it with white noise, and then play it using an <code>AudioBufferSourceNode</code>. The comments should clearly explain what is going on.</p>
 
 <div class="note">
-<p>You can also <a class="external external-icon" href="https://mdn.github.io/webaudio-examples/audio-buffer/">run the code live</a>, or <a class="external external-icon" href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html">view the source</a>.</p>
+<p><strong>Note:</strong> You can also <a class="external external-icon" href="https://mdn.github.io/webaudio-examples/audio-buffer/">run the code live</a>, or <a class="external external-icon" href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html">view the source</a>.</p>
 </div>
 
 <pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@@ -116,7 +116,7 @@ <h2 id="Examples">Examples</h2>
 source.start();</pre>
 
 <div class="note">
-<p>For a <code>decodeAudioData()</code> example, see the {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} page.</p>
+<p><strong>Note:</strong> For a <code>decodeAudioData()</code> example, see the {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} page.</p>
 </div>
 
 <h2 id="Specifications">Specifications</h2>

@@ -49,7 +49,7 @@ <h2 id="Example">Example</h2>
   loops.</p>
 
 <div class="note">
-  <p>You can <a class="external external-icon"
+  <p><strong>Note:</strong> You can <a class="external external-icon"
       href="https://mdn.github.io/webaudio-examples/decode-audio-data/">run the full
       example live</a> (or <a class="external external-icon"
       href="https://github.com/mdn/webaudio-examples/blob/master/decode-audio-data/index.html">view

@@ -55,7 +55,7 @@ <h2 id="Example">Example</h2>
   (or at least until {{domxref("AudioScheduledSourceNode/stop", "stop()")}} is called).</p>
 
 <div class="note">
-  <p>For a full working example, see<a class="external external-icon"
+  <p><strong>Note:</strong> For a full working example, see<a class="external external-icon"
       href="https://mdn.github.io/webaudio-examples/decode-audio-data/"> this code running
       live</a>, or <a class="external external-icon"
       href="https://github.com/mdn/webaudio-examples/tree/master/decode-audio-data">view

@@ -49,7 +49,7 @@ <h2 id="Example">Example</h2>
   25 seconds in to the track.</p>
 
 <div class="note">
-  <p>For a full working example, see <a class="external external-icon"
+  <p><strong>Note:</strong> For a full working example, see <a class="external external-icon"
       href="https://mdn.github.io/webaudio-examples/decode-audio-data/">this code running
       live</a>, or <a class="external external-icon"
       href="https://github.com/mdn/webaudio-examples/tree/master/decode-audio-data">view

@@ -54,7 +54,7 @@ <h2 id="Example">Example</h2>
   the <code>playbackRate</code> property value on the fly.</p>
 
 <div class="note">
-  <p>You can <a class="external external-icon"
+  <p><strong>Note:</strong> You can <a class="external external-icon"
       href="https://mdn.github.io/webaudio-examples/decode-audio-data/">run the example
       live</a> (or <a class="external external-icon"
       href="https://github.com/mdn/webaudio-examples/tree/master/decode-audio-data">view

@@ -80,7 +80,7 @@ <h2 id="Examples">Examples</h2>
 <pre class="brush: js">source.start(audioCtx.currentTime + 1,3,10);</pre>
 
 <div class="note">
-  <p>For a more complete example showing <code>start()</code> in use, check out our {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} example. You can also <a class="external external-icon" href="https://mdn.github.io/webaudio-examples/decode-audio-data/">run the code example live</a>, or <a class="external external-icon" href="https://github.com/mdn/webaudio-examples/tree/master/decode-audio-data">view the source</a>.</p>
+  <p><strong>Note:</strong> For a more complete example showing <code>start()</code> in use, check out our {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} example. You can also <a class="external external-icon" href="https://mdn.github.io/webaudio-examples/decode-audio-data/">run the code example live</a>, or <a class="external external-icon" href="https://github.com/mdn/webaudio-examples/tree/master/decode-audio-data">view the source</a>.</p>
 </div>
 
 <h2 id="Specifications">Specifications</h2>

@@ -20,7 +20,7 @@
 <h2 id="Properties">Properties</h2>
 
 <div class="note">
-<p>The position, forward, and up value are set and retrieved using different syntaxes. Retrieval is done by accessing, for example, <code>AudioListener.positionX</code>, while setting the same property is done with <code>AudioListener.positionX.value</code>. This is why these values are not marked read only, which is how they appear in the specification's IDL.</p>
+<p><strong>Note:</strong> The position, forward, and up value are set and retrieved using different syntaxes. Retrieval is done by accessing, for example, <code>AudioListener.positionX</code>, while setting the same property is done with <code>AudioListener.positionX.value</code>. This is why these values are not marked read only, which is how they appear in the specification's IDL.</p>
 </div>
 
 <dl>

@@ -44,7 +44,7 @@
 </table>
 
 <div class="note">
-<p>In older versions of the spec, the default for a {{domxref("ChannelSplitterNode")}} was max. </p>
+<p><strong>Note:</strong> In older versions of the spec, the default for a {{domxref("ChannelSplitterNode")}} was max. </p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>

@@ -17,7 +17,7 @@
 <p>The <code>AudioScheduledSourceNode</code> interface—part of the Web Audio API—is a parent interface for several types of audio source node interfaces which share the ability to be started and stopped, optionally at specified times. Specifically, this interface defines the {{domxref("AudioScheduledSourceNode.start", "start()")}} and {{domxref("AudioScheduledSourceNode.stop", "stop()")}} methods, as well as the {{domxref("AudioScheduledSourceNode.onended", "onended")}} event handler.</p>
 
 <div class="note">
-<p>You can't create an <code>AudioScheduledSourceNode</code> object directly. Instead, use the interface which extends it, such as {{domxref("AudioBufferSourceNode")}}, {{domxref("OscillatorNode")}}, and {{domxref("ConstantSourceNode")}}.</p>
+<p><strong>Note:</strong> You can't create an <code>AudioScheduledSourceNode</code> object directly. Instead, use the interface which extends it, such as {{domxref("AudioBufferSourceNode")}}, {{domxref("OscillatorNode")}}, and {{domxref("ConstantSourceNode")}}.</p>
 </div>
 
 <p>Unless stated otherwise, nodes based upon <code>AudioScheduledSourceNode</code> output silence when not playing (that is, before <code>start()</code> is called and after <code>stop()</code> is called). Silence is represented, as always, by a stream of samples with the value zero (0).</p>

@@ -25,7 +25,7 @@
   has stopped playing.</p>
 
 <div class="note">
-  <p>The {{event("ended")}} event is only sent to a node configured to loop automatically
+  <p><strong>Note:</strong> The {{event("ended")}} event is only sent to a node configured to loop automatically
     when the node is stopped using its {{domxref("AudioScheduledSourceNode.stop",
     "stop()")}} method. This is the case, for example, when using an
     {{domxref("AudioBufferSourceNode")}} with its {{domxref("AudioBufferSourceNode.loop",

@@ -53,7 +53,7 @@ <h3 id="Parameters">Parameters</h3>
 </dl>
 
 <div class="note">
-	<p>If normalized, the resulting wave will have a maximum absolute peak value of 1.</p>
+	<p><strong>Note:</strong> If normalized, the resulting wave will have a maximum absolute peak value of 1.</p>
 </div>
 
 <h2 id="Example">Example</h2>

@@ -16,7 +16,7 @@
   charged.</p>
 
 <div class="note">
-  <p>Even if the time returned is precise to the second, browsers round them to a higher
+  <p><strong>Note:</strong> Even if the time returned is precise to the second, browsers round them to a higher
     interval (typically to the closest 15 minutes) for privacy reasons.</p>
 </div>
 

@@ -17,7 +17,7 @@
   discharged.</p>
 
 <div class="note">
-  <p>Even if the time returned is precise to the second, browsers round them to a higher
+  <p><strong>Note:</strong> Even if the time returned is precise to the second, browsers round them to a higher
     interval (typically to the closest 15 minutes) for privacy reasons.</p>
 </div>
 

@@ -18,7 +18,7 @@
   {{DOMxRef("DOMString")}} that provides a human-readable name for the device.</p>
 
 <div class="note">
-  <p>This page describes the W3C Community Group BluetoothDevice.name property. For the
+  <p><strong>Note:</strong> This page describes the W3C Community Group BluetoothDevice.name property. For the
     Firefox OS property of the same name, see
     {{DOMxRef("BluetoothDevice_%28Firefox_OS%29/name", "BluetoothDevice.name
     (Firefox OS)")}}.</p>

@@ -18,7 +18,7 @@
   which provides further information about a characteristic’s value.</p>
 
 <div class="note">
-  <p>This page describes the W3C Community Group Web Bluetooth API. For the Firefox OS
+  <p><strong>Note:</strong> This page describes the W3C Community Group Web Bluetooth API. For the Firefox OS
     Bluetooth API, see <a
       href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattDescriptor"><code>BluetoothGattDescriptor</code>
       (Firefox OS)</a>.</p>

@@ -18,7 +18,7 @@
   Server on a remote device.</p>
 
 <div class="note">
-  <p>This page describes the W3C Community Group Web Bluetooth API. For the Firefox OS
+  <p><strong>Note:</strong> This page describes the W3C Community Group Web Bluetooth API. For the Firefox OS
     Bluetooth API, see <a
       href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattServer"><code>BluetoothGattServer</code>
       (Firefox OS)</a>.</p>

@@ -64,7 +64,7 @@ <h2 id="Reference">Reference</h2>
 </div>
 
 <div class="notecard note">
-<p>{{domxref("OffscreenCanvas")}} is also available in web workers.</p>
+<p><strong>Note:</strong> {{domxref("OffscreenCanvas")}} is also available in web workers.</p>
 </div>
 
 <p>{{domxref("CanvasCaptureMediaStreamTrack")}} is a related interface.</p>

@@ -52,7 +52,7 @@ <h3 id="Scheduled_updates">Scheduled updates</h3>
 <p>If you don't want any user interaction you can use the <code>setInterval()</code> function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use <code>setTimeout()</code>. By setting {{domxref("EventListener")}}s, we catch any user interaction and execute our animation functions.</p>
 
 <div class="note">
-<p>In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The <code>requestAnimationFrame</code> method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article <a href="/en-US/docs/Games/Anatomy">Anatomy of a video game</a> in our <a href="/en-US/docs/Games">Game development zone</a>.</p>
+<p><strong>Note:</strong> In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The <code>requestAnimationFrame</code> method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article <a href="/en-US/docs/Games/Anatomy">Anatomy of a video game</a> in our <a href="/en-US/docs/Games">Game development zone</a>.</p>
 </div>
 
 <h2 id="An_animated_solar_system">An animated solar system</h2>

@@ -119,7 +119,7 @@ <h2 id="Drawing_images">Drawing images</h2>
 </dl>
 
 <div class="note">
-<p>SVG images must specify a width and height in the root &lt;svg&gt; element.</p>
+<p><strong>Note:</strong> SVG images must specify a width and height in the root &lt;svg&gt; element.</p>
 </div>
 
 <h3 id="Example_A_simple_line_graph">Example: A simple line graph</h3>

@@ -18,7 +18,7 @@
   (black).</p>
 
 <div class="note">
-  <p>For more examples of fill and stroke styles, see <a
+  <p><strong>Note:</strong> For more examples of fill and stroke styles, see <a
       href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying
       styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas
       tutorial</a>.</p>

@@ -38,7 +38,7 @@
   {{domxref("CanvasRenderingContext2D.direction","direction")}} properties.</p>
 
 <div class="notecard note">
-  <p>To draw the outlines of the characters in a string, call the context's
+  <p><strong>Note:</strong> To draw the outlines of the characters in a string, call the context's
     {{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} method.</p>
 </div>
 

@@ -17,7 +17,7 @@
   to shapes and images before they are drawn onto the canvas.</p>
 
 <div class="note">
-  <p>See also the chapter <a
+  <p><strong>Note:</strong> See also the chapter <a
       href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying
       styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas
       Tutorial</a>.</p>

@@ -15,7 +15,7 @@
   Canvas 2D API sets the miter limit ratio.</p>
 
 <div class="note">
-  <p>For more info about miters, see <a
+  <p><strong>Note:</strong> For more info about miters, see <a
       href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying
       styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas
       tutorial</a>.</p>

@@ -16,7 +16,7 @@
   (outlines) around shapes. The default is <code>#000</code> (black).</p>
 
 <div class="note">
-  <p>For more examples of stroke and fill styles, see <a
+  <p><strong>Note:</strong> For more examples of stroke and fill styles, see <a
       href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying
       styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas
       tutorial</a>.</p>

@@ -31,7 +31,7 @@
   on it.</p>
 
 <div class="notecard note">
-  <p>Use the {{domxref('CanvasRenderingContext2D.fillText()', 'fillText()')}} method to
+  <p><strong>Note:</strong> Use the {{domxref('CanvasRenderingContext2D.fillText()', 'fillText()')}} method to
     fill the text characters rather than having just their outlines drawn.</p>
 </div>