source: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl@ 29893

Last change on this file since 29893 was 29893, checked in by davidb, 9 years ago

Completed version of Krumhansl's algorithm. Plus adding in of About bar. Plus tidy up of the 'by xxx' template

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