1 | <?xml version="1.0" encoding="UTF-8"?>
|
---|
2 | <xsl:stylesheet version="1.0"
|
---|
3 | xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
---|
4 | xmlns:java="http://xml.apache.org/xslt/java"
|
---|
5 | xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
|
---|
6 | xmlns:gslib="http://www.greenstone.org/skinning"
|
---|
7 | xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
|
---|
8 | xmlns:xlink="http://www.w3.org/1999/xlink"
|
---|
9 | extension-element-prefixes="java util"
|
---|
10 | exclude-result-prefixes="java util gsf">
|
---|
11 |
|
---|
12 |
|
---|
13 | <!-- *** -->
|
---|
14 | <!-- Document header -->
|
---|
15 | <!-- *** -->
|
---|
16 |
|
---|
17 | <xsl:template name="soundmanager2-header">
|
---|
18 |
|
---|
19 | <!-- soundManager2 API -->
|
---|
20 | <gsf:style src="ext/sound-manager2/css/flashblock.css" />
|
---|
21 | <gsf:script src="ext/sound-manager2/script/soundmanager2-nodebug.js"/>
|
---|
22 |
|
---|
23 | <!-- The Page player (variant of SoundManger) main script -->
|
---|
24 | <gsf:script src="ext/sound-manager2/script/page-player.js"/>
|
---|
25 | <gsf:style src="ext/sound-manager2/css/page-player.css" />
|
---|
26 |
|
---|
27 | <!-- optional: annotations/sub-tracks/notes, and alternate themes -->
|
---|
28 | <gsf:style src="ext/sound-manager2/css/optional-annotations.css" />
|
---|
29 | <gsf:style src="ext/sound-manager2/css/optional-themes.css" />
|
---|
30 |
|
---|
31 | <!-- optional: Metadata UI prototype (not needed unless you want the bottom-most demo bits) -->
|
---|
32 | <gsf:script src="ext/sound-manager2/script/optional-page-player-metadata.js"/>
|
---|
33 |
|
---|
34 | <gsf:style>
|
---|
35 | ul.playlist li .comment {font-size:0.65em;opacity:0.5}
|
---|
36 | </gsf:style>
|
---|
37 |
|
---|
38 | <!-- Customization of page-player for this collection -->
|
---|
39 |
|
---|
40 | <gsf:script>
|
---|
41 |
|
---|
42 | soundManager.flashVersion = 9;
|
---|
43 | soundManager.preferFlash = true; /* for visualization effects */
|
---|
44 | soundManager.useHighPerformance = true; /* keep flash on screen, boost performance */
|
---|
45 | soundManager.wmode = "transparent"; /* transparent SWF, if possible */
|
---|
46 | soundManager.useFastPolling = true; /* increased JS callback frequency */
|
---|
47 | soundManager.url = "ext/sound-manager2/swf/";
|
---|
48 |
|
---|
49 | /* custom page player configuration */
|
---|
50 |
|
---|
51 | var PP_CONFIG = {
|
---|
52 | autoStart: false, /* begin playing first sound when page loads */
|
---|
53 | playNext: false, /* stop after one sound, or play through list until end */
|
---|
54 | useThrottling: false, /* try to rate-limit potentially-expensive calls (eg. dragging position around) */
|
---|
55 | usePeakData: true, /* [Flash 9 only] whether or not to show peak data (left/right channel values) - nor noticable on CPU */
|
---|
56 | useWaveformData: false, /* [Flash 9 only] show raw waveform data - WARNING: LIKELY VERY CPU-HEAVY */
|
---|
57 | useEQData: false, /* [Flash 9 only] show EQ (frequency spectrum) data */
|
---|
58 | useFavIcon: false, /* try to apply peakData to address bar (Firefox + Opera) - performance note: appears to make Firefox 3 do some temporary, heavy disk access/swapping/garbage collection at first(?) - may be too heavy on CPU */
|
---|
59 | useMovieStar: true /* Flash 9.0r115+ only: Support for a subset of MPEG4 formats. */
|
---|
60 | }
|
---|
61 | </gsf:script>
|
---|
62 | </xsl:template>
|
---|
63 |
|
---|
64 |
|
---|
65 | <!-- CAA = Content Analysis Algorithm -->
|
---|
66 | <xsl:variable name="cgiargCAAlgorithm">
|
---|
67 | <xsl:choose>
|
---|
68 | <xsl:when test="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value != ''"><xsl:value-of select="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value"/></xsl:when>
|
---|
69 | <xsl:otherwise>1</xsl:otherwise>
|
---|
70 | </xsl:choose>
|
---|
71 | </xsl:variable>
|
---|
72 |
|
---|
73 | <!-- *** -->
|
---|
74 | <!-- The Javascript DSP files for computing chroma features in the browser -->
|
---|
75 | <!-- *** -->
|
---|
76 |
|
---|
77 | <xsl:template name="javascript-dsp-header">
|
---|
78 |
|
---|
79 | <gsf:script src="ext/js-dsp/dsp-custom.js"/>
|
---|
80 | <gsf:script src="ext/js-dsp/dsp.js"/>
|
---|
81 | <gsf:script src="ext/js-dsp/chroma-transform.js"/>
|
---|
82 | <gsf:script src="ext/js-dsp/frequency-plotter.js"/>
|
---|
83 | <gsf:script src="ext/js-dsp/frequency-player.js"/>
|
---|
84 |
|
---|
85 |
|
---|
86 | <gsf:script src="ext/js-dsp/component/crockford-inheritance.js"/>
|
---|
87 | <gsf:script src="ext/js-dsp/component/workflow-core.js"/>
|
---|
88 | <gsf:script src="ext/js-dsp/component/audio-mixer.js"/>
|
---|
89 | <gsf:script src="ext/js-dsp/component/wf-freq-spectrum.js"/>
|
---|
90 | <gsf:script src="ext/js-dsp/component/wf-filter-bank.js"/>
|
---|
91 | <gsf:script src="ext/js-dsp/component/wf-chroma-transform.js"/>
|
---|
92 | <gsf:script src="ext/js-dsp/component/active-workflow.js"/>
|
---|
93 |
|
---|
94 | </xsl:template>
|
---|
95 |
|
---|
96 | <xsl:template name="processingPopup">
|
---|
97 | <div>
|
---|
98 | <style type="text/css">
|
---|
99 | #processing {
|
---|
100 | width: 100%;
|
---|
101 | height: 100%;
|
---|
102 | position: absolute;
|
---|
103 | z-index: 10000;
|
---|
104 | left: 0px;
|
---|
105 | top: 0px;
|
---|
106 | background-color: rgba(255,255,255,0.75);
|
---|
107 | opacity: 1;
|
---|
108 | display: none;
|
---|
109 | }
|
---|
110 |
|
---|
111 | #processingMessage {
|
---|
112 | position: absolute;
|
---|
113 | padding: 10px;
|
---|
114 | border-radius: 10px;
|
---|
115 | margin-left: 50%;
|
---|
116 | width: 380px;
|
---|
117 | height: 105px;
|
---|
118 | left: -250px; top: 200px;
|
---|
119 | background-color: rgba(255,255,255,1);
|
---|
120 | box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
|
---|
121 | }
|
---|
122 |
|
---|
123 | #processingMessage p {
|
---|
124 | font-size: 18px;
|
---|
125 | text-align: center;
|
---|
126 | font-family:
|
---|
127 | sans-serif;
|
---|
128 | font-weight: bold;
|
---|
129 | color: #666;
|
---|
130 | }
|
---|
131 | </style>
|
---|
132 |
|
---|
133 | <div id="processing">
|
---|
134 | <div id="processingMessage">
|
---|
135 | <h2 id="processingTitle" class="ui-state-default ui-corner-all" style="padding: 8px; font-size: 110%; width: auto;">
|
---|
136 | Heading
|
---|
137 | </h2>
|
---|
138 | <p id="processingText">text</p>
|
---|
139 | </div>
|
---|
140 | </div>
|
---|
141 | </div>
|
---|
142 |
|
---|
143 | </xsl:template>
|
---|
144 |
|
---|
145 | <!-- *** -->
|
---|
146 | <!-- * Discovery -->
|
---|
147 | <!-- *** -->
|
---|
148 |
|
---|
149 | <xsl:template name="discovery-block">
|
---|
150 |
|
---|
151 | <div id="fingerprint-turnstyle">
|
---|
152 |
|
---|
153 | <div style="background-image: none; background-color: #2E52A4;">
|
---|
154 | Discovery: <xsl:call-template name="choose-title"/>
|
---|
155 | </div>
|
---|
156 |
|
---|
157 | <div class="documenttext" style="display: none;">
|
---|
158 | <xsl:call-template name="fingerprintMetadataBlock" />
|
---|
159 | </div>
|
---|
160 |
|
---|
161 | </div>
|
---|
162 |
|
---|
163 | <script>
|
---|
164 | <xsl:text disable-output-escaping="yes">
|
---|
165 | $(function(){
|
---|
166 | transformToTurnstyleBlock("fingerprint");
|
---|
167 | });
|
---|
168 | </xsl:text>
|
---|
169 | </script>
|
---|
170 |
|
---|
171 | </xsl:template>
|
---|
172 |
|
---|
173 |
|
---|
174 |
|
---|
175 | <xsl:template name="fingerprintMetadataBlock">
|
---|
176 |
|
---|
177 | <xsl:variable name="httpCollection"><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/></xsl:variable>
|
---|
178 | <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
|
---|
179 |
|
---|
180 |
|
---|
181 | <xsl:variable name="musicbrainzsongid">
|
---|
182 | <gsf:metadata name="dc.Identifier.musicbrainzsongid"/>
|
---|
183 | </xsl:variable>
|
---|
184 |
|
---|
185 | <xsl:variable name="musicbrainzalbumid">
|
---|
186 | <gsf:metadata name="dc.Source.musicbrainzalbumid"/>
|
---|
187 | </xsl:variable>
|
---|
188 |
|
---|
189 | <xsl:variable name="musicbrainzartistid">
|
---|
190 | <gsf:metadata name="dc.Creator.musicbrainzartistid"/>
|
---|
191 | </xsl:variable>
|
---|
192 |
|
---|
193 | <xsl:variable name="lastfmtrackurl">
|
---|
194 | <gsf:metadata name="dc.Identifier.lastfmtrackurl"/>
|
---|
195 | </xsl:variable>
|
---|
196 |
|
---|
197 | <xsl:variable name="echonestsongid">
|
---|
198 | <gsf:metadata name="dc.Identifier.echonestsongid"/>
|
---|
199 | </xsl:variable>
|
---|
200 |
|
---|
201 | <table class="metadata-stripes">
|
---|
202 | <tbody>
|
---|
203 | <tr>
|
---|
204 | <td>
|
---|
205 | Title
|
---|
206 | </td>
|
---|
207 | <td>
|
---|
208 | <gsf:metadata name="dc.Title"/>
|
---|
209 | </td>
|
---|
210 | </tr>
|
---|
211 |
|
---|
212 | <tr>
|
---|
213 | <td>Album Title</td>
|
---|
214 | <td><gsf:metadata name="dc.Title.albumtitle"/></td>
|
---|
215 | </tr>
|
---|
216 |
|
---|
217 | <tr>
|
---|
218 | <td>Artist</td>
|
---|
219 | <td><gsf:metadata name="dc.Creator"/></td>
|
---|
220 | </tr>
|
---|
221 |
|
---|
222 | <tr>
|
---|
223 | <td>Released</td>
|
---|
224 | <td><gsf:metadata name="dc.Coverage"/></td>
|
---|
225 | </tr>
|
---|
226 |
|
---|
227 | <!--
|
---|
228 | <tr valign="top">
|
---|
229 | <td>Artist Summary</td>
|
---|
230 | <td>
|
---|
231 | <i>
|
---|
232 | <gsf:script>
|
---|
233 | var summary = gs.documentMetadata["LastFM_LastFMArtistWikiSummary"];
|
---|
234 |
|
---|
235 | if (summary) {
|
---|
236 | document.write(summary.replace("\n","<br />"));
|
---|
237 | }
|
---|
238 |
|
---|
239 | </gsf:script>
|
---|
240 | </i>
|
---|
241 | </td>
|
---|
242 | </tr>
|
---|
243 | -->
|
---|
244 |
|
---|
245 |
|
---|
246 | <!--
|
---|
247 | dc.Identifier.echonestsongid
|
---|
248 | dc.Identifier.echonestartistid
|
---|
249 |
|
---|
250 | dc.Identifier.lastfmtrackurl
|
---|
251 | dc.Identifier.lastfmalbumurl
|
---|
252 | dc.Identifier.lastfmartisturl
|
---|
253 |
|
---|
254 | //dc.Identifier
|
---|
255 | dc.Identifier.musicbrainzalbumid
|
---|
256 | dc.Identifier.musicbrainzartistid
|
---|
257 | dc.Identifier.musicbrainzsongid
|
---|
258 | dc.Identifier.playmeartistid
|
---|
259 |
|
---|
260 | -->
|
---|
261 |
|
---|
262 | <tr>
|
---|
263 | <td colspan="2">
|
---|
264 |
|
---|
265 | <xsl:for-each select="/page/pageResponse/document/metadataList/metadata[@name = 'dc.Relation.artistrelatedimage']">
|
---|
266 | <xsl:if test="position() <= 6">
|
---|
267 | <a target="_blank">
|
---|
268 | <xsl:attribute name='href'>
|
---|
269 | <xsl:value-of disable-output-escaping="yes" select="."/>
|
---|
270 | </xsl:attribute>
|
---|
271 |
|
---|
272 | <img width="150">
|
---|
273 | <xsl:attribute name='src'>
|
---|
274 | <xsl:value-of disable-output-escaping="yes" select="."/>
|
---|
275 | </xsl:attribute>
|
---|
276 | </img>
|
---|
277 | </a>
|
---|
278 | </xsl:if>
|
---|
279 | </xsl:for-each>
|
---|
280 | </td>
|
---|
281 | </tr>
|
---|
282 |
|
---|
283 | <tr>
|
---|
284 | <td>Linked Data</td>
|
---|
285 | <td>
|
---|
286 | <!--
|
---|
287 | <gsf:metadata name="dc.Identifier"/><br />
|
---|
288 | -->
|
---|
289 |
|
---|
290 | <table style="width: 100%;">
|
---|
291 | <tr>
|
---|
292 | <td style="width: 200px;">
|
---|
293 | MusicBrainz song id:
|
---|
294 | </td>
|
---|
295 | <td>
|
---|
296 | <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz" class="external">
|
---|
297 | <xsl:copy-of select="$musicbrainzsongid"/>
|
---|
298 | </a>
|
---|
299 | </td>
|
---|
300 | </tr>
|
---|
301 |
|
---|
302 | <tr>
|
---|
303 | <td>
|
---|
304 | MusicBrainz album id:
|
---|
305 | </td>
|
---|
306 | <td>
|
---|
307 | <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz" class="external">
|
---|
308 | <xsl:copy-of select="$musicbrainzalbumid"/>
|
---|
309 | </a>
|
---|
310 | </td>
|
---|
311 | </tr>
|
---|
312 |
|
---|
313 | <tr>
|
---|
314 | <td>
|
---|
315 | MusicBrainz artist id:
|
---|
316 | </td>
|
---|
317 | <td>
|
---|
318 | <a href="https://musicbrainz.org/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external">
|
---|
319 | <xsl:copy-of select="$musicbrainzartistid"/>
|
---|
320 | </a>
|
---|
321 | </td>
|
---|
322 | </tr>
|
---|
323 | <!--
|
---|
324 | <tr>
|
---|
325 | <td>
|
---|
326 | EchoNest song id:
|
---|
327 | </td>
|
---|
328 | <td>
|
---|
329 | <a href="http://developer.echonest.com/api/v4/song/profile?api_key=8WNR9XTGCODO9G4YG&format=xml&id={$echonestsongid}" target="#echonestsongid" class="external">
|
---|
330 |
|
---|
331 |
|
---|
332 |
|
---|
333 | <xsl:copy-of select="$echonestsongid"/>
|
---|
334 | </a>
|
---|
335 | </td>
|
---|
336 | </tr>
|
---|
337 | -->
|
---|
338 |
|
---|
339 | <tr>
|
---|
340 | <td colspan="2">
|
---|
341 | <i>
|
---|
342 | <a href="{$lastfmtrackurl}" target="#lastfm" class="external">
|
---|
343 | <xsl:copy-of select="$lastfmtrackurl"/>
|
---|
344 | </a>
|
---|
345 | </i>
|
---|
346 | </td>
|
---|
347 | </tr>
|
---|
348 | </table>
|
---|
349 |
|
---|
350 | </td>
|
---|
351 | </tr>
|
---|
352 |
|
---|
353 |
|
---|
354 | </tbody>
|
---|
355 | </table>
|
---|
356 | </xsl:template>
|
---|
357 |
|
---|
358 |
|
---|
359 |
|
---|
360 | <!-- *** -->
|
---|
361 | <!-- * Audio Player -->
|
---|
362 | <!-- *** -->
|
---|
363 |
|
---|
364 | <xsl:template name="js-mad-header">
|
---|
365 |
|
---|
366 | <gsf:script src="ext/js-mad/script/mad.js"/>
|
---|
367 | <gsf:script src="ext/js-mad/script/rq_table.js"/>
|
---|
368 | <gsf:script src="ext/js-mad/script/imdct_s.js"/>
|
---|
369 | <gsf:script src="ext/js-mad/script/huffman.js"/>
|
---|
370 | <gsf:script src="ext/js-mad/script/bit.js"/>
|
---|
371 | <gsf:script src="ext/js-mad/script/stream.js"/>
|
---|
372 | <gsf:script src="ext/js-mad/script/layer3.js"/>
|
---|
373 | <gsf:script src="ext/js-mad/script/frame.js"/>
|
---|
374 | <gsf:script src="ext/js-mad/script/synth.js"/>
|
---|
375 |
|
---|
376 | <gsf:script src="ext/js-mad/script/arraybuffer/bytestream.js"/>
|
---|
377 | <gsf:script src="ext/js-mad/script/arraybuffer/filestream.js"/>
|
---|
378 | <gsf:script src="ext/js-mad/script/arraybuffer/substream.js"/>
|
---|
379 | <gsf:script src="ext/js-mad/script/arraybuffer/arraystream.js"/>
|
---|
380 | <gsf:script src="ext/js-mad/script/arraybuffer/ajaxstream.js"/>
|
---|
381 |
|
---|
382 | <gsf:script src="ext/js-mad/script/binarystring/bytestream.js"/>
|
---|
383 | <gsf:script src="ext/js-mad/script/binarystring/filestream.js"/>
|
---|
384 | <gsf:script src="ext/js-mad/script/binarystring/substream.js"/>
|
---|
385 | <gsf:script src="ext/js-mad/script/binarystring/stringstream.js"/>
|
---|
386 | <gsf:script src="ext/js-mad/script/binarystring/ajaxstream.js"/>
|
---|
387 |
|
---|
388 | <gsf:script src="ext/js-mad/script/id3v22stream.js"/>
|
---|
389 | <gsf:script src="ext/js-mad/script/id3v23stream.js"/>
|
---|
390 | <gsf:script src="ext/js-mad/script/mp3file.js"/>
|
---|
391 |
|
---|
392 | <!--
|
---|
393 | <gsf:script src="ext/js-mad/script/player.js"/>
|
---|
394 | -->
|
---|
395 |
|
---|
396 | <gsf:script src="ext/js-mad/script/sink.min.js"/>
|
---|
397 |
|
---|
398 | <!--
|
---|
399 | <gsf:script src="ext/js-mad/script/require.js"/>
|
---|
400 | -->
|
---|
401 | <!--
|
---|
402 | <gsf:script src="ext/js-mad/script/sink-light.js"/>
|
---|
403 | -->
|
---|
404 |
|
---|
405 | <gsf:script src="ext/js-mad/script/browser-detect.js"/>
|
---|
406 | <gsf:script src="ext/js-mad/script/main-jsmad.js"/>
|
---|
407 |
|
---|
408 | </xsl:template>
|
---|
409 |
|
---|
410 |
|
---|
411 |
|
---|
412 | <xsl:template name="audio-icon-cache">
|
---|
413 | <div style="display:none;">
|
---|
414 | <!-- pre-load various play/pause images to help with speed of interface update -->
|
---|
415 | <img src="ext/diy-audio-player/images/play32Highlight.png" />
|
---|
416 | <img src="ext/diy-audio-player/images/pause32.png" />
|
---|
417 | <img src="ext/diy-audio-player/images/pause32Highlight.png" />
|
---|
418 | <img src="ext/diy-audio-player/images/play20Highlight.png" />
|
---|
419 | <img src="ext/diy-audio-player/images/stop32.png" />
|
---|
420 | <img src="ext/diy-audio-player/images/stop32Highlight.png" />
|
---|
421 | <img src="ext/diy-audio-player/images/search20Highlight.png" />
|
---|
422 | </div>
|
---|
423 | </xsl:template>
|
---|
424 |
|
---|
425 |
|
---|
426 | <!-- *** -->
|
---|
427 | <!-- * Workflow control -->
|
---|
428 | <!-- *** -->
|
---|
429 |
|
---|
430 | <xsl:template name="workflow-block">
|
---|
431 | <xsl:variable name="httpCollection">
|
---|
432 | <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
|
---|
433 | </xsl:variable>
|
---|
434 |
|
---|
435 | <div id="workflow-turnstyle">
|
---|
436 |
|
---|
437 | <div style="background-image: none; background-color: rgb(80%,80%,20%);">
|
---|
438 | Workflow
|
---|
439 | </div>
|
---|
440 |
|
---|
441 | <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
|
---|
442 |
|
---|
443 | <!--
|
---|
444 | <form style="padding-left: 8px;">
|
---|
445 | <span class="vis-heading">Input Selection:</span>
|
---|
446 | <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="left"/>Left only
|
---|
447 | <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="right"/>Right only
|
---|
448 | <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="diff"/>Average
|
---|
449 | <input type="radio" name="inputSelection" onclick="setInputSelectionMode(this)" value="mix" checked="checked"/>Difference
|
---|
450 | </form>
|
---|
451 | <hr/>
|
---|
452 | -->
|
---|
453 |
|
---|
454 | <form style="padding-left: 8px; height: 48px;">
|
---|
455 | <span class="vis-heading" style="padding-right: 10px" >Meandre Workflow:</span>
|
---|
456 |
|
---|
457 | <select id="meandre-workflow-pos" onChange="loadSelectedWorkflow(this)" style="font-size: 90%; padding 8px;">
|
---|
458 | <option value="0" selected="selected">Chromagram</option>
|
---|
459 | <option value="1" >Dynamic Javascript Mixer</option>
|
---|
460 | </select>
|
---|
461 |
|
---|
462 | <div style="float: right;" id="meandre-buttons">
|
---|
463 |
|
---|
464 | <button type="button" id="meandre-run-button"
|
---|
465 | onclick="selectedMeandreWorkflow.runThisMeandreFlow(this)">
|
---|
466 | <img id="meandre-run-button" src="ext/diy-audio-player/images/play32.png"
|
---|
467 | width="32"
|
---|
468 | height="32"
|
---|
469 | XXonmouseover="playHighlightOn(this)"
|
---|
470 | XXonmouseout="playHighlightOff(this)"
|
---|
471 | XXonclick="runThisMeandreFlow(this)"
|
---|
472 | style="vertical-align: middle;"/>
|
---|
473 | Run
|
---|
474 | </button>
|
---|
475 |
|
---|
476 | <button type="button" id="meandre-stop-button" onclick="selectedMeandreWorkflow.stopThisMeandreFlow(this)" disabled="disabled">
|
---|
477 | <img id="meandre-stop-button" src="ext/diy-audio-player/images/stop32.png"
|
---|
478 | width="32"
|
---|
479 | height="32"
|
---|
480 | XXonmouseover="stopHighlightOn(this)"
|
---|
481 | XXonmouseout="stopHighlightOff(this)"
|
---|
482 | XXonclick="stopThisMeandreFlow(this)"
|
---|
483 | style="vertical-align: middle;"/>
|
---|
484 | Stop
|
---|
485 | </button>
|
---|
486 |
|
---|
487 | <!--
|
---|
488 | <button type="button" id="meandre-run-button" onclick="runThisMeandreFlow(this)" >Run</button>
|
---|
489 | <button type="button" id="meandre-stop-button" onclick="stopThisMeandreFlow(this)" disabled="disabled">Stop</button>
|
---|
490 | -->
|
---|
491 |
|
---|
492 | </div>
|
---|
493 |
|
---|
494 | </form>
|
---|
495 |
|
---|
496 | <style>
|
---|
497 | #meandre-buttons button:hover:enabled {
|
---|
498 | background-color: #CCCC33;
|
---|
499 | color: #FFFFFF;
|
---|
500 | }
|
---|
501 | </style>
|
---|
502 |
|
---|
503 |
|
---|
504 | <div style="position: relative;">
|
---|
505 | <iframe id="workbenchFrame"
|
---|
506 | style="width: 100%; height: 400px;" >
|
---|
507 | If you see this, then your browser does not support the iframe element.
|
---|
508 | </iframe>
|
---|
509 |
|
---|
510 | </div>
|
---|
511 |
|
---|
512 | <gsf:script src="{$httpCollection}/script/meandre-workflow/chromagram.js"/>
|
---|
513 | <gsf:script src="{$httpCollection}/script/meandre-workflow/js-dynamic-mix.js"/>
|
---|
514 |
|
---|
515 | <gsf:script>
|
---|
516 | var chromagramMeandreWorkflow = new ChromagramMeandreWorkflow();
|
---|
517 | var jsDynamicMixMeandreWorkflow = new JSDynamicMixMeandreWorkflow();
|
---|
518 |
|
---|
519 | var meandreWorkflows = [ chromagramMeandreWorkflow, jsDynamicMixMeandreWorkflow ];
|
---|
520 |
|
---|
521 | var selectedMeandreWorkflowPos =$('#meandre-workflow-pos option:selected').val();
|
---|
522 | var selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
|
---|
523 |
|
---|
524 | selectedMeandreWorkflow.meandreController.loadWorkbench( "workbenchFrame",selectedMeandreWorkflowPos);
|
---|
525 |
|
---|
526 | function loadSelectedWorkflow(elem) {
|
---|
527 | selectedMeandreWorkflowPos = elem.value;
|
---|
528 | selectedMeandreWorkflow = meandreWorkflows[selectedMeandreWorkflowPos];
|
---|
529 |
|
---|
530 | if (selectedMeandreWorkflowPos==1) {
|
---|
531 | $('#jsdynamic-turnstyle').show();
|
---|
532 | }
|
---|
533 | else {
|
---|
534 | $('#jsdynamic-turnstyle').hide();
|
---|
535 | }
|
---|
536 |
|
---|
537 | console.info("Loading in new Meandre workbench flow (pos=" + selectedMeandreWorkflowPos+ ")");
|
---|
538 | selectedMeandreWorkflow.meandreController.loadWorkbench("workbenchFrame",selectedMeandreWorkflowPos);
|
---|
539 |
|
---|
540 | }
|
---|
541 | </gsf:script>
|
---|
542 |
|
---|
543 |
|
---|
544 |
|
---|
545 |
|
---|
546 | <div id="jsdynamic-turnstyle" style="display:none">
|
---|
547 |
|
---|
548 | <div style="background-image: none; background-color: rgb(80%,80%,20%);">
|
---|
549 | Dynamic Javascript Meandre Component
|
---|
550 | </div>
|
---|
551 |
|
---|
552 | <div class="documenttext hide" style="color: white; background-color: rgb(40%,40%,20%); padding: 8px;">
|
---|
553 |
|
---|
554 | <textarea id="js-dynamic-code" style="width:100%; height: 520px; font-size: 60%">
|
---|
555 | <xsl:text disable-output-escaping="yes">
|
---|
556 |
|
---|
557 |
|
---|
558 | var arrayBinding = new JavaImporter(java.lang.reflect.Array);
|
---|
559 |
|
---|
560 | var JSDynamicComponent = function() {
|
---|
561 | this.frameCount = 0;
|
---|
562 | }
|
---|
563 |
|
---|
564 | JSDynamicComponent.prototype.executeCallBack = function(cc) {
|
---|
565 |
|
---|
566 | with(arrayBinding) {
|
---|
567 |
|
---|
568 | if ((this.frameCount % 1000)==0) {
|
---|
569 | print("JSDynamicComponent: " + this.frameCount + "\n");
|
---|
570 | }
|
---|
571 |
|
---|
572 | var inputObject = cc.getDataComponentFromInput("input");
|
---|
573 | var rawInput1DArray = inputObject;
|
---|
574 |
|
---|
575 | var rawOutput1DArray = Array.newInstance(java.lang.Double.TYPE, rawInput1DArray.length);
|
---|
576 |
|
---|
577 | for (var i=1; i<rawOutput1DArray.length; i++) {
|
---|
578 | var diff = Array.getDouble(rawInput1DArray,i) - Array.getDouble(rawInput1DArray, i-1);
|
---|
579 | Array.setDouble(rawOutput1DArray,i,diff);
|
---|
580 | }
|
---|
581 |
|
---|
582 | cc.pushDataComponentToOutput("output", rawOutput1DArray);
|
---|
583 |
|
---|
584 | this.frameCount++;
|
---|
585 | }
|
---|
586 |
|
---|
587 | }
|
---|
588 |
|
---|
589 | var jsDynamicComponent = new JSDynamicComponent();
|
---|
590 |
|
---|
591 | </xsl:text>
|
---|
592 | </textarea>
|
---|
593 | </div> <!-- end of Dynamic JS turnstyle block -->
|
---|
594 | </div>
|
---|
595 |
|
---|
596 | </div>
|
---|
597 |
|
---|
598 | </div>
|
---|
599 |
|
---|
600 | <script>
|
---|
601 | <xsl:text disable-output-escaping="yes">
|
---|
602 | $(function(){
|
---|
603 | transformToTurnstyleBlock("workflow");
|
---|
604 | transformToTurnstyleBlock("jsdynamic");
|
---|
605 | });
|
---|
606 | </xsl:text>
|
---|
607 | </script>
|
---|
608 | </xsl:template>
|
---|
609 |
|
---|
610 |
|
---|
611 | <!-- *** -->
|
---|
612 | <!-- * Structured audio player -->
|
---|
613 | <!-- *** -->
|
---|
614 |
|
---|
615 | <xsl:template name="structuredAudioPlayerBlock">
|
---|
616 |
|
---|
617 | <gsf:script src="ext/diy-audio-player/script/structured-audio-play.js"/>
|
---|
618 |
|
---|
619 | <div style="background-color: rgb(40%,40%,20%)">
|
---|
620 | <svg xmlns="http://www.w3.org/2000/svg"
|
---|
621 | xmlns:xlink="http://www.w3.org/1999/xlink"
|
---|
622 | version="1.1"
|
---|
623 | id="svgGroundTruthSegments"
|
---|
624 | width="100%" height="24"
|
---|
625 | onLoadXX="svgGTStructuredInit()">
|
---|
626 | </svg>
|
---|
627 | </div>
|
---|
628 |
|
---|
629 | <div style="background-color: rgb(40%,40%,20%)">
|
---|
630 | <svg xmlns="http://www.w3.org/2000/svg"
|
---|
631 | xmlns:xlink="http://www.w3.org/1999/xlink"
|
---|
632 | version="1.1"
|
---|
633 | id="svgContentAnalysisSegments"
|
---|
634 | width="100%" height="24"
|
---|
635 | onLoadXX="svgCAStructuredInit({$cgiargCAAlgorithm})">
|
---|
636 | </svg>
|
---|
637 | </div>
|
---|
638 | </xsl:template>
|
---|
639 |
|
---|
640 | <xsl:template name="visualization-mode-block">
|
---|
641 |
|
---|
642 | <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;">
|
---|
643 |
|
---|
644 | <span class="vis-heading">Max Values:</span>
|
---|
645 | <div style="padding-left: 8px">
|
---|
646 | <style>
|
---|
647 | span.mv-fixed { display: inline-block; width: 30pt; }
|
---|
648 | </style>
|
---|
649 | <table width="100%">
|
---|
650 | <tr>
|
---|
651 | <td><span class="mv-fixed" id="freqSpectrumMax" >0.000</span>(Freq Spectrum) </td>
|
---|
652 | <td><span class="mv-fixed" id="freqPowerSpectrumMax">0.000</span>(Freq Power Spectrum) </td>
|
---|
653 | <td><span class="mv-fixed" id="filterBankMax" >0.000</span>(Filter Bank) </td>
|
---|
654 | <td><span class="mv-fixed" id="chromaFeaturesMax" >0.000</span>(Chroma Features) </td>
|
---|
655 | </tr>
|
---|
656 | </table>
|
---|
657 | </div>
|
---|
658 | <hr/>
|
---|
659 |
|
---|
660 | <form style="padding-left: 8px; padding-right: 8px; padding-bottom: 0px;">
|
---|
661 | <div style="float: left;">
|
---|
662 | <span class="vis-heading">Visualization:</span>
|
---|
663 | <!--
|
---|
664 | <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqSpectrum" />Frequency Spectrum
|
---|
665 | <input type="radio" name="visualization" onclick="setTransformMode(this)" value="freqPowerSpectrum"/>Frequency Power Spectrum
|
---|
666 | -->
|
---|
667 |
|
---|
668 | <input type="radio" name="visualization" onclick="setTransformMode(this)" value="filterBank"/>Filter Bank
|
---|
669 | <input type="radio" name="visualization" onclick="setTransformMode(this)" value="chromaFeatures" checked="checked"/>Chroma Features
|
---|
670 | </div>
|
---|
671 |
|
---|
672 | <div style="float: left; padding-left: 140px;">
|
---|
673 | <span class="vis-heading">Colour Mapping:</span>
|
---|
674 | <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
|
---|
675 | <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat
|
---|
676 | </div>
|
---|
677 | </form>
|
---|
678 |
|
---|
679 | <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
|
---|
680 |
|
---|
681 | <!--
|
---|
682 | <form style="padding-left: 8px;">
|
---|
683 | <span class="vis-heading">Colour Mapping:</span>
|
---|
684 | <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="rgb"/>RGB Intensity
|
---|
685 | <input type="radio" name="colorMapping" onclick="setColorMappingMode(this)" value="hsl" checked="checked"/>HSL Heat Map
|
---|
686 | </form>
|
---|
687 | <hr/>
|
---|
688 | -->
|
---|
689 |
|
---|
690 |
|
---|
691 |
|
---|
692 | <form style="padding-left: 8px; padding-bottom: 0px;">
|
---|
693 | <div style="float: left;">
|
---|
694 | <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix
|
---|
695 | </div>
|
---|
696 | <div style="float: left; padding-left: 140px;">
|
---|
697 | <span class="vis-heading">Accelerated Processing:</span>
|
---|
698 | <input type="checkbox" name="acceleratedProcessingInput" onclick="acceleratedProcessingCheckbox(this)"/>> realtime
|
---|
699 | <span id="accProcStatus"></span>
|
---|
700 | </div>
|
---|
701 |
|
---|
702 | </form>
|
---|
703 | <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div>
|
---|
704 |
|
---|
705 | <hr/>
|
---|
706 |
|
---|
707 | </div>
|
---|
708 |
|
---|
709 | <xsl:call-template name="graphic-equalizers"/>
|
---|
710 | </xsl:template>
|
---|
711 |
|
---|
712 |
|
---|
713 | <xsl:template name="graphic-equalizers">
|
---|
714 |
|
---|
715 |
|
---|
716 | <gsf:style >
|
---|
717 | #grapheqControlL {
|
---|
718 | display: none;
|
---|
719 | }
|
---|
720 |
|
---|
721 | #grapheqControlR {
|
---|
722 | display: none;
|
---|
723 | }
|
---|
724 |
|
---|
725 | .control {
|
---|
726 | padding: 5px;
|
---|
727 | border: 1px solid #CCC;
|
---|
728 | background-color: #EEE;
|
---|
729 | float: left;
|
---|
730 | margin-right: 5px;
|
---|
731 |
|
---|
732 | }
|
---|
733 |
|
---|
734 | .inner-control {
|
---|
735 | background-color: #DDD;
|
---|
736 | }
|
---|
737 |
|
---|
738 | .control div {
|
---|
739 | max-width: 400px;
|
---|
740 | }
|
---|
741 |
|
---|
742 | .control table td {
|
---|
743 | padding: 5px;
|
---|
744 | width: 25px;
|
---|
745 | color: #999;
|
---|
746 | font-size: 12px;
|
---|
747 | }
|
---|
748 | .control h3 {
|
---|
749 | margin: 0;
|
---|
750 | padding:0;
|
---|
751 | font-size: 12px;
|
---|
752 | margin-bottom: 10px;
|
---|
753 | }
|
---|
754 | .control #debug {
|
---|
755 | border: 1px inset #ccc;
|
---|
756 | background-color: #FFF;
|
---|
757 | font-size: 12px;
|
---|
758 | width: 300px;
|
---|
759 | padding: 10px;
|
---|
760 | }
|
---|
761 | .slider {
|
---|
762 | margin-bottom: 16px;
|
---|
763 | width: 8px;
|
---|
764 | }
|
---|
765 | /*
|
---|
766 | .geq-bar {
|
---|
767 | width: 34px;
|
---|
768 | }
|
---|
769 | */
|
---|
770 |
|
---|
771 | /*
|
---|
772 | .ui-button {
|
---|
773 | font-size: xx-small;
|
---|
774 | }
|
---|
775 | */
|
---|
776 | .ui-slider .ui-slider-handle {
|
---|
777 | width: 8px;
|
---|
778 | margin-left: 3px;
|
---|
779 | }
|
---|
780 | </gsf:style>
|
---|
781 |
|
---|
782 |
|
---|
783 |
|
---|
784 | <gsf:script>
|
---|
785 | <![CDATA[
|
---|
786 |
|
---|
787 | var grapheqL;
|
---|
788 | var grapheqR;
|
---|
789 |
|
---|
790 | $(function() {
|
---|
791 | var geqSampleRate = 44100;
|
---|
792 | console.log("*** hardwiring Graphic Equalizer sampleRate to be: " + geqSampleRate);
|
---|
793 |
|
---|
794 | grapheqL = new GraphicalEq(geqSampleRate);
|
---|
795 | grapheqR = new GraphicalEq(geqSampleRate);
|
---|
796 | grapheqL.recalculateFilters();
|
---|
797 | grapheqR.recalculateFilters();
|
---|
798 |
|
---|
799 | var minPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
|
---|
800 | slide: function() { changeMinFreq(grapheqL,"L")} };
|
---|
801 | var minPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40,
|
---|
802 | slide: function() { changeMinFreq(grapheqR,"R")} };
|
---|
803 |
|
---|
804 | var maxPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
|
---|
805 | slide: function() { changeMaxFreq(grapheqL,"L") } };
|
---|
806 | var maxPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000,
|
---|
807 | slide: function() { changeMaxFreq(grapheqR,"R") } };
|
---|
808 |
|
---|
809 | var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
|
---|
810 | slide: function() { changeBandsPerOctave(grapheqL,"L")} };
|
---|
811 | var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1,
|
---|
812 | slide: function() { changeBandsPerOctave(grapheqR,"R")} };
|
---|
813 |
|
---|
814 | $('#minFreqL').slider(minPropL);
|
---|
815 | $('#maxFreqL').slider(maxPropL);
|
---|
816 | $('#minFreqR').slider(minPropR);
|
---|
817 | $('#maxFreqR').slider(maxPropR);
|
---|
818 |
|
---|
819 | $('#bandsPerOctaveL').slider(bpoPropL);
|
---|
820 | $('#bandsPerOctaveR').slider(bpoPropR);
|
---|
821 |
|
---|
822 | //$('#input').attr('volume', 0);
|
---|
823 |
|
---|
824 | createSliders(grapheqL,"L");
|
---|
825 | createSliders(grapheqR,"R");
|
---|
826 | });
|
---|
827 |
|
---|
828 |
|
---|
829 |
|
---|
830 | var changeMinFreq = function(grapheq,side) {
|
---|
831 | grapheq.setMinimumFrequency($('#minFreq'+side).slider('option', 'value'));
|
---|
832 | //plotCoeffs();
|
---|
833 | createSliders(grapheq,side);
|
---|
834 | }
|
---|
835 |
|
---|
836 | var changeMaxFreq = function(grapheq,side) {
|
---|
837 | grapheq.setMaximumFrequency($('#maxFreq'+side).slider('option', 'value'));
|
---|
838 | //plotCoeffs();
|
---|
839 | createSliders(grapheq,side);
|
---|
840 | }
|
---|
841 |
|
---|
842 | var changeBandsPerOctave = function(grapheq,side) {
|
---|
843 | grapheq.setBandsPerOctave($('#bandsPerOctave'+side).slider('option', 'value'));
|
---|
844 | //plotCoeffs();
|
---|
845 | createSliders(grapheq,side);
|
---|
846 | }
|
---|
847 |
|
---|
848 | function positionGrapheqControl(grapheq,side) {
|
---|
849 |
|
---|
850 | var numSliders = grapheq.filters.length;
|
---|
851 | var offset = (35 * numSliders) + 12;
|
---|
852 | if (side == "L") {
|
---|
853 | offset += 30; // fudge factor
|
---|
854 | $('#grapheqControlL').css("left","-" + offset + "px");
|
---|
855 | }
|
---|
856 | else if (side == "R") {
|
---|
857 | offset += 35; // fudge factor, used to be 5
|
---|
858 | $('#grapheqControlR').css("right","-" + offset + "px");
|
---|
859 | }
|
---|
860 | else {
|
---|
861 | console.error("positionGrapheqControl(): unrecognized side '" + side + "'");
|
---|
862 | }
|
---|
863 | }
|
---|
864 |
|
---|
865 | var createSliders = function(grapheq,side) {
|
---|
866 | $('#bandSliders'+side).empty();
|
---|
867 | positionGrapheqControl(grapheq,side);
|
---|
868 | for (var i=0; i<grapheq.filters.length; i++) {
|
---|
869 |
|
---|
870 | var freq = grapheq.filters[i].f0;
|
---|
871 | var units = "Hz";
|
---|
872 | if (freq>=1000000) {
|
---|
873 | freq = (freq/1000000).toFixed(2);
|
---|
874 | units = " MHz";
|
---|
875 | }
|
---|
876 | else if (freq>=1000) {
|
---|
877 | freq = (freq/1000).toFixed(2);
|
---|
878 | units = " KHz";
|
---|
879 | }
|
---|
880 | else if (freq>=100) {
|
---|
881 | freq = freq.toFixed(0);
|
---|
882 | }
|
---|
883 | else {
|
---|
884 | freq = freq.toFixed(0);
|
---|
885 | freq = " " + freq;
|
---|
886 | }
|
---|
887 |
|
---|
888 | $('#bandSliders'+side).append('<td class="geq-bar"><div id="band'+side+'_'+i+'" class="slider"></div>'
|
---|
889 | +freq + ' ' + units + '</td>');
|
---|
890 |
|
---|
891 | $('#band'+side+'_'+i).slider({ orientation: 'vertical', range: 'min', min: -10, max: 3, step: 0.1, value: 0,
|
---|
892 | slide: function(event,ui) { changeBandGain(event,ui,grapheq)} });
|
---|
893 | }
|
---|
894 | }
|
---|
895 |
|
---|
896 | var changeBandGain = function(event, ui, grapheq) {
|
---|
897 | grapheq.setBandGain(ui.handle.parentNode.id.split("_")[1], ui.value);
|
---|
898 | //plotCoeffs();
|
---|
899 | }
|
---|
900 | /*
|
---|
901 | var plotCoeffs = function() {
|
---|
902 | freqz = new Float32Array(grapheq.freqzs[0].length);
|
---|
903 |
|
---|
904 | for (var i=0; i<freqz.length; i++) {
|
---|
905 | for (var j=0; j<grapheq.freqzs.length; j++) {
|
---|
906 | freqz[i] += grapheq.freqzs[j][i];
|
---|
907 | }
|
---|
908 | }
|
---|
909 | }
|
---|
910 | */
|
---|
911 |
|
---|
912 | /*
|
---|
913 | function audioWritten(event) {
|
---|
914 | signal = event.mozFrameBuffer;
|
---|
915 |
|
---|
916 | // Apply the filter to the signal
|
---|
917 | signal = grapheq.processStereo(signal);
|
---|
918 |
|
---|
919 | output.mozWriteAudio([]); // flush
|
---|
920 | output.mozWriteAudio(signal);
|
---|
921 | writeCount++;
|
---|
922 | }
|
---|
923 | */
|
---|
924 |
|
---|
925 | //plotCoeffs();
|
---|
926 |
|
---|
927 |
|
---|
928 | ]]>
|
---|
929 | </gsf:script>
|
---|
930 |
|
---|
931 |
|
---|
932 | <gsf:script>
|
---|
933 | function minimizeTurnstyle(suffix) {
|
---|
934 | $('#turnstyleMaximizeButton'+suffix).show();
|
---|
935 | $('#turnstyleMinimizeButton'+suffix).hide();
|
---|
936 | $('#turnstyleContentsArea'+suffix).slideUp('fast');
|
---|
937 | }
|
---|
938 |
|
---|
939 | function maximizeTurnstyle(suffix) {
|
---|
940 | $('#turnstyleMaximizeButton'+suffix).hide();
|
---|
941 | $('#turnstyleMinimizeButton'+suffix).show();
|
---|
942 | $('#turnstyleContentsArea'+suffix).slideDown('fast');
|
---|
943 | }
|
---|
944 |
|
---|
945 | </gsf:script>
|
---|
946 |
|
---|
947 | <!--
|
---|
948 | <div class="control" style="float: left; height: 200px">
|
---|
949 | -->
|
---|
950 |
|
---|
951 |
|
---|
952 | <div id="grapheqControlL" class="control" style="position: absolute; top: 280px; left: -132px; heightXX: 200px">
|
---|
953 |
|
---|
954 | <h3 style="float: left;">Graphic Equalizer (left channel)</h3>
|
---|
955 | <div style="float: right;">
|
---|
956 | <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
|
---|
957 | <a id="turnstyleMinimizeButtonL" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('L');">
|
---|
958 | <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
|
---|
959 | </a>
|
---|
960 | <a id="turnstyleMaximizeButtonL" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('L');">
|
---|
961 | <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
|
---|
962 | </a>
|
---|
963 | </div>
|
---|
964 |
|
---|
965 | <hr style="clear: both;"/>
|
---|
966 |
|
---|
967 | <div id="turnstyleContentsAreaL" style="display: none; float: right;">
|
---|
968 |
|
---|
969 | <table class="inner-control" style="margin-bottom: 5px;">
|
---|
970 | <tr>
|
---|
971 | <td><div id="minFreqL" class="slider"><xsl:comment/></div>Min Freq</td>
|
---|
972 | <td><div id="maxFreqL" class="slider"><xsl:comment/></div>Max Freq</td>
|
---|
973 | <td><div id="bandsPerOctaveL" class="slider"><xsl:comment/></div>Bands/ Octave</td>
|
---|
974 | </tr>
|
---|
975 | </table>
|
---|
976 | </div>
|
---|
977 |
|
---|
978 | <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
|
---|
979 |
|
---|
980 | <table class="inner-control">
|
---|
981 | <tr id="bandSlidersL">
|
---|
982 | </tr>
|
---|
983 | </table>
|
---|
984 |
|
---|
985 |
|
---|
986 |
|
---|
987 | </div>
|
---|
988 |
|
---|
989 | <!--
|
---|
990 | <div class="control" style="float: right; height: 200px">
|
---|
991 | -->
|
---|
992 |
|
---|
993 | <div id="grapheqControlR" class="control" style="position: absolute; top: 280px; right: -330px; heightXX: 200px">
|
---|
994 | <h3 style="float: left;">Graphic Equalizer (right channel)</h3>
|
---|
995 |
|
---|
996 | <div style="float: right;">
|
---|
997 | <span style="font-size: 75%; padding-right: 5px;">(advanced)</span>
|
---|
998 | <a id="turnstyleMinimizeButtonR" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('R');">
|
---|
999 | <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/>
|
---|
1000 | </a>
|
---|
1001 | <a id="turnstyleMaximizeButtonR" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('R');">
|
---|
1002 | <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/>
|
---|
1003 | </a>
|
---|
1004 | </div>
|
---|
1005 |
|
---|
1006 | <hr style="clear: both;"/>
|
---|
1007 |
|
---|
1008 | <div id="turnstyleContentsAreaR" style="display: none; float: left;">
|
---|
1009 | <table class="inner-control" style="margin-bottom: 5px;">
|
---|
1010 | <tr>
|
---|
1011 | <td><div id="minFreqR" class="slider"><xsl:comment/></div>Min Freq</td>
|
---|
1012 | <td><div id="maxFreqR" class="slider"><xsl:comment/></div>Max Freq</td>
|
---|
1013 | <td><div id="bandsPerOctaveR" class="slider"><xsl:comment/></div>Bands/ Octave</td>
|
---|
1014 | </tr>
|
---|
1015 | </table>
|
---|
1016 | </div>
|
---|
1017 |
|
---|
1018 | <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div>
|
---|
1019 |
|
---|
1020 | <table class="inner-control">
|
---|
1021 | <tr id="bandSlidersR">
|
---|
1022 | </tr>
|
---|
1023 | </table>
|
---|
1024 |
|
---|
1025 | </div>
|
---|
1026 |
|
---|
1027 | </xsl:template>
|
---|
1028 |
|
---|
1029 |
|
---|
1030 | <!-- *** -->
|
---|
1031 | <!-- * Settings form -->
|
---|
1032 | <!-- *** -->
|
---|
1033 |
|
---|
1034 | <xsl:template name="settings-form">
|
---|
1035 | <xsl:param name="cgiargYScaleSimImg"/>
|
---|
1036 |
|
---|
1037 | <xsl:variable name="httpCollection">
|
---|
1038 | <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
|
---|
1039 | </xsl:variable>
|
---|
1040 |
|
---|
1041 | <!--
|
---|
1042 | <gsf:variable-array name="overlayNote2">
|
---|
1043 | <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
|
---|
1044 | </gsf:variable-array>
|
---|
1045 |
|
---|
1046 | <span id="overlayNewNotes2" class="ui-state-default ui-corner-top" style="font-size:90%; padding: 3px; cursor:pointer;">
|
---|
1047 | New Annotation 2
|
---|
1048 | </span>
|
---|
1049 |
|
---|
1050 | <div id="noteOverlay2" style="width: 100%; height: 300px; background-color: #cccccc;">
|
---|
1051 | </div>
|
---|
1052 |
|
---|
1053 | <gsf:script>
|
---|
1054 | $(window).load(function(){
|
---|
1055 | var overlayNotes2 = new OverlayNotes("noteOverlay2","salami.overlayNote");
|
---|
1056 | $('#overlayNewNotes2').click(function() {overlayNotes2.AddNote() });
|
---|
1057 | });
|
---|
1058 |
|
---|
1059 | </gsf:script>
|
---|
1060 | -->
|
---|
1061 |
|
---|
1062 | <div style="display: none;"><!-- wrapped div to force display to none -->
|
---|
1063 |
|
---|
1064 | <div id="settings-turnstyle" style="margin: 6px;">
|
---|
1065 | <div style="background-image: none; background-color: rgb(80%,80%,20%);">
|
---|
1066 | Audio Content Search
|
---|
1067 | </div>
|
---|
1068 | <div class="documenttext" style="display: none;">
|
---|
1069 |
|
---|
1070 |
|
---|
1071 | <form id="QueryForm" name="QueryForm" method="get" action="{$library_name}">
|
---|
1072 | <input type="hidden" name="a" value="q"/>
|
---|
1073 | <input type="hidden" name="sa"><xsl:attribute name="value"><xsl:value-of select="/page/pageRequest/@subaction"/></xsl:attribute></input>
|
---|
1074 | <input type="hidden" name="rt" value="rd"/>
|
---|
1075 |
|
---|
1076 | <input type="hidden" name="s" value="AudioQuery"/>
|
---|
1077 | <input type="hidden" name="c" value="{$collName}"/>
|
---|
1078 | <xsl:if test="not(paramList/param[@name='startPage'])">
|
---|
1079 | <input type="hidden" name="startPage" value="1"/>
|
---|
1080 | </xsl:if>
|
---|
1081 | <xsl:choose>
|
---|
1082 | <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.maxDocs']">
|
---|
1083 | <input type="hidden" name="s1.maxDocs">
|
---|
1084 | <xsl:attribute name="value">
|
---|
1085 | <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.maxDocs']/@value"/>
|
---|
1086 | </xsl:attribute>
|
---|
1087 | </input>
|
---|
1088 | </xsl:when>
|
---|
1089 | <xsl:otherwise>
|
---|
1090 | <input type="hidden" name="s1.maxDocs" value="100"/>
|
---|
1091 | </xsl:otherwise>
|
---|
1092 | </xsl:choose>
|
---|
1093 | <xsl:choose>
|
---|
1094 | <xsl:when test="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']">
|
---|
1095 | <input type="hidden" name="s1.hitsPerPage">
|
---|
1096 | <xsl:attribute name="value">
|
---|
1097 | <xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.hitsPerPage']/@value"/>
|
---|
1098 | </xsl:attribute>
|
---|
1099 | </input>
|
---|
1100 | </xsl:when>
|
---|
1101 | <xsl:otherwise>
|
---|
1102 | <input type="hidden" name="s1.hitsPerPage" value="20"/>
|
---|
1103 | </xsl:otherwise>
|
---|
1104 | </xsl:choose>
|
---|
1105 |
|
---|
1106 | <input type="hidden" name="q">
|
---|
1107 | <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
|
---|
1108 | </input>
|
---|
1109 |
|
---|
1110 |
|
---|
1111 | <input type="hidden" name="s1.query">
|
---|
1112 | <!--
|
---|
1113 | <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/documentNode/@nodeID"/>.dir</xsl:attribute>
|
---|
1114 | -->
|
---|
1115 | <xsl:attribute name="value"><xsl:value-of select="/page/pageResponse/document/@nodeID"/>.dir</xsl:attribute>
|
---|
1116 | </input>
|
---|
1117 |
|
---|
1118 | <input type="hidden" name="s1.offset" value="0" />
|
---|
1119 | <input type="hidden" name="s1.length" value="200" />
|
---|
1120 |
|
---|
1121 | <div style="font-style: italics;">Start new query @ offset
|
---|
1122 | <span id="mysongCurrentPos">0 secs</span>,
|
---|
1123 | with excerpt lasting
|
---|
1124 |
|
---|
1125 | <input type="text" name="mysongWindowDuration" size="4" value="6" />
|
---|
1126 | <!--
|
---|
1127 | <span id="mysongWindowDuration" class="editable-offset"
|
---|
1128 | style="cursor: pointer; border: 1px solid black; padding: 3px; width: 200px; min-width: 200px;">6.0</span>
|
---|
1129 | -->
|
---|
1130 | secs:
|
---|
1131 |
|
---|
1132 | <input type="submit" value="Search" onclick="preSubmit(this.form);" />
|
---|
1133 | </div>
|
---|
1134 |
|
---|
1135 |
|
---|
1136 | <ul style="font-size: 80%; margin-top: 8px; font-style: italics;" >
|
---|
1137 | <li>Use the <b>Play all of</b> bar to get to the part of the song you are interested in.</li>
|
---|
1138 | <li>... the <b>query @ offset</b> value will change accordingly as the song progresses.</li>
|
---|
1139 | <li>Click <b>pause</b> (anywhere outside of the time-line) to mark the spot you want to start the new music query.</li>
|
---|
1140 | <li>Optionally click on the <b>excerpt lasting</b> value and edit, if you want to change the length of excerpt used in the match.</li>
|
---|
1141 | <li>Finally, click the <b>Search</b> button to initiate the new query.</li>
|
---|
1142 | </ul>
|
---|
1143 |
|
---|
1144 | </form>
|
---|
1145 |
|
---|
1146 | <hr/>
|
---|
1147 |
|
---|
1148 | <!--
|
---|
1149 | <form id="RescaleForm" name="RescaleForm" method="get" action="{$library_name}">
|
---|
1150 | <div style="font-style: italics;">
|
---|
1151 | Make the scale factor for the y-dimension of the self-similarity
|
---|
1152 | image be
|
---|
1153 | <input type="text" name="ResizeScale" value="{$cgiargYScaleSimImg}"
|
---|
1154 | size="3" /> then
|
---|
1155 | <input type="button" name="ResizeImage" value="Resize Image"
|
---|
1156 | onclick="javascript:rescaleImage()" />
|
---|
1157 |
|
---|
1158 | </div>
|
---|
1159 | </form>
|
---|
1160 |
|
---|
1161 | <hr/>
|
---|
1162 | -->
|
---|
1163 |
|
---|
1164 | <!-- **** currently not displayed -->
|
---|
1165 |
|
---|
1166 | <form id="UpdateCAForm" name="UpdateCAForm" method="get" action="{$library_name}" style="display: none;">
|
---|
1167 | <div style="font-style: italics;">
|
---|
1168 |
|
---|
1169 | Show the song structure automatically computed by analyzing
|
---|
1170 | the audio data using algorithm
|
---|
1171 |
|
---|
1172 | <select id="caaMenu" name="caAlgorithm">
|
---|
1173 | <option value="1">BV1</option>
|
---|
1174 | <option value="2">BV2</option>
|
---|
1175 | <option value="3">GP7</option>
|
---|
1176 | <option value="4">MHRAG2</option>
|
---|
1177 | <option value="5">MND1</option>
|
---|
1178 | <option value="6">WB1</option>
|
---|
1179 |
|
---|
1180 | <!--
|
---|
1181 | <option value="-1">or hide</option>
|
---|
1182 | -->
|
---|
1183 |
|
---|
1184 | </select>:
|
---|
1185 |
|
---|
1186 | <input type="button" name="Reload" value="Reload"
|
---|
1187 | onclick="updateCAAlgorithm()" />
|
---|
1188 |
|
---|
1189 | </div>
|
---|
1190 | </form>
|
---|
1191 |
|
---|
1192 | <script>
|
---|
1193 | <xsl:text disable-output-escaping="yes">
|
---|
1194 | if (hasStructuredAudio) {
|
---|
1195 | var caaMenu = document.getElementById("caaMenu");
|
---|
1196 | caaMenu.options[caAlgorithm-1].selected = 1;
|
---|
1197 | }
|
---|
1198 | </xsl:text>
|
---|
1199 | </script>
|
---|
1200 |
|
---|
1201 |
|
---|
1202 | </div>
|
---|
1203 | </div>
|
---|
1204 | <script>
|
---|
1205 | <xsl:text disable-output-escaping="yes">
|
---|
1206 | $(function(){
|
---|
1207 | transformToTurnstyleBlock("settings");
|
---|
1208 | });
|
---|
1209 | </xsl:text>
|
---|
1210 | </script>
|
---|
1211 |
|
---|
1212 | </div><!-- wrapped div to force display to none -->
|
---|
1213 |
|
---|
1214 | </xsl:template>
|
---|
1215 |
|
---|
1216 |
|
---|
1217 | <!-- *** -->
|
---|
1218 | <!-- * Computed Data -->
|
---|
1219 | <!-- *** -->
|
---|
1220 |
|
---|
1221 |
|
---|
1222 | <xsl:template name="computed-data">
|
---|
1223 | <xsl:param name="httpCollection"/>
|
---|
1224 | <xsl:param name="assocFilePath"/>
|
---|
1225 |
|
---|
1226 | <div id="computed-turnstyle" style="margin: 6px;">
|
---|
1227 | <div style="background-image: none; background-color: rgb(80%,80%,20%);">
|
---|
1228 | Computed Data
|
---|
1229 | </div>
|
---|
1230 |
|
---|
1231 | <div class="documenttext" style="display: none;">
|
---|
1232 | <table class="metadata-stripes" style="width: 100%">
|
---|
1233 | <tbody>
|
---|
1234 | <tr>
|
---|
1235 | <td>jAudio Features</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jaudio.xml">download ACE XML feature values file</a></td>
|
---|
1236 | </tr>
|
---|
1237 |
|
---|
1238 | <tr>
|
---|
1239 | <td>jSongMiner Metadata</td><td><a href="{$httpCollection}/index/assoc/{$assocFilePath}/jsongminer.xml">download ACE XML classifications file</a></td>
|
---|
1240 | </tr>
|
---|
1241 |
|
---|
1242 | </tbody>
|
---|
1243 | </table>
|
---|
1244 | </div>
|
---|
1245 | </div>
|
---|
1246 |
|
---|
1247 | <gsf:script>
|
---|
1248 | $(function(){
|
---|
1249 | transformToTurnstyleBlock("computed");
|
---|
1250 | });
|
---|
1251 | </gsf:script>
|
---|
1252 |
|
---|
1253 | </xsl:template>
|
---|
1254 |
|
---|
1255 |
|
---|
1256 |
|
---|
1257 | <xsl:template name="original-audio">
|
---|
1258 | <xsl:param name="httpCollection"/>
|
---|
1259 | <xsl:param name="assocFilePath"/>
|
---|
1260 | <xsl:param name="Audio"/>
|
---|
1261 | <xsl:param name="streamableaudio"/>
|
---|
1262 |
|
---|
1263 | <div id="original-turnstyle" style="margin: 6px;">
|
---|
1264 | <div style="background-image: none; background-color: rgb(80%,80%,20%);">
|
---|
1265 | The Original Audio
|
---|
1266 | </div>
|
---|
1267 |
|
---|
1268 | <div style="display: none;">
|
---|
1269 |
|
---|
1270 | <div>
|
---|
1271 | <audio style="width: 100%;" id="original-audio" controls="controls" >
|
---|
1272 | <!--
|
---|
1273 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
|
---|
1274 | -->
|
---|
1275 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" />
|
---|
1276 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}" />
|
---|
1277 | </audio>
|
---|
1278 | </div>
|
---|
1279 |
|
---|
1280 | </div>
|
---|
1281 | </div>
|
---|
1282 |
|
---|
1283 | <gsf:script>
|
---|
1284 | $(function(){
|
---|
1285 | transformToTurnstyleBlock("original");
|
---|
1286 | });
|
---|
1287 | </gsf:script>
|
---|
1288 |
|
---|
1289 |
|
---|
1290 |
|
---|
1291 | </xsl:template>
|
---|
1292 |
|
---|
1293 |
|
---|
1294 | <xsl:template name="documentContent">
|
---|
1295 | <!--
|
---|
1296 | <xsl:call-template name="init-document-xsl-vars"/>
|
---|
1297 | -->
|
---|
1298 | <!--
|
---|
1299 | declare $httpCollection = $httpPath (for better consistency with other places in Greenstone XSL files)
|
---|
1300 | -->
|
---|
1301 |
|
---|
1302 | <xsl:variable name="httpCollection">
|
---|
1303 | <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
|
---|
1304 | </xsl:variable>
|
---|
1305 | <xsl:variable name="assocFilePath">
|
---|
1306 | <gsf:metadata name="assocfilepath" select="root"/>
|
---|
1307 | </xsl:variable>
|
---|
1308 | <xsl:variable name="Source">
|
---|
1309 | <gsf:metadata name="Source" select="root"/>
|
---|
1310 | </xsl:variable>
|
---|
1311 | <xsl:variable name="Audio">
|
---|
1312 | <gsf:switch>
|
---|
1313 | <gsf:metadata name="Audio" select="root"/>
|
---|
1314 | <gsf:when test="exists">
|
---|
1315 | <gsf:metadata name="Audio" select="root"/>
|
---|
1316 | </gsf:when>
|
---|
1317 | <gsf:otherwise>doc.ogg</gsf:otherwise>
|
---|
1318 | </gsf:switch>
|
---|
1319 | </xsl:variable>
|
---|
1320 | <xsl:variable name="streamableaudio">
|
---|
1321 | <gsf:switch>
|
---|
1322 | <gsf:metadata name="streamableaudio" select="root"/>
|
---|
1323 | <gsf:when test="exists">
|
---|
1324 | <gsf:metadata name="streamableaudio" select="root"/>
|
---|
1325 | </gsf:when>
|
---|
1326 | <gsf:otherwise>doc.mp3</gsf:otherwise>
|
---|
1327 | </gsf:switch>
|
---|
1328 | </xsl:variable>
|
---|
1329 |
|
---|
1330 | <xsl:variable name="streamablevideo">
|
---|
1331 | <gsf:metadata name="SourceFile"/>
|
---|
1332 | </xsl:variable>
|
---|
1333 |
|
---|
1334 | <div class="documenttext" id="gs-document">
|
---|
1335 |
|
---|
1336 | <div>
|
---|
1337 |
|
---|
1338 |
|
---|
1339 | <div id='media-player' style="width: 96%">
|
---|
1340 |
|
---|
1341 | <xsl:if test="$interface_name='dlfm'">
|
---|
1342 | <style>
|
---|
1343 | .openclose a:visited {
|
---|
1344 | color: #ffffff;
|
---|
1345 | }
|
---|
1346 | .openclose a:link {
|
---|
1347 | color: #ffffff;
|
---|
1348 | }
|
---|
1349 | .openclose a:hover {
|
---|
1350 | color: #000000;
|
---|
1351 | }
|
---|
1352 |
|
---|
1353 | </style>
|
---|
1354 | </xsl:if>
|
---|
1355 |
|
---|
1356 | <div class="about-bar">
|
---|
1357 | <div id="about-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px; z-index: 4; position: relative;">
|
---|
1358 |
|
---|
1359 | <xsl:choose>
|
---|
1360 | <xsl:when test="$interface_name='dlfm'">
|
---|
1361 | Linked Data: <xsl:call-template name="choose-title"/>
|
---|
1362 | </xsl:when>
|
---|
1363 | <xsl:otherwise>
|
---|
1364 | About: <xsl:call-template name="choose-title"/>
|
---|
1365 | </xsl:otherwise>
|
---|
1366 | </xsl:choose>
|
---|
1367 | </div>
|
---|
1368 |
|
---|
1369 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1370 |
|
---|
1371 | <div id="about-area" class="documenttext"
|
---|
1372 | style="display: none; position: absolute: left: 0px; top: 0px; z-index: 1;">
|
---|
1373 | <xsl:call-template name="fingerprintMetadataBlock" />
|
---|
1374 | </div>
|
---|
1375 | </div>
|
---|
1376 |
|
---|
1377 | <div class="video-player-bar">
|
---|
1378 | <div id="video-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px; z-index: 4; position: relative;">
|
---|
1379 | Video Display
|
---|
1380 | </div>
|
---|
1381 |
|
---|
1382 | <div id="video-area" class="documenttext"
|
---|
1383 | style="display: none; position: absolute: left: 0px; top: 0px; z-index: 1;">
|
---|
1384 | <center>
|
---|
1385 |
|
---|
1386 |
|
---|
1387 | <style>
|
---|
1388 | #video_box {position:relative; z-index: 1;}
|
---|
1389 | #overlay {position: absolute; t: 0; left: 0; z-index: 2;}
|
---|
1390 | #video_container {z-index: 1;}
|
---|
1391 |
|
---|
1392 | #XXXvideo_container {position:absolute;top: 0px;left: 0px;}
|
---|
1393 | </style>
|
---|
1394 |
|
---|
1395 |
|
---|
1396 | <div id="video_box">
|
---|
1397 | <div id="overlay"><xsl:comment>filler</xsl:comment></div>
|
---|
1398 | <div id="video_container">
|
---|
1399 |
|
---|
1400 | <video id="video" width="60%" controls="false">
|
---|
1401 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
|
---|
1402 | <track id="bubbles" label="Metadata" kind="metadata"
|
---|
1403 | srclang="en" src="{$httpCollection}/tracks/land-down-under-metadata-en.vtt" default="default" />
|
---|
1404 | Your browser does not support the video tag.
|
---|
1405 | </video>
|
---|
1406 |
|
---|
1407 | </div>
|
---|
1408 | </div>
|
---|
1409 | </center>
|
---|
1410 | </div>
|
---|
1411 | </div>
|
---|
1412 |
|
---|
1413 | <div id='media-controls'>
|
---|
1414 | <div>
|
---|
1415 | <input id="progress-bar" type="range"
|
---|
1416 | min='0' max='100' step='0.01' value='0'
|
---|
1417 | class="ui-state-default ui-corner-all"
|
---|
1418 | style="width: 98%"/> <!-- used to be 100% -->
|
---|
1419 |
|
---|
1420 | </div>
|
---|
1421 | <div style="width: 100%;">
|
---|
1422 | <div style="float:left; padding: 8px; ">
|
---|
1423 | <button id='replay-button' class='buttonx2 replay' title='replay' onclick='replayMedia();'>Replay</button>
|
---|
1424 | <button id='play-pause-button' class='buttonx2 play' title='play/pause (or press space-bar on keyboard)' onclick='togglePlayPause();'>Play</button>
|
---|
1425 | <button id='stop-button' class='buttonx2 stop' title='stop' onclick='stopPlayer();'>Stop</button>
|
---|
1426 | </div>
|
---|
1427 | <div style="float:right; padding: 8px; ">
|
---|
1428 | <div style="display: inline; font-family: Arial,Helvetica,sans-serif; color: white">
|
---|
1429 | <span id="mediaPlayerCurrentTime">0:00.0</span>/
|
---|
1430 | <span id="mediaPlayerTotalTime">0:00.0</span>
|
---|
1431 | </div>
|
---|
1432 | <button id="eq-button" class="button" title="Show/Hide graphics equalilzer" onclick="return toggleGraphicEQ()">EQ</button>
|
---|
1433 | <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
|
---|
1434 | <button id='volume-inc-button' class='button volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button>
|
---|
1435 | <button id='mute-button' class='button mute' title='mute' onclick="toggleMute('true');">Mute</button>
|
---|
1436 | </div>
|
---|
1437 | </div>
|
---|
1438 | </div>
|
---|
1439 |
|
---|
1440 |
|
---|
1441 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1442 |
|
---|
1443 | <xsl:call-template name="graphic-equalizers"/>
|
---|
1444 |
|
---|
1445 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1446 |
|
---|
1447 | <div class="playlist-bar">
|
---|
1448 | <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
|
---|
1449 | Layer Controls: Create, Edit, View
|
---|
1450 | </div>
|
---|
1451 |
|
---|
1452 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1453 |
|
---|
1454 | <div id="playlist-area" class="documenttext"
|
---|
1455 | style="display: none; position: absolute: left: 0px; top: 0px;">
|
---|
1456 | <!--
|
---|
1457 | <div id='media-play-list'>
|
---|
1458 | <h2>Play list</h2>
|
---|
1459 | <ul id='play-list'>
|
---|
1460 | <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li>
|
---|
1461 | <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li>
|
---|
1462 | <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li>
|
---|
1463 | </ul>
|
---|
1464 | </div>
|
---|
1465 | -->
|
---|
1466 |
|
---|
1467 | <div id="save-recording-popup" title="Save Recording">
|
---|
1468 | <p>Do you want to name and save this recording?</p>
|
---|
1469 |
|
---|
1470 | <form>
|
---|
1471 | <fieldset>
|
---|
1472 | <label for="name">Name</label>
|
---|
1473 | <input type="text"
|
---|
1474 | name="save-recording-name" id="save-recording-name" value="My Recording"
|
---|
1475 | class="text ui-widget-content ui-corner-all"/>
|
---|
1476 | </fieldset>
|
---|
1477 |
|
---|
1478 | <!-- Allow form submission with keyboard without duplicating the dialog button -->
|
---|
1479 | <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
|
---|
1480 |
|
---|
1481 | </form>
|
---|
1482 | </div>
|
---|
1483 |
|
---|
1484 | <div id="delete-recording-popup" title="Delete Tracks">
|
---|
1485 | <p>Are you sure you want to delete the selected tracks?</p>
|
---|
1486 | </div>
|
---|
1487 |
|
---|
1488 |
|
---|
1489 | <div id="edit-recording-popup" title="Edit Tracks">
|
---|
1490 | <style>
|
---|
1491 | #trackEditor {
|
---|
1492 | position: absolute;
|
---|
1493 | top: 0; right: 0; bottom: 0; left: 0;
|
---|
1494 | }
|
---|
1495 | </style>
|
---|
1496 | <div id="trackEditor"><xsl:comment>Track Editor Area</xsl:comment></div>
|
---|
1497 | </div>
|
---|
1498 |
|
---|
1499 |
|
---|
1500 |
|
---|
1501 | <div style="color: white;">
|
---|
1502 |
|
---|
1503 | <form id="bubForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
|
---|
1504 | <fieldset>
|
---|
1505 | <legend id="mpm-legend">Popup Layers</legend>
|
---|
1506 | <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
|
---|
1507 | <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
|
---|
1508 | <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
|
---|
1509 | <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
|
---|
1510 |
|
---|
1511 | <div style="padding: 8px;">
|
---|
1512 | <button id="mpm-new-overlay"
|
---|
1513 | classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
|
---|
1514 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
|
---|
1515 | New Layer
|
---|
1516 | </button>
|
---|
1517 | <button id="mpm-merge-overlay"
|
---|
1518 | classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
|
---|
1519 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
|
---|
1520 | Merge Selected
|
---|
1521 | </button>
|
---|
1522 | <button id="mpm-split-overlay"
|
---|
1523 | classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
|
---|
1524 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
|
---|
1525 | Split Selected
|
---|
1526 | </button>
|
---|
1527 | <button id="mpm-edit-overlay"
|
---|
1528 | classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
|
---|
1529 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 8px;">
|
---|
1530 | Edit Selected
|
---|
1531 | </button>
|
---|
1532 | <button id="mpm-delete-overlay"
|
---|
1533 | classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
|
---|
1534 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;">
|
---|
1535 | Delete Selected
|
---|
1536 | </button>
|
---|
1537 | </div>
|
---|
1538 | </fieldset>
|
---|
1539 | </form>
|
---|
1540 |
|
---|
1541 | <form id="mpmForm" style="width:99%;">
|
---|
1542 | <fieldset>
|
---|
1543 | <legend id="mpm-legend">Video Player Mode</legend>
|
---|
1544 |
|
---|
1545 | <div id="mpm-div" class="radio-div">
|
---|
1546 |
|
---|
1547 | <div class="radio-label-combo" style="display:inline-block; width: 32%">
|
---|
1548 | <span>
|
---|
1549 | <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/>
|
---|
1550 | </span>
|
---|
1551 | <label for="mpm-record" class="radio-label">
|
---|
1552 | <span style="color: red;" title="The notes/beat you play on the instruments get recorded, and form a new layer">
|
---|
1553 | Lay down new track
|
---|
1554 | </span>
|
---|
1555 | </label>
|
---|
1556 | </div>
|
---|
1557 |
|
---|
1558 | <div class="radio-label-combo" style="display:inline-block; width: 32%">
|
---|
1559 | <span>
|
---|
1560 | <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/>
|
---|
1561 | </span>
|
---|
1562 | <label for="mpm-neutral" class="radio-label">
|
---|
1563 | <span style="color: orange;" title="Sit back and relax listening to the video">
|
---|
1564 | Put into Neutral
|
---|
1565 | </span>
|
---|
1566 | </label>
|
---|
1567 | </div>
|
---|
1568 |
|
---|
1569 | <div class="radio-label-combo" style="display:inline-block; width: 32%">
|
---|
1570 | <span>
|
---|
1571 | <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/>
|
---|
1572 | </span>
|
---|
1573 | <label for="mpm-game-on" class="radio-label">
|
---|
1574 | <span style="color: green;" title="When you play the video, try to play one of the instruments below to match the notes in the chosen layers on display. Get it right, and a rich rendition of the pop song is played, otherwise it sounds quite and tinny">
|
---|
1575 | Game on!
|
---|
1576 | </span>
|
---|
1577 | </label>
|
---|
1578 | </div>
|
---|
1579 |
|
---|
1580 | </div>
|
---|
1581 | </fieldset>
|
---|
1582 | </form>
|
---|
1583 |
|
---|
1584 |
|
---|
1585 | <form id="palForm" style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
|
---|
1586 | <fieldset>
|
---|
1587 | <legend id="pal-legend">Play Along Layers: Game On!</legend>
|
---|
1588 | <div id="palList"><xsl:comment>play along list</xsl:comment></div>
|
---|
1589 |
|
---|
1590 | <div style="padding: 8px;">
|
---|
1591 | <button id="pal-display-overlay"
|
---|
1592 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
|
---|
1593 | onclick="return palDisplay()">
|
---|
1594 | Display Selected
|
---|
1595 | </button>
|
---|
1596 | <button id="pal-merge-overlay"
|
---|
1597 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
|
---|
1598 | Merge Selected
|
---|
1599 | </button>
|
---|
1600 | <button id="pal-split-overlay"
|
---|
1601 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;">
|
---|
1602 | Split Selected
|
---|
1603 | </button>
|
---|
1604 | <button id="pal-edit-overlay"
|
---|
1605 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center; margin-right: 2px;"
|
---|
1606 | onclick="return palEdit()">
|
---|
1607 | Edit Selected
|
---|
1608 | </button>
|
---|
1609 | <button id="pal-delete-overlay"
|
---|
1610 | style="background-color:#2E52A4; color:#CCC; width:19%; text-align: center;"
|
---|
1611 | onclick="return palDelete()">
|
---|
1612 | Delete Selected
|
---|
1613 | </button>
|
---|
1614 | </div>
|
---|
1615 | </fieldset>
|
---|
1616 | </form>
|
---|
1617 |
|
---|
1618 |
|
---|
1619 | </div>
|
---|
1620 |
|
---|
1621 | </div>
|
---|
1622 | </div>
|
---|
1623 |
|
---|
1624 |
|
---|
1625 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1626 |
|
---|
1627 | <div class="analysis-bar">
|
---|
1628 | <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
|
---|
1629 |
|
---|
1630 | <xsl:choose>
|
---|
1631 | <xsl:when test="$interface_name='dlfm'">
|
---|
1632 | Music Notes Visualizer
|
---|
1633 | </xsl:when>
|
---|
1634 | <xsl:otherwise>
|
---|
1635 | Game On
|
---|
1636 | </xsl:otherwise>
|
---|
1637 | </xsl:choose>
|
---|
1638 | </div>
|
---|
1639 |
|
---|
1640 | <div id="analysis-area" class="documenttext"
|
---|
1641 | style="display: none; position: absolute: left: 0px; top: 0px;">
|
---|
1642 | <div style="width:97.7%; height: 500px; margin: 6px; background-colorXX: white">
|
---|
1643 | <div id="gameOnPaper" width="100%" height="445"><xsl:comment>filler</xsl:comment></div>
|
---|
1644 | <!--
|
---|
1645 | <svg id="gameOnPaper" xmlns="http://www.w3.org/2000/svg" version="1.1"
|
---|
1646 | width="100%" height="445"
|
---|
1647 | XXviewBox="0 0 100 100" XXpreserveAspectRatio="xMidYMid slice"
|
---|
1648 | XXstyle="width:100%; height:100%;" styleXX="position:absolute; top:0; left:0; z-index:-1;">
|
---|
1649 |
|
---|
1650 | <rect x="0" y="0" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
|
---|
1651 | <xsl:comment>filler</xsl:comment>
|
---|
1652 | </svg>
|
---|
1653 | -->
|
---|
1654 | </div>
|
---|
1655 |
|
---|
1656 | </div>
|
---|
1657 | </div>
|
---|
1658 |
|
---|
1659 |
|
---|
1660 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1661 |
|
---|
1662 | <div class="turnstyle-bar">
|
---|
1663 |
|
---|
1664 | <div id="piano-titlebar"
|
---|
1665 | style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
|
---|
1666 | Piano
|
---|
1667 | </div>
|
---|
1668 |
|
---|
1669 | <div id="drumkit-titlebar"
|
---|
1670 | style="background-image: none; background-color: #2E52A4; width: 30%; float: left; margin-right: 14px;">
|
---|
1671 | Drums
|
---|
1672 | </div>
|
---|
1673 |
|
---|
1674 | <div id="guitar-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;">
|
---|
1675 | Guitar
|
---|
1676 | </div>
|
---|
1677 |
|
---|
1678 |
|
---|
1679 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1680 |
|
---|
1681 | <div style="position: relative;">
|
---|
1682 |
|
---|
1683 | <div id="piano-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
|
---|
1684 | <div id='jquery-piano'>
|
---|
1685 | <div ID="keyboard" class="keyboard-holder"><xsl:comment>div for piano keyboard</xsl:comment></div>
|
---|
1686 |
|
---|
1687 | <div class="keyboard-options" style="color: white">
|
---|
1688 |
|
---|
1689 | <div style="float: left;">
|
---|
1690 | General Midi:
|
---|
1691 | <select ID="midi-sound" onchange="changeGMInstrument(this[selectedIndex].value)">
|
---|
1692 | <option value="0" selected="selected">Acoustic Grand Piano</option>
|
---|
1693 | <option value="19">Church Organ</option>
|
---|
1694 | <option value="24">Acoustic Guitar Nylon</option>
|
---|
1695 | <option value="30">Distortion Guitar</option>
|
---|
1696 | </select>
|
---|
1697 | </div>
|
---|
1698 |
|
---|
1699 | <div style="float: left;">
|
---|
1700 | Range [C<span ID="OCTAVE_LOWER">3</span>-B<span ID="OCTAVE_UPPER">5</span>]
|
---|
1701 | <input type="button" ID="-_OCTAVE" value="-" />
|
---|
1702 | <input type="button" ID="+_OCTAVE" value="+" /><br />
|
---|
1703 | <i>(Use left/right arrows to adjust with keyboard)</i>
|
---|
1704 | </div>
|
---|
1705 |
|
---|
1706 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1707 |
|
---|
1708 | <!--
|
---|
1709 | Sound
|
---|
1710 | <select ID="sound">
|
---|
1711 | <option value="0" selected="selected">Keyboard</option>
|
---|
1712 | <option value="1" selected="selected">Organ</option>
|
---|
1713 | <option value="2">Acoustic Guitar</option>
|
---|
1714 | <option value="3">EDM, bro!</option>
|
---|
1715 | </select>
|
---|
1716 | -->
|
---|
1717 | </div>
|
---|
1718 |
|
---|
1719 |
|
---|
1720 | </div>
|
---|
1721 |
|
---|
1722 | </div>
|
---|
1723 |
|
---|
1724 | <style>
|
---|
1725 | .drumcontainer {
|
---|
1726 | position: absolute;
|
---|
1727 | top: 50%;
|
---|
1728 | left: 50%;
|
---|
1729 | transform: translateX(-50%) translateY(-50%);
|
---|
1730 | -webkit-transform: translateX(-50%) translateY(-50%);
|
---|
1731 | font-size: 100%;
|
---|
1732 | color: #888888;
|
---|
1733 | pointer-events: none;
|
---|
1734 | }
|
---|
1735 | </style>
|
---|
1736 | <div id="drumkit-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
|
---|
1737 | <div id='jquery-drums' style="padding: 8px;">
|
---|
1738 | <center>
|
---|
1739 | <div style="display:inline-block;">
|
---|
1740 | <div style="position: relative;">
|
---|
1741 | <img style="position: relative;" width="148" height="148"
|
---|
1742 | src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
|
---|
1743 | <div class="drumcontainer" style="color: #555555">
|
---|
1744 | <span style="white-space: nowrap;"><Shift-C></span>
|
---|
1745 | </div>
|
---|
1746 | </div>
|
---|
1747 | </div>
|
---|
1748 | <div style="display:inline-block;">
|
---|
1749 | <div style="position: relative;">
|
---|
1750 | <img style="position: relative;" width="148" height="144"
|
---|
1751 | src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
|
---|
1752 | <div class="drumcontainer" >
|
---|
1753 | <span style="white-space: nowrap;"><Shift-V></span>
|
---|
1754 | </div>
|
---|
1755 | </div>
|
---|
1756 | </div>
|
---|
1757 | <div style="display:inline-block;">
|
---|
1758 | <div style="position: relative;">
|
---|
1759 | <img style="position: relative;" width="167" height="163"
|
---|
1760 | src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
|
---|
1761 | <div class="drumcontainer" >
|
---|
1762 | <span style="white-space: nowrap;"><Shift-B></span>
|
---|
1763 | </div>
|
---|
1764 | </div>
|
---|
1765 | </div>
|
---|
1766 | <div style="display:inline-block;">
|
---|
1767 | <div style="position: relative;">
|
---|
1768 | <img style="position: relative;" width="197" height="192"
|
---|
1769 | src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" />
|
---|
1770 | <div class="drumcontainer" >
|
---|
1771 | <span style="white-space: nowrap;"><Shift-N></span>
|
---|
1772 | </div>
|
---|
1773 | </div>
|
---|
1774 | </div>
|
---|
1775 | <div style="display:inline-block;">
|
---|
1776 | <div style="position: relative;">
|
---|
1777 | <img style="position: relative;" width="216" height="211"
|
---|
1778 | src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
|
---|
1779 | <div class="drumcontainer" >
|
---|
1780 | <span style="white-space: nowrap;"> <Space-M></span>
|
---|
1781 | </div>
|
---|
1782 | </div>
|
---|
1783 | </div>
|
---|
1784 | </center>
|
---|
1785 | </div>
|
---|
1786 |
|
---|
1787 | </div>
|
---|
1788 |
|
---|
1789 |
|
---|
1790 | <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
|
---|
1791 | <div style="color: white;">
|
---|
1792 | <div id="jamWrapper">
|
---|
1793 | <div id="jamStage">
|
---|
1794 | <xsl:comment><!--jamStage--></xsl:comment>
|
---|
1795 | </div>
|
---|
1796 | <div id="jamPlate">
|
---|
1797 | <xsl:comment><!--jamPlate--></xsl:comment>
|
---|
1798 | </div>
|
---|
1799 | <canvas id="jamStrings" width="750px" height="200px">
|
---|
1800 | Your browser does not support the Canvas element
|
---|
1801 | </canvas>
|
---|
1802 | </div>
|
---|
1803 | </div>
|
---|
1804 |
|
---|
1805 |
|
---|
1806 | <div style="position: relative; background-color: white;">
|
---|
1807 | <div style="display:inline-block; width: 150px; height: 200px;">
|
---|
1808 | <form style="position: absolute; top: 60px; left: 10px;">
|
---|
1809 |
|
---|
1810 | <fieldset>
|
---|
1811 | <legend id="clm-legend">Show Chords</legend>
|
---|
1812 |
|
---|
1813 | <div id="clm-div" class="radio-div">
|
---|
1814 |
|
---|
1815 | <div class="radio-label-combo">
|
---|
1816 | <span>
|
---|
1817 | <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"
|
---|
1818 | checked="checked"/>
|
---|
1819 | </span>
|
---|
1820 | <label for="clm-maj" class="radio-label">
|
---|
1821 | <span>
|
---|
1822 | Major
|
---|
1823 | </span>
|
---|
1824 | </label>
|
---|
1825 | </div>
|
---|
1826 |
|
---|
1827 | <div class="radio-label-combo">
|
---|
1828 | <span>
|
---|
1829 | <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"/>
|
---|
1830 | </span>
|
---|
1831 | <label for="clm-maj" class="radio-label">
|
---|
1832 | <span>
|
---|
1833 | Minor
|
---|
1834 | </span>
|
---|
1835 | </label>
|
---|
1836 | </div>
|
---|
1837 | </div>
|
---|
1838 | </fieldset>
|
---|
1839 | </form>
|
---|
1840 | </div>
|
---|
1841 |
|
---|
1842 | <div id="mytab" style="display:inline-block; height: 160px; width: 780px;">
|
---|
1843 | <svg class="graph" xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
|
---|
1844 | <g id="scaled-mytab-group" transform="scale(0.5,0.6)">
|
---|
1845 | <foreignobject id="scaled-mytab" width="2000px" height="300px"><xsl:comment>filler</xsl:comment></foreignobject>
|
---|
1846 | </g>
|
---|
1847 | </svg>
|
---|
1848 | </div>
|
---|
1849 | </div>
|
---|
1850 |
|
---|
1851 |
|
---|
1852 | </div>
|
---|
1853 |
|
---|
1854 | </div>
|
---|
1855 |
|
---|
1856 | <div style="position: absolute; top: -300px; background-color: white;">
|
---|
1857 | <style>
|
---|
1858 | .chordLineup {
|
---|
1859 | -webkit-transform-style: preserve-3d;
|
---|
1860 | -moz-transform-style: preserve-3d;
|
---|
1861 | transform-style: preserve-3d;
|
---|
1862 | }
|
---|
1863 |
|
---|
1864 | .chordLineupBlock {
|
---|
1865 | display: inline-block;
|
---|
1866 | }
|
---|
1867 |
|
---|
1868 | .chordLineupBlockVerticalCenter {
|
---|
1869 | position: relative;
|
---|
1870 | top: 50%;
|
---|
1871 | transform: translataeY(-50%);
|
---|
1872 | -webkit-transform: translataeY(-50%);
|
---|
1873 | -ms-transform: translataeY(-50%);
|
---|
1874 | }
|
---|
1875 |
|
---|
1876 | </style>
|
---|
1877 | <div id="offscreen-jtab-chord-lineup">
|
---|
1878 |
|
---|
1879 | <div id="offscreen-jtab-chord-C" class="chordLineupBlock">
|
---|
1880 | <xsl:comment>filler</xsl:comment>
|
---|
1881 | </div>
|
---|
1882 |
|
---|
1883 | <div class="chordLineupBlock">
|
---|
1884 | <div id="offscreen-jtab-chord-Db">
|
---|
1885 | <xsl:comment>filler</xsl:comment>
|
---|
1886 | </div>
|
---|
1887 | <div id="offscreen-jtab-chord-Cs">
|
---|
1888 | <xsl:comment>filler</xsl:comment>
|
---|
1889 | </div>
|
---|
1890 | </div>
|
---|
1891 |
|
---|
1892 | <div id="offscreen-jtab-chord-D" class="chordLineupBlock">
|
---|
1893 | <xsl:comment>filler</xsl:comment>
|
---|
1894 | </div>
|
---|
1895 |
|
---|
1896 | <div class="chordLineupBlock">
|
---|
1897 | <div id="offscreen-jtab-chord-Eb">
|
---|
1898 | <xsl:comment>filler</xsl:comment>
|
---|
1899 | </div>
|
---|
1900 | <div id="offscreen-jtab-chord-Ds">
|
---|
1901 | <xsl:comment>filler</xsl:comment>
|
---|
1902 | </div>
|
---|
1903 | </div>
|
---|
1904 |
|
---|
1905 | <div id="offscreen-jtab-chord-E" class="chordLineupBlock">
|
---|
1906 | <xsl:comment>filler</xsl:comment>
|
---|
1907 | </div>
|
---|
1908 |
|
---|
1909 | <div id="offscreen-jtab-chord-F" class="chordLineupBlock">
|
---|
1910 | <xsl:comment>filler</xsl:comment>
|
---|
1911 | </div>
|
---|
1912 |
|
---|
1913 | <div class="chordLineupBlock">
|
---|
1914 | <div id="offscreen-jtab-chord-Gb">
|
---|
1915 | <xsl:comment>filler</xsl:comment>
|
---|
1916 | </div>
|
---|
1917 | <div id="offscreen-jtab-chord-Fs">
|
---|
1918 | <xsl:comment>filler</xsl:comment>
|
---|
1919 | </div>
|
---|
1920 | </div>
|
---|
1921 |
|
---|
1922 | <div id="offscreen-jtab-chord-G" class="chordLineupBlock">
|
---|
1923 | <xsl:comment>filler</xsl:comment>
|
---|
1924 | </div>
|
---|
1925 |
|
---|
1926 | <div class="chordLineupBlock">
|
---|
1927 | <div id="offscreen-jtab-chord-Ab">
|
---|
1928 | <xsl:comment>filler</xsl:comment>
|
---|
1929 | </div>
|
---|
1930 | <div id="offscreen-jtab-chord-Gs">
|
---|
1931 | <xsl:comment>filler</xsl:comment>
|
---|
1932 | </div>
|
---|
1933 | </div>
|
---|
1934 |
|
---|
1935 | <div id="offscreen-jtab-chord-A" class="chordLineupBlock">
|
---|
1936 | <xsl:comment>filler</xsl:comment>
|
---|
1937 | </div>
|
---|
1938 |
|
---|
1939 | <div class="chordLineupBlock">
|
---|
1940 | <div id="offscreen-jtab-chord-Bb">
|
---|
1941 | <xsl:comment>filler</xsl:comment>
|
---|
1942 | </div>
|
---|
1943 | <div id="offscreen-jtab-chord-As">
|
---|
1944 | <xsl:comment>filler</xsl:comment>
|
---|
1945 | </div>
|
---|
1946 | </div>
|
---|
1947 |
|
---|
1948 | <div id="offscreen-jtab-chord-B" class="chordLineupBlock">
|
---|
1949 | <xsl:comment>filler</xsl:comment>
|
---|
1950 | </div>
|
---|
1951 |
|
---|
1952 | </div>
|
---|
1953 |
|
---|
1954 | <gsf:script>
|
---|
1955 | $(document).ready(function() {
|
---|
1956 |
|
---|
1957 | jtab.render($('#offscreen-jtab-chord-C') ,'C');
|
---|
1958 | jtab.render($('#offscreen-jtab-chord-Cs'),'C#');
|
---|
1959 | jtab.render($('#offscreen-jtab-chord-Db'),'Db');
|
---|
1960 | jtab.render($('#offscreen-jtab-chord-D') ,'D');
|
---|
1961 | jtab.render($('#offscreen-jtab-chord-Ds'),'D#');
|
---|
1962 | jtab.render($('#offscreen-jtab-chord-Eb'),'Eb');
|
---|
1963 | jtab.render($('#offscreen-jtab-chord-F') ,'F');
|
---|
1964 | jtab.render($('#offscreen-jtab-chord-Fs'),'F#');
|
---|
1965 | jtab.render($('#offscreen-jtab-chord-Gb'),'Gb');
|
---|
1966 | jtab.render($('#offscreen-jtab-chord-G') ,'G');
|
---|
1967 | jtab.render($('#offscreen-jtab-chord-Gs'),'G#');
|
---|
1968 | jtab.render($('#offscreen-jtab-chord-Ab'),'Ab');
|
---|
1969 | jtab.render($('#offscreen-jtab-chord-A') ,'A');
|
---|
1970 | jtab.render($('#offscreen-jtab-chord-As'),'A#');
|
---|
1971 | jtab.render($('#offscreen-jtab-chord-Bb'),'Bb');
|
---|
1972 | jtab.render($('#offscreen-jtab-chord-B') ,'B');
|
---|
1973 |
|
---|
1974 | $('#scaled-mytab').append($('#offscreen-jtab-chord-lineup'));
|
---|
1975 |
|
---|
1976 | console.log("!!!! forced background colour for F major in Guitar Tab area!!!")
|
---|
1977 | $('#builder_6').css("background-color","rgba(46,82,164,0.50)");
|
---|
1978 | });
|
---|
1979 | </gsf:script>
|
---|
1980 | </div>
|
---|
1981 |
|
---|
1982 | <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
|
---|
1983 |
|
---|
1984 | </div>
|
---|
1985 |
|
---|
1986 |
|
---|
1987 |
|
---|
1988 |
|
---|
1989 | <script>
|
---|
1990 | <xsl:text disable-output-escaping="yes">
|
---|
1991 | $(function(){
|
---|
1992 | transformToTurnstyleBlock("about");
|
---|
1993 |
|
---|
1994 | transformToTurnstyleBlock("video");
|
---|
1995 | transformToTurnstyleBlock("playlist");
|
---|
1996 |
|
---|
1997 | transformToTurnstyleBlock("piano");
|
---|
1998 | transformToTurnstyleBlock("drumkit");
|
---|
1999 | transformToTurnstyleBlock("guitar");
|
---|
2000 |
|
---|
2001 | transformToTurnstyleBlock("analysis");
|
---|
2002 |
|
---|
2003 | $('#video-openclose').trigger("click");
|
---|
2004 |
|
---|
2005 | });
|
---|
2006 | var piano_keyboard = new AudioSynthView();
|
---|
2007 | piano_keyboard.draw();
|
---|
2008 | </xsl:text>
|
---|
2009 | </script>
|
---|
2010 |
|
---|
2011 | </div>
|
---|
2012 |
|
---|
2013 | <div style="color: white">
|
---|
2014 | <!--
|
---|
2015 | Sound
|
---|
2016 | -->
|
---|
2017 | x
|
---|
2018 | </div>
|
---|
2019 |
|
---|
2020 | </div>
|
---|
2021 |
|
---|
2022 | <xsl:call-template name="audio-icon-cache"/>
|
---|
2023 |
|
---|
2024 | <hr/>
|
---|
2025 |
|
---|
2026 | </div>
|
---|
2027 | </xsl:template>
|
---|
2028 |
|
---|
2029 |
|
---|
2030 |
|
---|
2031 | <xsl:template name="song-ul">
|
---|
2032 |
|
---|
2033 | <xsl:variable name="httpCollection">
|
---|
2034 | <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
|
---|
2035 | </xsl:variable>
|
---|
2036 | <xsl:variable name="assocFilePath">
|
---|
2037 | <gsf:metadata name="assocfilepath" select="root"/>
|
---|
2038 | </xsl:variable>
|
---|
2039 | <xsl:variable name="Source">
|
---|
2040 | <gsf:metadata name="Source" select="root"/>
|
---|
2041 | </xsl:variable>
|
---|
2042 | <xsl:variable name="Audio">
|
---|
2043 | <gsf:switch>
|
---|
2044 | <gsf:metadata name="Audio" select="root"/>
|
---|
2045 | <gsf:when test="exists">
|
---|
2046 | <gsf:metadata name="Audio" select="root"/>
|
---|
2047 | </gsf:when>
|
---|
2048 | <gsf:otherwise>doc.ogg</gsf:otherwise>
|
---|
2049 | </gsf:switch>
|
---|
2050 | </xsl:variable>
|
---|
2051 | <xsl:variable name="streamableaudio">
|
---|
2052 | <gsf:switch>
|
---|
2053 | <gsf:metadata name="streamableaudio" select="root"/>
|
---|
2054 | <gsf:when test="exists">
|
---|
2055 | <gsf:metadata name="streamableaudio" select="root"/>
|
---|
2056 | </gsf:when>
|
---|
2057 | <gsf:otherwise>doc.mp3</gsf:otherwise>
|
---|
2058 | </gsf:switch>
|
---|
2059 | </xsl:variable>
|
---|
2060 |
|
---|
2061 | <xsl:variable name="streamablevideo">
|
---|
2062 | <gsf:metadata name="Source"/>
|
---|
2063 | </xsl:variable>
|
---|
2064 |
|
---|
2065 | <gsf:variable name="cgiargFrameOffset">
|
---|
2066 | <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameOffset']/@value"/>
|
---|
2067 | </gsf:variable>
|
---|
2068 | <gsf:variable name="cgiargFrameLength">
|
---|
2069 | <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.frameLength']/@value"/>
|
---|
2070 | </gsf:variable>
|
---|
2071 | <xsl:variable name="cgiargYScaleSimImg">
|
---|
2072 | <xsl:choose>
|
---|
2073 | <xsl:when test="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value != ''">
|
---|
2074 | <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.yScaleSimImg']/@value"/>
|
---|
2075 | </xsl:when>
|
---|
2076 | <xsl:otherwise>0.5</xsl:otherwise>
|
---|
2077 | </xsl:choose>
|
---|
2078 | </xsl:variable>
|
---|
2079 |
|
---|
2080 | <!--
|
---|
2081 | CAA = Content Analysis Algorithm
|
---|
2082 | -->
|
---|
2083 | <xsl:variable name="cgiargCAAlgorithm">
|
---|
2084 | <xsl:choose>
|
---|
2085 | <xsl:when test="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value != ''">
|
---|
2086 | <xsl:value-of select="/page/pageRequest/paramList/param[@name='p.caAlgorithm']/@value"/>
|
---|
2087 | </xsl:when>
|
---|
2088 | <xsl:otherwise>1</xsl:otherwise>
|
---|
2089 | </xsl:choose>
|
---|
2090 | </xsl:variable>
|
---|
2091 |
|
---|
2092 |
|
---|
2093 | <!--
|
---|
2094 | ***
|
---|
2095 | -->
|
---|
2096 | <!--
|
---|
2097 | Main Audio Player
|
---|
2098 | -->
|
---|
2099 | <!--
|
---|
2100 | ***
|
---|
2101 | -->
|
---|
2102 | <ul class="playlist">
|
---|
2103 | <li class="rounded">
|
---|
2104 | <gsf:script src="{$httpCollection}/script/hybrid-audio-player.js"/>
|
---|
2105 | <a href="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" id="mysong" onclick="togglePlayVisual(document.getElementById('mainPlayButton'))" style="padding-bottom: 2px;">
|
---|
2106 | <span><img height="32" id="mainPlayButton" onclick="var event = arguments[0] || window.event; togglePlay(event,this)" onmouseout="playHighlightOff(this)" onmouseover="playHighlightOn(this)" src="ext/diy-audio-player/images/play32.png" style="vertical-align: middle;" width="32"/>Play/Pause<span id="extraPlayText"/></span>
|
---|
2107 | </a>
|
---|
2108 | <gsf:script src="ext/diy-audio-player/script/audioDB-play.js"/>
|
---|
2109 | <xsl:choose>
|
---|
2110 | <xsl:when test="($cgiargFrameOffset != '-1') and ($cgiargFrameOffset != '')">
|
---|
2111 | <div style="background-color: rgb(40%,40%,20%)">
|
---|
2112 | <script type="text/javascript">
|
---|
2113 | <xsl:text disable-output-escaping="yes">var frameOffsetStr=gs.variables.cgiargFrameOffset;
|
---|
2114 | var frameLength=gs.variables.cgiargFrameLength;</xsl:text>
|
---|
2115 | </script>
|
---|
2116 | <svg height="24" id="svgAudioDBSegments" onLoadXX="svgAudioDBInit()" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
|
---|
2117 | </svg> </div>
|
---|
2118 | </xsl:when>
|
---|
2119 | </xsl:choose>
|
---|
2120 | <xsl:call-template name="structuredAudioPlayerBlock"/>
|
---|
2121 | <xsl:call-template name="processingPopup"/>
|
---|
2122 | <div id="doublePlay" style="width: 100%; display: none;">
|
---|
2123 | <script type="text/javascript">
|
---|
2124 | <xsl:text disable-output-escaping="yes">// At time of writing this code, this needs to be an OGG file to work in Firefox
|
---|
2125 | var source = "</xsl:text>
|
---|
2126 | <gsf:metadata name="Audio" select="root"/>
|
---|
2127 | <xsl:text disable-output-escaping="yes">";
|
---|
2128 |
|
---|
2129 | var self_sim_png = source.replace(/\.(ogg|mp3|wav)$/,".png");
|
---|
2130 | var collect = "</xsl:text>
|
---|
2131 | <xsl:value-of select="/page/pageResponse/collection/@name"/>
|
---|
2132 | <xsl:text disable-output-escaping="yes">";
|
---|
2133 | var site = "</xsl:text>
|
---|
2134 | <xsl:value-of select="$site_name"/>
|
---|
2135 | <xsl:text disable-output-escaping="yes">";</xsl:text>
|
---|
2136 | </script>
|
---|
2137 | <gsf:script src="ext/diy-audio-player/script/similarity-matrix-play.js"/>
|
---|
2138 | <audio controls="controls" id="leftsong" style="width: 49%;">
|
---|
2139 | <!--
|
---|
2140 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
|
---|
2141 | -->
|
---|
2142 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
|
---|
2143 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
|
---|
2144 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
|
---|
2145 | </audio>
|
---|
2146 | <audio controls="controls" id="rightsong" style="width: 49%;">
|
---|
2147 | <!--
|
---|
2148 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" />
|
---|
2149 | -->
|
---|
2150 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
|
---|
2151 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
|
---|
2152 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
|
---|
2153 | </audio>
|
---|
2154 | </div>
|
---|
2155 | <!--
|
---|
2156 | Real Time Analysis (RTA) audio
|
---|
2157 | -->
|
---|
2158 | <div style="width: 100%;">
|
---|
2159 | <audio id="rta-audio-element" style="width: 100%;">
|
---|
2160 | <!--
|
---|
2161 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg"/>
|
---|
2162 | -->
|
---|
2163 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}"/>
|
---|
2164 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}"/>
|
---|
2165 | <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav"/>
|
---|
2166 | </audio>
|
---|
2167 | </div>
|
---|
2168 | <!--
|
---|
2169 | <xsl:call-template name="workflow-block"/>
|
---|
2170 | -->
|
---|
2171 | <div id="controlMarker">
|
---|
2172 | <xsl:comment> filler</xsl:comment>
|
---|
2173 | </div>
|
---|
2174 | <span class="ui-state-default ui-corner-top" id="overlayNewNotes" style="font-size:90%; padding: 3px; cursor:pointer;">New Annotation</span>
|
---|
2175 | <div id="svg-canvas-overlay" style="position: relative">
|
---|
2176 | <!--
|
---|
2177 | drawing canvas
|
---|
2178 | -->
|
---|
2179 | <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
|
---|
2180 | <div style="position: relative">
|
---|
2181 | <div>
|
---|
2182 | <!--
|
---|
2183 | **** better if 100% width, but issue with JS reading these values ???
|
---|
2184 | -->
|
---|
2185 | <canvas height="494" id="freq-plot" style="background-color: #cccccc;" width="941"/>
|
---|
2186 | </div>
|
---|
2187 | </div>
|
---|
2188 | </div>
|
---|
2189 | <div style="width: 100%; position: absolute; left: 0px; top: 0px;">
|
---|
2190 | <div style="position: relative">
|
---|
2191 | <div>
|
---|
2192 | <!--
|
---|
2193 | **** better if 100% width, but issue with JS reading these values ???
|
---|
2194 | -->
|
---|
2195 | <canvas height="494" id="freq-plot-labels" style="background-color: transparent" width="941"/>
|
---|
2196 | </div>
|
---|
2197 | </div>
|
---|
2198 | </div>
|
---|
2199 | <div style="width: 100%; position: absolute; left: 0px; top: 0px; display: none;">
|
---|
2200 | <div style="position: relative">
|
---|
2201 | <div>
|
---|
2202 | <!--
|
---|
2203 | **** better if 100% width, but issue with JS reading these values ???
|
---|
2204 | -->
|
---|
2205 | <canvas height="494" id="selfsim-plot" style="background-color: #0000cc;" width="941"/>
|
---|
2206 | </div>
|
---|
2207 | </div>
|
---|
2208 | </div>
|
---|
2209 | <!--
|
---|
2210 | left/right-mix circle cursor
|
---|
2211 | -->
|
---|
2212 | <div style="background-color: transparent; position: relative; left: 0px; top: 0px;">
|
---|
2213 | <svg id="svgSimilarityPlay" onLoad="svgInitSimilarityPlay()" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
---|
2214 | <g id="simPlayLineGroup" transform="scale(1.0,{$cgiargYScaleSimImg})">
|
---|
2215 | <!--
|
---|
2216 | image loaded here, with yScaleSimImg applied to group
|
---|
2217 | -->
|
---|
2218 | </g> <g id="playtracker" onclick="dualPlay(evt)" onmousemove="playTrackerMove(evt)" onmouseout="playTrackerOff(evt)" style="visibility: hidden" transform="translate(0,0)">
|
---|
2219 | <circle cx="0" cy="0" fill="rgba(100%,100%,50%,0.7)" r="20" stroke="black" stroke-width="1"/>
|
---|
2220 | <circle cx="0" cy="0" fill="black" r="1" stroke="black" stroke-width="1"/>
|
---|
2221 | <g style="visibility: hidden;" transform="translate(-15,-15)">
|
---|
2222 | <image height="30" id="playtrackerBusy" width="30" xlink:href="ext/diy-audio-player/images/wait30trans.gif"/>
|
---|
2223 | </g>
|
---|
2224 | <g>
|
---|
2225 | <g transform="rotate(-90)">
|
---|
2226 | <g transform="translate(-20,-25)">
|
---|
2227 | <text id="rightTime" style="font-size: 80%;">L: secs</text>
|
---|
2228 | </g>
|
---|
2229 | </g>
|
---|
2230 | <g transform="translate(-20,30)">
|
---|
2231 | <text id="leftTime" style="font-size: 80%;">R: secs</text>
|
---|
2232 | </g>
|
---|
2233 | </g>
|
---|
2234 | </g>
|
---|
2235 | </svg>
|
---|
2236 | </div>
|
---|
2237 | <gsf:variable-array name="salami.overlayNote">
|
---|
2238 | <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/>
|
---|
2239 | </gsf:variable-array>
|
---|
2240 | <!--
|
---|
2241 | onclick="var event = arguments[0] || window.event; dualPlay(event)"
|
---|
2242 | onmousemove="var event = arguments[0] || window.event; playTrackerMove(event)"
|
---|
2243 | onmouseout="var event = arguments[0] || window.event; playTrackerOff(event)"
|
---|
2244 | -->
|
---|
2245 | <div id="noteOverlay" style="width: 100%; height: 494px; position: absolute; left: 0px; top: 0px; background-color: transparent;"> </div> <gsf:script>$(window).load(function(){
|
---|
2246 | // **** currently supressed for respooled!!!!
|
---|
2247 | //var overlayNotes = new OverlayNotes("noteOverlay","salami.overlayNote");
|
---|
2248 | //$('#overlayNewNotes').click(function() {overlayNotes.AddNote()});
|
---|
2249 | //addStatusBar();
|
---|
2250 | });</gsf:script>
|
---|
2251 | </div>
|
---|
2252 | <!--
|
---|
2253 | end of svg-canvas-overly
|
---|
2254 | -->
|
---|
2255 | <xsl:call-template name="visualization-mode-block"/>
|
---|
2256 | </li>
|
---|
2257 | </ul>
|
---|
2258 |
|
---|
2259 | </xsl:template>
|
---|
2260 |
|
---|
2261 | </xsl:stylesheet>
|
---|