Here is a SMIL Timing adaptation of this HTML5/Audio demo (proposed
by Samuel Goldszmidt, IRCAM) — but the HTML information is
synchronized with the audio track, which is precisely the goal of
our project.
While the three other instruments hold a cluster of high notes, the
cellist’s silent gestures interact with them, provoking a windy sonority
that becomes noisier as the cellist’s gestures become more energetic.
A short interlude employing conventional playing techniques (bows are
applied on the strings in the usual way, though sounds are still high
and dissonant).
A rich mixture of tremolos and glissandos at various speeds in the highest
register. Each part of the quartet descends progressively into the medium
register: a sound colour with greater solidity emerges.
The first violin plays high notes once again, this time “flautando” i.e. with a flute-like tone (by lightly
bowing across the end of the fingerboard). The other instruments
follow suit until a disparate mix of “flautando” and
“sul ponticello” is established and enriched by
granular synthesis from the electronics.
Louder notes and groups of notes irregularly irrupt, often using a
“gettato” bow stroke: the player lets the bow freely
rebound against the string-once or several times in a row like a ping
pong ball.
From this point onward all the preceding techniques are increasingly
varied and combined. Identifying them becomes more challenging. Good
luck!
The four buttons above allow to quickly jump to the different musical
sections. No specific JavaScript code is used for these navigation
buttons: again, this is pure SMIL Timing.
The markup is very similar to the one we’ve used for the previous example:
<divid="media" smil:timeContainer="excl" smil:mediaSync="audio"
smil:first = "firstSection.click"
smil:prev = "prevSection.click"
smil:next = "nextSection.click"
smil:last = "lastSection.click">
<divid="section1" smil:begin="0:00">
<imgalt="treble clef" style="float: left;" src="images/music-trebleClef.png" />
While the three other instruments hold a cluster of high notes, the
cellist’s silent gestures interact with them, provoking a windy sonority
that becomes noisier as the cellist’s gestures become more energetic.
</div>
<divid="section2" smil:begin="0:36"> […] </div>
<divid="section3" smil:begin="0:43"> […] </div>
<divid="section4" smil:begin="1:09"> […] </div>
<divid="section5" smil:begin="2:04"> […] </div>
<divid="section6" smil:begin="3:10"> […] </div>
</div>
<divid="mediaController">
<divid="mediaTimeline"> […] </div>
<audioid="audioPlayer" controlsautoplaypreload="auto">
<sourcesrc="media/StreicherKreis_BASCHET_extract.ogg" type="audio/ogg" />
<sourcesrc="media/StreicherKreis_BASCHET_extract.mp3" type="audio/mpeg" />
Your browser does not support the HTML5 <audio> tag,
please upgrade to a modern browser to see this demo.
</audio>
</div>
The main difference is that we’re using the (non-standard)
mediaSync attribute to select the <audio>
element as the syncMaster.
<excl> attributes: first, prev, next, last
These four attributes are used to describe a basic user
interaction. Each value refer to an HTML element event:
[elementID].[event]
In the example above, these attributes are defined as follows:
These first/prev/next/last attributes are defined in the Timesheets working draft, but
they aren’t (yet?) in the SMIL Timing
recommendation. They are supposed to be specific to
<excl> time containers, but our implementation allows
to use them in <seq> containers as well.
Note that similar time events can be used in begin and
end attributes, too.
Anchors
The SMIL Timing spec includes a notice about hyperlink
implication on SEQ and EXCL time containers. This allows us to use
anchors to activate a particular time node in a
<seq|excl> container:
Our timesheet scheduler relies on the hashchange event to
activate the requested time node: again, no particular JavaScript code is
applied to these links above (no onclick or whatsoever).
Timeline Anchors
Besides the native audio player, we've designed a visual timeline in order
to access to any section directly. No specific JavaScript is involved
here, it's just a set of links:
Our timesheet scheduler checks for hash changes and activates the target's
parent time container on the corresponding time position. This ensures
your anchor is properly displayed -- both spatially and temporally.
We still had to write some specific JavaScript code to sync the play/pause
buttons and the time cursor between our visual timeline and the native
audio player. The code is very simple but it's specific to the HTML5 media
API -- see timeline.js
(~50 lines of code).
CSS Markup
We’re using transitions on CSS transformations to animate the media
annotation blocks:
div#media {
/* define a 1s transition on all properties */transition : all 1s;
-o-transition : all 1s;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
div#media div[smil=idle] {
/* position and shape before the transition */opacity: 0;
transform : scale(0.3) translate(+200%);
-o-transform : scale(0.3) translate(+200%);
-moz-transform : scale(0.3) translate(+200%);
-webkit-transform : scale(0.3) translate(+200%);
}
div#media div[smil=done] {
/* position and shape after the transition */opacity: 0;
transform : scale(0.3) translate(-200%);
-o-transform : scale(0.3) translate(-200%);
-moz-transform : scale(0.3) translate(-200%);
-webkit-transform : scale(0.3) translate(-200%);
}
div#media div[smil=active] {
/* position and shape when active */opacity: 1;
/* «transform: none;» is implicit */
}
Firefox users: these CSS transitions require Firefox 4.
Internet Explorer users: your browser doesn't support CSS
transitions at all.
While the three other instruments hold a cluster of high notes, the
cellist’s silent gestures interact with them, provoking a windy sonority
that becomes noisier as the cellist’s gestures become more energetic.
A short interlude employing conventional playing techniques (bows are
applied on the strings in the usual way, though sounds are still high
and dissonant).
From this point onward all the preceding techniques are increasingly
varied and combined. Identifying them becomes more challenging. Good
luck!