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

Revision 29893, 72.0 KB (checked in by davidb, 4 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
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 browser.