Skip to content

Commit

Permalink
[giow] (0) WebSRT: show how to use addCue() to pause after playing a …
Browse files Browse the repository at this point in the history 
…sound. Also, change the addTrack() API to have arguments in a sensible order.

git-svn-id: http://svn.whatwg.org/webapps@5437 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Sep 8, 2010
1 parent 723e4f3 commit a38b635
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 9 deletions.
50 changes: 47 additions & 3 deletions complete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24294,7 +24294,7 @@ <h4 id=media-elements><span class=secno>4.8.10 </span>Media elements</h4>
<!--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>

Expand Down Expand Up @@ -27621,7 +27621,7 @@ <h6 id=timed-track-api><span class=secno>4.8.10.10.5 </span>Timed track API</h6>
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>
Expand All @@ -27640,7 +27640,7 @@ <h6 id=timed-track-api><span class=secno>4.8.10.10.5 </span>Timed track API</h6>

</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>

Expand All @@ -27657,6 +27657,19 @@ <h6 id=timed-track-api><span class=secno>4.8.10.10.5 </span>Timed track API</h6>
<li><code title=dom-TimedTrack-kind-metadata><a href=#dom-timedtrack-kind-metadata>metadata</a></code>
</ul></li>

<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
Expand Down Expand Up @@ -27730,6 +27743,37 @@ <h6 id=timed-track-api><span class=secno>4.8.10.10.5 </span>Timed track API</h6>

</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);
Expand Down
50 changes: 47 additions & 3 deletions index
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24274,7 +24274,7 @@ interface <dfn id=htmlaudioelement>HTMLAudioElement</dfn> : <a href=#htmlmediael
<!--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>

Expand Down Expand Up @@ -27601,7 +27601,7 @@ interface <dfn id=htmlaudioelement>HTMLAudioElement</dfn> : <a href=#htmlmediael
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>
Expand All @@ -27620,7 +27620,7 @@ interface <dfn id=htmlaudioelement>HTMLAudioElement</dfn> : <a href=#htmlmediael

</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>

Expand All @@ -27637,6 +27637,19 @@ interface <dfn id=htmlaudioelement>HTMLAudioElement</dfn> : <a href=#htmlmediael
<li><code title=dom-TimedTrack-kind-metadata><a href=#dom-timedtrack-kind-metadata>metadata</a></code>
</ul></li>

<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
Expand Down Expand Up @@ -27710,6 +27723,37 @@ interface <dfn id=htmlaudioelement>HTMLAudioElement</dfn> : <a href=#htmlmediael

</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);
Expand Down
51 changes: 48 additions & 3 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26095,7 +26095,7 @@ interface <dfn>HTMLAudioElement</dfn> : <span>HTMLMediaElement</span> {};</pre>
<!--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>

Expand Down Expand Up @@ -30011,7 +30011,7 @@ interface <dfn>HTMLAudioElement</dfn> : <span>HTMLMediaElement</span> {};</pre>

<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>
Expand All @@ -30033,7 +30033,7 @@ interface <dfn>HTMLAudioElement</dfn> : <span>HTMLMediaElement</span> {};</pre>
<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>
Expand All @@ -30056,6 +30056,20 @@ interface <dfn>HTMLAudioElement</dfn> : <span>HTMLMediaElement</span> {};</pre>

</li>

<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
Expand Down Expand Up @@ -30142,6 +30156,37 @@ interface <dfn>HTMLAudioElement</dfn> : <span>HTMLMediaElement</span> {};</pre>

</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> {
Expand Down

0 comments on commit a38b635

Please sign in to comment.