Changeset 28593
- Timestamp:
- 2013-11-02T23:05:23+13:00 (10 years ago)
- Location:
- main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/about.xsl
r28433 r28593 47 47 48 48 49 <script src="{$httpPath}/script /browser-detect.js" type="text/javascript">49 <script src="{$httpPath}/script2/browser-detect.js" type="text/javascript"> 50 50 /* space filler needed */ 51 51 </script> … … 55 55 56 56 57 <h2> A Musical Web Observatory:</h2>57 <h2>I Can't <i>Believe</i> It's All Javascript!</h2> 58 58 59 <h3><i><font size="+2">Connecting People with Data, Documents, and Algorithms</font></i></h3> 60 59 <!-- 61 60 <div style="background-color: #DD3611; color: white; padding: 4pt; margin-bottom: 6pt;"> 62 61 <table> … … 139 138 </table> 140 139 </div> 140 --> 141 141 142 <p class="about">This project is currently work in progress. The sequence of development so far has been: 142 <p class="about">A music DL collection that explores what is possible with only client-side processing. 143 143 144 144 145 <style> … … 149 150 150 151 <ol> 151 <li>152 <i>Starting point:</i> Manual (command-line) aggregation of disparate153 resources prior to building the DL. A set of bespoke Greenstone154 document processing plugins corrals the heterogeneous gathered155 data into a unified (homogeneous) canonical form that the DL can156 access and display. Everything presented in the DL is157 either pre-computed (such as the self-similarity heat-maps) or else158 computed at build-time.159 </li>160 161 <li>162 <i>Audio-fingerprinting:</i> as before, but now metadata about the audio163 songs is now enriched through a set of audio-fingerprinting web164 services. Everything presented in the DL is still pre-computed165 or else computed at build-timeâhowever, the inclusion in the document166 view of a "Discovery" block allows a user to begin to167 access and explore through linked-data, information related to168 the song.169 </li>170 171 <li>172 <i>Client-side audio processing (and visualization):</i> the173 Pre-computed self-similarity heat-maps are dropped from the174 collection building process in preference for the same information175 being computed through Javascript running in the user's web176 browser.177 </li>178 179 <li>180 <i>Embedded Meandre workflows:</i> the Meandre Workbench is181 integrated into Greenstone. Audio documents in the Greenstone182 digital library can now be dispatched and be processed by the183 selected Meandre, and output from the workflow returned to the184 Greenstone document viewâfor example, playing audio that has been185 processed and output from the workflow.186 </li>187 152 188 153 <li> … … 193 158 194 159 <li> 195 <i>Client/Server hybrid workflows:</i> the Greenstone/Meandre 196 integration is extended to support the dynamic 197 transmission of <tt>executeCallBack()</tt> methods written 198 in the user's browser in Javascript to be run on the 199 Meandre server as part of the active workflow. 200 </li> 201 202 <li> 203 <i>Forging ahead:</i> the next area to be worked on is upgrading 204 the level of Greenstone/Meandre integration so that data produced 205 by the workflows can be incorporated back into the underlying 206 digital library itself, rather than being (as it currently stands) 207 transitory data that only lives for the duration of the web page 208 being viewed. This will form an implementation stepping-stone to 209 a more generalized ability to have data retrieved from other 210 external resources (located through the Discovery block 211 linked-data portion of the document view) ingested in to the DL 212 collection. 160 <i>Visualization:</i> the 161 Pre-computed self-similarity heat-maps are dropped from the 162 collection building process in preference for the same information 163 being computed through Javascript running in the user's web 164 browser. 213 165 </li> 214 166 215 167 168 <li> 169 <i>Annotation:</i> ... 170 171 </li> 216 172 </ol> 217 173 218 174 </p> 219 175 220 221 222 <!--223 224 <p class="about">This digital library collection demonstrates the225 integration of a variety of sources of structural metadata from both226 automatically derived content analysis and manually labelled227 ground-truth data to form a rich interactive web application suitable228 for musicologists (as the target end-users) to explore a collated set229 of music files.</p>230 231 <p class="about">While the base digital library system, <a232 href="http://www.greenstone.org" target="_blank">Greenstone</a>, is233 designed to operate with any web browser, the audio features this234 particular DL collection demonstrates relies on audio processing235 features currently only available in Firefox. Using one of the other236 web browsers you will be able to access most features of the digital237 library collection, but when you access a particular song you may find238 playing the audioâin particular the panned audio239 effectâdoes not work.</p>240 -->241 242 243 <!--244 <p class="about">The developed system combines the open source capabilities of245 Greenstone, \cite{Greenstone}, NEMA \cite{Nema}, Salami \cite{Salami},246 and AudioDB \cite{AudioDB}.247 248 %%249 NEMA and Salami have been previously described in this article, and contribute250 manual and audio content based metadata.251 %%252 AudioDB is a raw-audio content based searching algorithm based on Local-Sensitivity Hashing \cite{LSH}.253 %%254 Greenstone is a versatile digital library architecture with an255 extensible service-based architecture that. In256 addition to the text-based searching and browsing capability to257 organize content, Greenstone provides the framework in which to harness the258 structural metadata from NEMA and Salami, and the audio-content based259 search functionality of audioDB.260 261 -->262 263 264 265 <h3>A Walkthrough</h3>266 267 268 <p class="about">The following walkthrough is for the initial incarnation of the DL collection, where all269 the information presented is either precomputed or computed at build time.</p>270 271 <p class="about">Taking as a starting point a set of music files identified as worthy272 of study, the <a href="#browse">figure below</a> shows the result of browsing273 the formed digital library collection <a href="dev?a=b&rt=s&s=ClassifierBrowse&c=salami-audioDB&cl=CL1" target="_blank">by title</a> from a web browser.274 The figure is a useful snapshot in which to orientate ourselves with275 the main structure and features to the digital library. Functionality that276 persistently reoccurs is accessible through the header to the page.</p>277 278 <p class="about">This includes:279 <ul>280 281 <li>help and preferences (top-right);</li>282 <li>a quick-search option (located just283 below) with links to more sophisticated searching options; and</li>284 <li>pin-pointing where within the site a user is currently located285 (top-left).</li>286 </ul>287 288 289 <a name="browse" />290 <table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">291 <tr>292 <td style="border: solid 1px;">293 <img style="width: 700px" src="{$httpPath}/images/figs/cropped/salami-browse.png" />294 </td>295 </tr>296 <tr style="background-color: #bbeebb">297 <td>298 <i>Browsing in the digital library299 <a href="dev?a=b&rt=s&s=ClassifierBrowse&c=salami-audioDB&cl=CL1" target="_blank">by titles</a>.</i>300 </td>301 </tr>302 </table>303 304 305 The specific content to this location within the site (in this case306 browsing by title) is shown beneath the main banner. Various307 groupings of title can be accessed by clicking on the bookshelf icons308 vertically aligned as the main part of the page: currently <a309 href="dev?a=b&rt=s&s=ClassifierBrowse&c=salami-audioDB&cl=CL1#CL1.2">CâD</a>310 is open, with the remaining letters to the alphabet below this,311 accessed through scrolling.</p>312 313 314 315 316 <p class="about">Interested in the song <i>Candela</i> our curious musicologist clicks317 on <a href="dev?a=d&ed=1&book=off&c=salami-audioDB&d=D145&dt=simple&sib=1&p.a=b&p.sa=&p.s=ClassifierBrowse" target="_blank">the link for this</a>. This brings up the document view to this song:</p>318 319 <a name="self-similarity" />320 <table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">321 <tr>322 <td style="border: solid 1px;">323 <img style="width: 700px" src="{$httpPath}/images/figs/cropped/salami-self-similarity2.png" />324 </td>325 </tr>326 <tr style="background-color: #bbeebb">327 <td>328 <i>The <a href="dev?a=d&ed=1&book=off&c=salami-audioDB&d=D145&dt=simple&sib=1&p.a=b&p.sa=&p.s=ClassifierBrowse" target="_blank">musicologically enriched document view</a> for</i> Candela.329 </td>330 </tr>331 </table>332 333 <p class="about">Normally in a digital334 library the document view brings up a page that is strongly derived335 from textual metadata. If the document viewed was a text-document,336 some summary information such as title and author is typically337 presented, say in tabular form, before the main text is presented.338 Even in the case of multimedia digital libraries, the view presented339 is still strongly derived from textual metadata: this time including340 details such as the length of the video, the TV company that produced341 it, whether captions are available, and so forth, accompanied with an342 embedded video player for viewing the contentâessentially more343 textual metadata (in this case the URL to the video content) which in344 terms of the user-interface is largely divorced from the other345 elements displayed on the page.</p>346 347 <p class="about">This contrasts sharply with the document view developed in this348 digital library.349 Naturally it allows the song to be played (akin to the embedded video player),350 however this is largely of secondary importance to the351 other functionality available this is much more closely352 integrated.</p>353 354 <p class="about">The most striking visual component to the document view is a355 self-similarity "heat map" where the duration of the song forms both356 the <i>x</i>- and <i>y</i>-axis, and a red pixel located at a given <i>(x,y)</i>357 co-ordinate in the map represents a location where two parts of the358 song are strongly similar, proportionally shifting to blue to359 represent dissimilar. Given this configuration, the leading diagonal360 to the matrix (<i>x=y</i>) is always coloured red as this represents the361 comparison of one part of the song with itself.</p>362 363 <p class="about">When the user moves the mouse cursor around the self-similarity map364 a highlighting circle is shown to emphasize the area the user is over,365 with a black dot at the centre (visible in in366 the <a href="#self-similarity">above figure</a>); annotated vertically367 and horizontally are the two time-offsets in seconds that that point368 in the map corresponds to. Clicking the cursor at this point results369 in the audio being played <i>simultaneously</i> from these two points.370 To aid the musicologist in listening to the two parts of the song, one371 part is panned to the left speaker, and the other to the right (this372 was implemented using the extended audio API provided by Firefox, and373 so this particular feature only work when viewing the collection with374 this browserâsee implementation details below). In our figure,375 the musicologist has zeroed in the location <i>x=33</i>, <i>y=97</i>376 which corresponds to the start of a strong red diagonal that occurs377 some distance off the leading diagonal. Listening to the two sounds378 played (most reliably done with headphones on), they hear that these379 two sections of the song are indeed repeating sections of the guitar380 piece <i>Candela</i> with a minor variation in the latter section381 where a recorder is also playing in the arrangement.</p>382 383 <p class="about">The structured audio time-lines (labelled A, B, ..., and 6, 5, 2,384 ... in the figure) located above the self-similarity map are another385 area of enriched musical content in the digital library. The upper386 line shows the ground-truth data for this song generated by387 the <a href="http://www.music-ir.org/?q=node/14" target="_blank">Salami project</a>;388 the lower line is generated by an algorithmically based content389 analysis algorithm.</p>390 391 <p class="about">While there is some agreement between these two lines, there are392 also significant differences. The play and search buttons within the393 structured time-lines (the latter represented by a magnifying glass)394 allow the user to investigate further these structures. We shall395 return to the search functionality shortly (which is content based,396 using <a href="http://omras2.doc.gold.ac.uk/software/audiodb/" target="_blank">AudioDB</a>),397 but in the meantime note that with the time-lines positioned above the398 self-similarity map, there is further opportunity to study the399 differences between the two structured time-line. It is certainly the400 case that there are strong visual cues in the map that line up with401 the algorithmic time-line, even though they do not align with a402 boundary in the ground-truth data, and the user can click on these403 parts of the similarity map to hear what is occurring at these404 points.</p>405 406 407 408 <a name="resultspage" />409 <table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">410 <tr>411 <td style="border: solid 1px;">412 <img style="width: 350px" src="{$httpPath}/images/figs/cropped/salami-audiodb-search-resultspage-halfcut.png" />413 </td>414 <td style="border: solid 1px;">415 <img style="width: 350px" src="{$httpPath}/images/figs/cropped/salami-structured-search-resultspage-halfcut.png" />416 </td>417 </tr>418 <tr style="background-color: #bbeebb">419 <td colspan="2">420 <i>Audio content based search results: left) the421 <a href="dev?a=q&sa=&rt=rd&s=AudioQuery&c=salami-audioDB&startPage=1&s1.maxDocs=100&s1.hitsPerPage=20&q=D206.dir&s1.query=D206.dir&s1.offset=263&s1.length=24&mysongWindowDuration=6" target="_blank">result list</a> from422 an audio content based query taken from an extract of </i>423 Michelle; <i>and right)424 the <a href="dev?a=q&sa=&rt=rd&s=TextQuery&c=salami-audioDB&startPage=1&s1.query=%22b+b+c+b+c%22&s1.index=JS" target="_blank">result of a structured music search</a> for425 content containing "b b c b a" as a sequence.</i>426 </td>427 </tr>428 </table>429 430 <p class="about">Returning to the search capability provided by the structured431 time-lines, the <a href="#resultspage">above figure (left)</a> show the result of432 using this feature while study the song <i>Michelle</i> by The433 Beatles. In this case the user selected the section of the434 ground-truth time-line corresponding to section starting "I want you435 ...", but could have equally used the algorithmically calculated436 time-line, or in fact paused the song playing at any point, and437 started a match from there.</p>438 439 440 <p class="about">Not surprisingly <i>Michelle</i> is returned as the top hit (at441 92.1%)âwe shall see shortly that this is because the system found442 several sections of the song that matched thisâthe next hit being443 <i>Bigger Than JC</i> at 74.4%, and so on down, where only one hit444 per song occurs. Clicking on the top hit,445 the <a href="#audiodb">figure below</a> shows the document view that is446 displayed, focusing in on the key area to this screen. This time the447 time-line area has an additional bar: the points within the song that448 AudioDB found to be similar. Like the other time-lines, a play button449 is present on these segments so the user can play the matching points450 directly. In this case451 clicking on them reveals the matching sections found correspond to452 melodically repeating sections of the song, only with different lyrics453 ("I love you ..." and "I need you ...").</p>454 455 456 <p class="about">A further form of musical content-based searching is available through457 the main header to the digital library. Instead of searching by title458 or artist (which are also available) the user can click on this459 "search by" menu next to the quick-search text box and select460 "ground-truth structure" instead.461 The <a href="#resultspage">figure above</a> (right) shows the result of using this462 option, where the user has entered "b b c b c" as the query, in463 other words searching for songs that have two sections in a row the464 same, then a new section, then returning to the original section,465 before progressing to a recurrence of the second distinct section. In466 pop and rock music this is a popular sequence corresponding to verse,467 verse, chorus, verse, chorus. A more intriguing framing of a query468 along these linesâequally possible in the digital libraryâwould be469 to go to the fielded search page (accessible through the <i>advanced470 search</i> link below the quick-search box, and entered the same471 music structure query, but this time combine it with other fielded472 query terms (Genre=Blues OR Jazz, Year<1950). Results from this473 query would let the musicologist explore potential evidence of this474 pattern of sections being used in two of the key musical genres that475 influenced the development of Rock and Roll music.</p>476 477 478 <a name="audiodb" />479 <table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">480 <tr>481 <td style="border: solid 1px;">482 <img style="width: 700px" src="{$httpPath}/images/figs/cropped/salami-audiodb-search2.png" />483 </td>484 </tr>485 <tr style="background-color: #bbeebb">486 <td>487 <i>The document view for</i> Michelle <i><a href="dev?a=d&c=salami-audioDB&d=D206&dt=simple&p.frameOffset=133,393,264,262,392&p.frameLength=24&p.a=q&p.s=AudioQuery&hl=on&ed=1#D206" target="_blank">augmented with the locations of the matches</a> of the audio query.</i>488 </td>489 </tr>490 </table>491 492 493 494 495 <h3>Implementation details</h3>496 497 <p class="about">The core part of the interactive elements in the document view were498 implemented using SVG combined with Javascript. The left- and499 right-panning interactively available from the self-similarity map was500 implemented by processing the raw audio stream, made accessible by the501 Firefox Audio extension502 <a href="https://wiki.mozilla.org/Audio_Data_API" target="_blank">API</a>.</p>503 504 <p class="about">AudioDB content based searching was integrated into Greenstone through505 two components of the digital library software architecture: its506 build-time document processing plugin system, and its runtime507 message-passing service-base framework. The developed plugin accepts508 a wide range of audio formats (including OGG and MP3), and converts509 them to WAV, the format needed by AudioDB for processing. The new510 search service took the form of a proxy, accepting messages in the511 XML syntax used by Greenstone, turning them into the necessary calls512 to the AudioDB command-line interface, and then converting the output513 from AudioDB back into the XML syntax expected by the digital library514 architecture. Finally, the two parts were packaged to operate as a515 Greenstone extension; the software is available at:516 <a href="http://trac.greenstone.org/gs3-extensions/audioDB/trunk/src" target="_blank">http://trac.greenstone.org/gs3-extensions/audioDB/trunk/src</a>.</p>517 176 518 177 </div> -
main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/document.xsl
r28433 r28593 77 77 <xsl:template name="javascript-dsp-header"> 78 78 <gsf:script src="ext/js-dsp/dsp-custom.js"/> 79 <gsf:script src="ext/js-dsp/dsp.js"/> 79 80 <gsf:script src="ext/js-dsp/chroma-transform.js"/> 80 81 <gsf:script src="ext/js-dsp/frequency-plotter.js"/> … … 99 100 height: 100%; 100 101 position: absolute; 101 z-index: 10 ;102 z-index: 10000; 102 103 left: 0px; 103 104 top: 0px; … … 168 169 169 170 </xsl:template> 171 172 170 173 171 174 <xsl:template name="fingerprintMetadataBlock"> … … 218 221 <tr valign="top"> 219 222 <td>Artist Summary</td> 220 <td><i><gsf:metadata name="LastFM.LastFMArtistWikiSummary"/></i></td> 223 <td> 224 <i> 225 <gsf:script> 226 var summary = gs.documentMetadata["LastFM_LastFMArtistWikiSummary"]; 227 228 document.write(summary.replace("\n","<br />")); 229 230 </gsf:script> 231 </i> 232 </td> 221 233 </tr> 222 234 … … 265 277 --> 266 278 267 <table >279 <table style="width: 100%;"> 268 280 <tr> 269 <td >281 <td style="width: 200px;"> 270 282 MusicBrainz song id: 271 283 </td> 272 284 <td> 273 <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz" >285 <a href="http://dbtune.org/musicbrainz/resource/track/{$musicbrainzsongid}" target="#musicbrainz" class="external"> 274 286 <xsl:copy-of select="$musicbrainzsongid"/> 275 287 </a> … … 282 294 </td> 283 295 <td> 284 <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz" >296 <a href="http://dbtune.org/musicbrainz/resource/record/{$musicbrainzalbumid}" target="#musicbrainz" class="external"> 285 297 <xsl:copy-of select="$musicbrainzalbumid"/> 286 298 </a> … … 293 305 </td> 294 306 <td> 295 <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz" >307 <a href="http://dbtune.org/musicbrainz/page/artist/{$musicbrainzartistid}" target="#musicbrainz" class="external"> 296 308 <xsl:copy-of select="$musicbrainzartistid"/> 297 </a>298 </td>299 </tr>300 <tr>301 <td colspan="2">302 <a href="{$lastfmtrackurl}" target="#lastfm">303 <xsl:copy-of select="$lastfmtrackurl"/>304 309 </a> 305 310 </td> … … 310 315 </td> 311 316 <td> 312 <a href="{$echonestsongid}" target="#echonestsongid"> 317 <a href="http://developer.echonest.com/api/v4/song/profile?api_key=8WNR9XTGCODO9G4YG&format=xml&id={$echonestsongid}" target="#echonestsongid" class="external"> 318 319 320 313 321 <xsl:copy-of select="$echonestsongid"/> 314 322 </a> 315 323 </td> 316 324 </tr> 325 <tr> 326 <td colspan="2"> 327 <i> 328 <a href="{$lastfmtrackurl}" target="#lastfm" class="external"> 329 <xsl:copy-of select="$lastfmtrackurl"/> 330 </a> 331 </i> 332 </td> 333 </tr> 317 334 </table> 318 335 … … 330 347 <!-- * Audio Player --> 331 348 <!-- *** --> 332 333 349 334 350 <xsl:template name="js-mad-header"> … … 379 395 380 396 397 381 398 <xsl:template name="audio-icon-cache"> 382 399 <div style="display:none;"> … … 479 496 </div> 480 497 481 <gsf:script src="{$httpCollection}/script /meandre-workflow/chromagram.js"/>482 <gsf:script src="{$httpCollection}/script /meandre-workflow/js-dynamic-mix.js"/>498 <gsf:script src="{$httpCollection}/script2/meandre-workflow/chromagram.js"/> 499 <gsf:script src="{$httpCollection}/script2/meandre-workflow/js-dynamic-mix.js"/> 483 500 484 501 <gsf:script> … … 611 628 <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;"> 612 629 613 <span class="vi x-heading">Max Values:</span>630 <span class="vis-heading">Max Values:</span> 614 631 <div style="padding-left: 8px"> 615 632 <style> … … 657 674 --> 658 675 676 677 659 678 <form style="padding-left: 8px; padding-bottom: 0px;"> 660 <span class="vis-heading">On Pause:</span> 661 <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix 679 <div style="float: left;"> 680 <input type="checkbox" name="similarityMatrix" onclick="plotSimilarityMatrixWhenPaused(this)"/>Show Similarity Matrix 681 </div> 682 <div style="float: left; padding-left: 140px;"> 683 <span class="vis-heading">Accelerated Processing:</span> 684 <input type="checkbox" name="acceleratedProcessingInput" onclick="acceleratedProcessingCheckbox(this)"/>> realtime 685 <span id="accProcStatus"></span> 686 </div> 687 662 688 </form> 689 <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div> 690 663 691 <hr/> 664 692 665 693 </div> 666 694 667 </xsl:template> 695 <xsl:call-template name="graphic-equalizers"/> 696 </xsl:template> 697 698 699 <xsl:template name="graphic-equalizers"> 700 701 702 <gsf:style > 703 .control { 704 padding: 5px; 705 border: 1px solid #CCC; 706 background-color: #EEE; 707 float: left; 708 margin-right: 5px; 709 710 } 711 712 .inner-control { 713 background-color: #DDD; 714 } 715 716 .control div { 717 max-width: 400px; 718 } 719 720 .control table td { 721 padding: 5px; 722 width: 25px; 723 color: #999; 724 font-size: 12px; 725 } 726 .control h3 { 727 margin: 0; 728 padding:0; 729 font-size: 12px; 730 margin-bottom: 10px; 731 } 732 .control #debug { 733 border: 1px inset #ccc; 734 background-color: #FFF; 735 font-size: 12px; 736 width: 300px; 737 padding: 10px; 738 } 739 .slider { 740 margin-bottom: 16px; 741 width: 8px; 742 } 743 /* 744 .geq-bar { 745 width: 34px; 746 } 747 */ 748 749 /* 750 .ui-button { 751 font-size: xx-small; 752 } 753 */ 754 .ui-slider .ui-slider-handle { 755 width: 8px; 756 margin-left: 3px; 757 } 758 </gsf:style> 759 760 761 762 <gsf:script> 763 <![CDATA[ 764 765 var grapheqL; 766 var grapheqR; 767 768 $(function() { 769 var geqSampleRate = 44100; 770 console.log("*** hardwiring Graphic Equalizer sampleRate to be: " + geqSampleRate); 771 772 grapheqL = new GraphicalEq(geqSampleRate); 773 grapheqR = new GraphicalEq(geqSampleRate); 774 grapheqL.recalculateFilters(); 775 grapheqR.recalculateFilters(); 776 777 var minPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40, 778 slide: function() { changeMinFreq(grapheqL,"L")} }; 779 var minPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40, 780 slide: function() { changeMinFreq(grapheqR,"R")} }; 781 782 var maxPropL = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000, 783 slide: function() { changeMaxFreq(grapheqL,"L") } }; 784 var maxPropR = { orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000, 785 slide: function() { changeMaxFreq(grapheqR,"R") } }; 786 787 var bpoPropL = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1, 788 slide: function() { changeBandsPerOctave(grapheqL,"L")} }; 789 var bpoPropR = { orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1, 790 slide: function() { changeBandsPerOctave(grapheqR,"R")} }; 791 792 $('#minFreqL').slider(minPropL); 793 $('#maxFreqL').slider(maxPropL); 794 $('#minFreqR').slider(minPropR); 795 $('#maxFreqR').slider(maxPropR); 796 797 $('#bandsPerOctaveL').slider(bpoPropL); 798 $('#bandsPerOctaveR').slider(bpoPropR); 799 800 //$('#input').attr('volume', 0); 801 802 createSliders(grapheqL,"L"); 803 createSliders(grapheqR,"R"); 804 }); 805 806 807 808 var changeMinFreq = function(grapheq,side) { 809 grapheq.setMinimumFrequency($('#minFreq'+side).slider('option', 'value')); 810 //plotCoeffs(); 811 createSliders(grapheq,side); 812 } 813 814 var changeMaxFreq = function(grapheq,side) { 815 grapheq.setMaximumFrequency($('#maxFreq'+side).slider('option', 'value')); 816 //plotCoeffs(); 817 createSliders(grapheq,side); 818 } 819 820 var changeBandsPerOctave = function(grapheq,side) { 821 grapheq.setBandsPerOctave($('#bandsPerOctave'+side).slider('option', 'value')); 822 //plotCoeffs(); 823 createSliders(grapheq,side); 824 } 825 826 function positionGrapheqControl(grapheq,side) { 827 828 var numSliders = grapheq.filters.length; 829 var offset = (35 * numSliders) + 12; 830 if (side == "L") { 831 $('#grapheqControlL').css("left","-" + offset + "px"); 832 } 833 else if (side == "R") { 834 offset += 5; // fudge factor 835 $('#grapheqControlR').css("right","-" + offset + "px"); 836 } 837 else { 838 console.error("positionGrapheqControl(): unrecognized side '" + side + "'"); 839 } 840 } 841 842 var createSliders = function(grapheq,side) { 843 $('#bandSliders'+side).empty(); 844 positionGrapheqControl(grapheq,side); 845 for (var i=0; i<grapheq.filters.length; i++) { 846 847 var freq = grapheq.filters[i].f0; 848 var units = "Hz"; 849 if (freq>=1000000) { 850 freq = (freq/1000000).toFixed(2); 851 units = " MHz"; 852 } 853 else if (freq>=1000) { 854 freq = (freq/1000).toFixed(2); 855 units = " KHz"; 856 } 857 else if (freq>=100) { 858 freq = freq.toFixed(0); 859 } 860 else { 861 freq = freq.toFixed(0); 862 freq = " " + freq; 863 } 864 865 $('#bandSliders'+side).append('<td class="geq-bar"><div id="band'+side+'_'+i+'" class="slider"></div>' 866 +freq + ' ' + units + '</td>'); 867 868 $('#band'+side+'_'+i).slider({ orientation: 'vertical', range: 'min', min: -10, max: 3, step: 0.1, value: 0, 869 slide: function(event,ui) { changeBandGain(event,ui,grapheq)} }); 870 } 871 } 872 873 var changeBandGain = function(event, ui, grapheq) { 874 grapheq.setBandGain(ui.handle.parentNode.id.split("_")[1], ui.value); 875 //plotCoeffs(); 876 } 877 /* 878 var plotCoeffs = function() { 879 freqz = new Float32Array(grapheq.freqzs[0].length); 880 881 for (var i=0; i<freqz.length; i++) { 882 for (var j=0; j<grapheq.freqzs.length; j++) { 883 freqz[i] += grapheq.freqzs[j][i]; 884 } 885 } 886 } 887 */ 888 889 /* 890 function audioWritten(event) { 891 signal = event.mozFrameBuffer; 892 893 // Apply the filter to the signal 894 signal = grapheq.processStereo(signal); 895 896 output.mozWriteAudio([]); // flush 897 output.mozWriteAudio(signal); 898 writeCount++; 899 } 900 */ 901 902 //plotCoeffs(); 903 904 905 ]]> 906 </gsf:script> 907 908 909 <gsf:script> 910 function minimizeTurnstyle(suffix) { 911 $('#turnstyleMaximizeButton'+suffix).show(); 912 $('#turnstyleMinimizeButton'+suffix).hide(); 913 $('#turnstyleContentsArea'+suffix).slideUp('fast'); 914 } 915 916 function maximizeTurnstyle(suffix) { 917 $('#turnstyleMaximizeButton'+suffix).hide(); 918 $('#turnstyleMinimizeButton'+suffix).show(); 919 $('#turnstyleContentsArea'+suffix).slideDown('fast'); 920 } 921 922 </gsf:script> 923 924 <!-- 925 <div class="control" style="float: left; height: 200px"> 926 --> 927 928 929 <div id="grapheqControlL" class="control" style="position: absolute; top: 0px; left: -132px; heightXX: 200px"> 930 931 <h3 style="float: left;">Graphic Equalizer (left channel)</h3> 932 <div style="float: right;"> 933 <span style="font-size: 75%; padding-right: 5px;">(advanced)</span> 934 <a id="turnstyleMinimizeButtonL" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('L');"> 935 <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/> 936 </a> 937 <a id="turnstyleMaximizeButtonL" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('L');"> 938 <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/> 939 </a> 940 </div> 941 942 <hr style="clear: both;"/> 943 944 <div id="turnstyleContentsAreaL" style="display: none; float: right;"> 945 946 <table class="inner-control" style="margin-bottom: 5px;"> 947 <tr> 948 <td><div id="minFreqL" class="slider"><xsl:comment/></div>Min Freq</td> 949 <td><div id="maxFreqL" class="slider"><xsl:comment/></div>Max Freq</td> 950 <td><div id="bandsPerOctaveL" class="slider"><xsl:comment/></div>Bands/ Octave</td> 951 </tr> 952 </table> 953 </div> 954 955 <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div> 956 957 <table class="inner-control"> 958 <tr id="bandSlidersL"> 959 </tr> 960 </table> 961 962 963 964 </div> 965 966 <!-- 967 <div class="control" style="float: right; height: 200px"> 968 --> 969 970 <div id="grapheqControlR" class="control" style="position: absolute; top: 0px; right: -330px; heightXX: 200px"> 971 <h3 style="float: left;">Graphic Equalizer (right channel)</h3> 972 973 <div style="float: right;"> 974 <span style="font-size: 75%; padding-right: 5px;">(advanced)</span> 975 <a id="turnstyleMinimizeButtonR" style="float: right; font-size: 0.6em; display: none;" href="javascript:minimizeTurnstyle('R');"> 976 <img class="icon" style="padding-top:3px;" src="interfaces/{$interface_name}/images/collapse.png"/> 977 </a> 978 <a id="turnstyleMaximizeButtonR" style="float: right; font-size: 0.6em; display: block;" href="javascript:maximizeTurnstyle('R');"> 979 <img style="padding-top:3px;" src="interfaces/{$interface_name}/images/expand.png" class="icon"/> 980 </a> 981 </div> 982 983 <hr style="clear: both;"/> 984 985 <div id="turnstyleContentsAreaR" style="display: none; float: left;"> 986 <table class="inner-control" style="margin-bottom: 5px;"> 987 <tr> 988 <td><div id="minFreqR" class="slider"><xsl:comment/></div>Min Freq</td> 989 <td><div id="maxFreqR" class="slider"><xsl:comment/></div>Max Freq</td> 990 <td><div id="bandsPerOctaveR" class="slider"><xsl:comment/></div>Bands/ Octave</td> 991 </tr> 992 </table> 993 </div> 994 995 <div style="clear: both; height: 0px;"><xsl:comment></xsl:comment></div> 996 997 <table class="inner-control"> 998 <tr id="bandSlidersR"> 999 </tr> 1000 </table> 1001 1002 </div> 1003 1004 </xsl:template> 1005 668 1006 669 1007 <!-- *** --> … … 677 1015 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> 678 1016 </xsl:variable> 1017 1018 <!-- 1019 <gsf:variable-array name="overlayNote2"> 1020 <gsf:metadata multiple="true" name="salami.overlayNote" separator=", "/> 1021 </gsf:variable-array> 1022 1023 <span id="overlayNewNotes2" class="ui-state-default ui-corner-top" style="font-size:90%; padding: 3px; cursor:pointer;"> 1024 New Annotation 2 1025 </span> 1026 1027 <div id="noteOverlay2" style="width: 100%; height: 300px; background-color: #cccccc;"> 1028 </div> 1029 1030 <gsf:script> 1031 $(window).load(function(){ 1032 var overlayNotes2 = new OverlayNotes("noteOverlay2","salami.overlayNote"); 1033 $('#overlayNewNotes2').click(function() {overlayNotes2.AddNote() }); 1034 }); 1035 1036 </gsf:script> 1037 --> 1038 1039 <div style="display: none;"><!-- wrapped div to force display to none --> 679 1040 680 1041 <div id="settings-turnstyle" style="margin: 6px;"> … … 826 1187 </script> 827 1188 1189 </div><!-- wrapped div to force display to none --> 1190 828 1191 </xsl:template> 829 1192 … … 865 1228 </gsf:script> 866 1229 1230 </xsl:template> 1231 1232 1233 1234 <xsl:template name="original-audio"> 1235 <xsl:param name="httpCollection"/> 1236 <xsl:param name="assocFilePath"/> 1237 <xsl:param name="Audio"/> 1238 <xsl:param name="streamableaudio"/> 867 1239 868 1240 <div id="original-turnstyle" style="margin: 6px;"> … … 875 1247 <div> 876 1248 <audio style="width: 100%;" id="original-audio" controls="controls" > 1249 <!-- 877 1250 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.ogg" /> 878 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.mp3" /> 879 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/doc.wav" /> 1251 --> 1252 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamableaudio}" /> 1253 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$Audio}" /> 880 1254 </audio> 881 1255 </div> … … 891 1265 892 1266 893 </xsl:template> 1267 1268 </xsl:template> 1269 894 1270 895 1271 </xsl:stylesheet>
Note:
See TracChangeset
for help on using the changeset viewer.