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