[html5] r5437 - [giow] (0) WebSRT: show how to use addCue() to pause after playing a sound. Also [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Sep 7 18:12:35 PDT 2010
Author: ianh
Date: 2010-09-07 18:12:34 -0700 (Tue, 07 Sep 2010)
New Revision: 5437
Modified:
complete.html
index
source
Log:
[giow] (0) WebSRT: show how to use addCue() to pause after playing a sound. Also, change the addTrack() API to have arguments in a sensible order.
Modified: complete.html
===================================================================
--- complete.html 2010-09-08 00:46:55 UTC (rev 5436)
+++ complete.html 2010-09-08 01:12:34 UTC (rev 5437)
@@ -24294,7 +24294,7 @@
<!--TT-->
// timed tracks
readonly attribute <a href=#timedtrack>TimedTrack</a>[] <a href=#dom-media-tracks title=dom-media-tracks>tracks</a>;
- <a href=#mutabletimedtrack>MutableTimedTrack</a> <a href=#dom-media-addtrack title=dom-media-addTrack>addTrack</a>(in DOMString label, in DOMString kind, in DOMString language);
+ <a href=#mutabletimedtrack>MutableTimedTrack</a> <a href=#dom-media-addtrack title=dom-media-addTrack>addTrack</a>(in DOMString kind, in optional DOMString label, in optional DOMString language);
<!--TT-->
};</pre>
@@ -27621,7 +27621,7 @@
void <a href=#dom-mutabletimedtrack-removecue title=dom-MutableTimedTrack-removeCue>removeCue</a>(in <a href=#timedtrackcue>TimedTrackCue</a> cue);
};</pre>
- <dl class=domintro><dt><var title="">mutableTimedTrack</var> = <var title="">media</var> . <code title=dom-media-addTrack><a href=#dom-media-addtrack>addTrack</a></code>( <var title="">label</var>, <var title="">kind</var>, <var title="">language</var> )</dt>
+ <dl class=domintro><dt><var title="">mutableTimedTrack</var> = <var title="">media</var> . <code title=dom-media-addTrack><a href=#dom-media-addtrack>addTrack</a></code>( <var title="">kind</var> [, <var title="">label</var> [, <var title="">language</var> ] ] )</dt>
<dd>
<p>Creates and returns a new <code><a href=#mutabletimedtrack>MutableTimedTrack</a></code> object, which is also added to the <a href=#media-element>media element</a>'s <a href=#list-of-timed-tracks>list of timed tracks</a>.</p>
</dd>
@@ -27640,7 +27640,7 @@
</dl><div class=impl>
- <p>The <dfn id=dom-media-addtrack title=dom-media-addTrack><code>addTrack(<var title="">label</var>, <var title="">kind</var>, <var title="">language</var>)</code></dfn> method of <a href=#media-element title="media
+ <p>The <dfn id=dom-media-addtrack title=dom-media-addTrack><code>addTrack(<var title="">kind</var>, <var title="">label</var>, <var title="">language</var>)</code></dfn> method of <a href=#media-element title="media
element">media elements</a>, when invoked, must run the following
steps:</p>
@@ -27659,6 +27659,19 @@
<li>
+ <p>If the <var title="">label</var> argument was omitted, let <var title="">label</var> be the empty string.</p>
+
+ </li>
+
+ <li>
+
+ <p>If the <var title="">language</var> argument was omitted, let
+ <var title="">language</var> be the empty string.</p>
+
+ </li>
+
+ <li>
+
<p>Create a new <a href=#timed-track>timed track</a>, and set its <a href=#timed-track-kind>timed
track kind</a> to <var title="">kind</var>, its <a href=#timed-track-label>timed
track label</a> to <var title="">label</var>, its <a href=#timed-track-language>timed
@@ -27730,6 +27743,37 @@
</ol></div>
+ <div class=example>
+
+ <p>In this example, an <code><a href=#audio>audio</a></code> element is used to play a
+ specific sound-effect from a sound file containing many sound
+ effects. A cue is used to pause the audio, so that it ends exactly
+ at the end of the clip, even if the browser is busy running some
+ script. If the page had relied on script to pause the audio, then
+ the start of the next clip might be heard if the browser was not
+ able to run the script at the exact time specified.</p>
+
+ <pre>var sfx = new Audio('sfx.wav');
+var sounds = a.addTrack('metadata');
+// add sounds we care about
+sounds.addCue(new TimedTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
+sounds.addCue(new TimedTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));
+
+function playSound(id) {
+ sfx.currentTime = sounds.getCueById(id).startTime;
+ sfx.play();
+}
+
+sfx.oncanplaythrough = function () {
+ playSound('dog bark');
+}
+window.onbeforeunload = function () {
+ playSound('kitten mew');
+ return 'Are you sure you want to leave this awesome page?';
+}</pre>
+
+ </div>
+
<hr><pre class=idl>interface <dfn id=timedtrackcuelist>TimedTrackCueList</dfn> {
readonly attribute unsigned long <a href=#dom-timedtrackcuelist-length title=dom-TimedTrackCueList-length>length</a>;
getter <a href=#timedtrackcue>TimedTrackCue</a> (in unsigned long index);
Modified: index
===================================================================
--- index 2010-09-08 00:46:55 UTC (rev 5436)
+++ index 2010-09-08 01:12:34 UTC (rev 5437)
@@ -24274,7 +24274,7 @@
<!--TT-->
// timed tracks
readonly attribute <a href=#timedtrack>TimedTrack</a>[] <a href=#dom-media-tracks title=dom-media-tracks>tracks</a>;
- <a href=#mutabletimedtrack>MutableTimedTrack</a> <a href=#dom-media-addtrack title=dom-media-addTrack>addTrack</a>(in DOMString label, in DOMString kind, in DOMString language);
+ <a href=#mutabletimedtrack>MutableTimedTrack</a> <a href=#dom-media-addtrack title=dom-media-addTrack>addTrack</a>(in DOMString kind, in optional DOMString label, in optional DOMString language);
<!--TT-->
};</pre>
@@ -27601,7 +27601,7 @@
void <a href=#dom-mutabletimedtrack-removecue title=dom-MutableTimedTrack-removeCue>removeCue</a>(in <a href=#timedtrackcue>TimedTrackCue</a> cue);
};</pre>
- <dl class=domintro><dt><var title="">mutableTimedTrack</var> = <var title="">media</var> . <code title=dom-media-addTrack><a href=#dom-media-addtrack>addTrack</a></code>( <var title="">label</var>, <var title="">kind</var>, <var title="">language</var> )</dt>
+ <dl class=domintro><dt><var title="">mutableTimedTrack</var> = <var title="">media</var> . <code title=dom-media-addTrack><a href=#dom-media-addtrack>addTrack</a></code>( <var title="">kind</var> [, <var title="">label</var> [, <var title="">language</var> ] ] )</dt>
<dd>
<p>Creates and returns a new <code><a href=#mutabletimedtrack>MutableTimedTrack</a></code> object, which is also added to the <a href=#media-element>media element</a>'s <a href=#list-of-timed-tracks>list of timed tracks</a>.</p>
</dd>
@@ -27620,7 +27620,7 @@
</dl><div class=impl>
- <p>The <dfn id=dom-media-addtrack title=dom-media-addTrack><code>addTrack(<var title="">label</var>, <var title="">kind</var>, <var title="">language</var>)</code></dfn> method of <a href=#media-element title="media
+ <p>The <dfn id=dom-media-addtrack title=dom-media-addTrack><code>addTrack(<var title="">kind</var>, <var title="">label</var>, <var title="">language</var>)</code></dfn> method of <a href=#media-element title="media
element">media elements</a>, when invoked, must run the following
steps:</p>
@@ -27639,6 +27639,19 @@
<li>
+ <p>If the <var title="">label</var> argument was omitted, let <var title="">label</var> be the empty string.</p>
+
+ </li>
+
+ <li>
+
+ <p>If the <var title="">language</var> argument was omitted, let
+ <var title="">language</var> be the empty string.</p>
+
+ </li>
+
+ <li>
+
<p>Create a new <a href=#timed-track>timed track</a>, and set its <a href=#timed-track-kind>timed
track kind</a> to <var title="">kind</var>, its <a href=#timed-track-label>timed
track label</a> to <var title="">label</var>, its <a href=#timed-track-language>timed
@@ -27710,6 +27723,37 @@
</ol></div>
+ <div class=example>
+
+ <p>In this example, an <code><a href=#audio>audio</a></code> element is used to play a
+ specific sound-effect from a sound file containing many sound
+ effects. A cue is used to pause the audio, so that it ends exactly
+ at the end of the clip, even if the browser is busy running some
+ script. If the page had relied on script to pause the audio, then
+ the start of the next clip might be heard if the browser was not
+ able to run the script at the exact time specified.</p>
+
+ <pre>var sfx = new Audio('sfx.wav');
+var sounds = a.addTrack('metadata');
+// add sounds we care about
+sounds.addCue(new TimedTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
+sounds.addCue(new TimedTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));
+
+function playSound(id) {
+ sfx.currentTime = sounds.getCueById(id).startTime;
+ sfx.play();
+}
+
+sfx.oncanplaythrough = function () {
+ playSound('dog bark');
+}
+window.onbeforeunload = function () {
+ playSound('kitten mew');
+ return 'Are you sure you want to leave this awesome page?';
+}</pre>
+
+ </div>
+
<hr><pre class=idl>interface <dfn id=timedtrackcuelist>TimedTrackCueList</dfn> {
readonly attribute unsigned long <a href=#dom-timedtrackcuelist-length title=dom-TimedTrackCueList-length>length</a>;
getter <a href=#timedtrackcue>TimedTrackCue</a> (in unsigned long index);
Modified: source
===================================================================
--- source 2010-09-08 00:46:55 UTC (rev 5436)
+++ source 2010-09-08 01:12:34 UTC (rev 5437)
@@ -26095,7 +26095,7 @@
<!--END w3c-html--><!--TT-->
// timed tracks
readonly attribute <span>TimedTrack</span>[] <span title="dom-media-tracks">tracks</span>;
- <span>MutableTimedTrack</span> <span title="dom-media-addTrack">addTrack</span>(in DOMString label, in DOMString kind, in DOMString language);
+ <span>MutableTimedTrack</span> <span title="dom-media-addTrack">addTrack</span>(in DOMString kind, in optional DOMString label, in optional DOMString language);
<!--START w3c-html--><!--TT-->
};</pre>
@@ -30011,7 +30011,7 @@
<dl class="domintro">
- <dt><var title="">mutableTimedTrack</var> = <var title="">media</var> . <code title="dom-media-addTrack">addTrack</code>( <var title="">label</var>, <var title="">kind</var>, <var title="">language</var> )</dt>
+ <dt><var title="">mutableTimedTrack</var> = <var title="">media</var> . <code title="dom-media-addTrack">addTrack</code>( <var title="">kind</var> [, <var title="">label</var> [, <var title="">language</var> ] ] )</dt>
<dd>
<p>Creates and returns a new <code>MutableTimedTrack</code> object, which is also added to the <span>media element</span>'s <span>list of timed tracks</span>.</p>
</dd>
@@ -30033,7 +30033,7 @@
<div class="impl">
<p>The <dfn title="dom-media-addTrack"><code>addTrack(<var
- title="">label</var>, <var title="">kind</var>, <var
+ title="">kind</var>, <var title="">label</var>, <var
title="">language</var>)</code></dfn> method of <span title="media
element">media elements</span>, when invoked, must run the following
steps:</p>
@@ -30058,6 +30058,20 @@
<li>
+ <p>If the <var title="">label</var> argument was omitted, let <var
+ title="">label</var> be the empty string.</p>
+
+ </li>
+
+ <li>
+
+ <p>If the <var title="">language</var> argument was omitted, let
+ <var title="">language</var> be the empty string.</p>
+
+ </li>
+
+ <li>
+
<p>Create a new <span>timed track</span>, and set its <span>timed
track kind</span> to <var title="">kind</var>, its <span>timed
track label</span> to <var title="">label</var>, its <span>timed
@@ -30142,6 +30156,37 @@
</div>
+ <div class="example">
+
+ <p>In this example, an <code>audio</code> element is used to play a
+ specific sound-effect from a sound file containing many sound
+ effects. A cue is used to pause the audio, so that it ends exactly
+ at the end of the clip, even if the browser is busy running some
+ script. If the page had relied on script to pause the audio, then
+ the start of the next clip might be heard if the browser was not
+ able to run the script at the exact time specified.</p>
+
+ <pre>var sfx = new Audio('sfx.wav');
+var sounds = a.addTrack('metadata');
+// add sounds we care about
+sounds.addCue(new TimedTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
+sounds.addCue(new TimedTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));
+
+function playSound(id) {
+ sfx.currentTime = sounds.getCueById(id).startTime;
+ sfx.play();
+}
+
+sfx.oncanplaythrough = function () {
+ playSound('dog bark');
+}
+window.onbeforeunload = function () {
+ playSound('kitten mew');
+ return 'Are you sure you want to leave this awesome page?';
+}</pre>
+
+ </div>
+
<hr>
<pre class="idl">interface <dfn>TimedTrackCueList</dfn> {
More information about the Commit-Watchers
mailing list