Changeset 28593

Show
Ignore:
Timestamp:
02.11.2013 23:05:23 (6 years ago)
Author:
davidb
Message:

Changes after testing in preparation for SMAM keynote

Location:
main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages
Files:
2 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/about.xsl

    r28433 r28593  
    4747 
    4848 
    49     <script src="{$httpPath}/script/browser-detect.js" type="text/javascript"> 
     49    <script src="{$httpPath}/script2/browser-detect.js" type="text/javascript"> 
    5050    /* space filler needed */ 
    5151    </script> 
     
    5555 
    5656 
    57 <h2>A Musical Web Observatory: </h2> 
     57<h2>I Can't <i>Believe</i> It's All Javascript!</h2> 
    5858 
    59 <h3><i><font size="+2">Connecting People with Data, Documents, and Algorithms</font></i></h3> 
    60  
     59<!-- 
    6160<div style="background-color: #DD3611; color: white; padding: 4pt; margin-bottom: 6pt;"> 
    6261<table> 
     
    139138</table> 
    140139</div> 
     140--> 
    141141 
    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 
    143144 
    144145<style> 
     
    149150 
    150151<ol> 
    151   <li> 
    152   <i>Starting point:</i> Manual (command-line) aggregation of disparate 
    153     resources prior to building the DL.  A set of bespoke Greenstone 
    154     document processing plugins corrals the heterogeneous gathered 
    155     data into a unified (homogeneous) canonical form that the DL can 
    156     access and display.  Everything presented in the DL is 
    157     either pre-computed (such as the self-similarity heat-maps) or else 
    158     computed at build-time. 
    159   </li> 
    160  
    161    <li> 
    162      <i>Audio-fingerprinting:</i> as before, but now metadata about the audio 
    163      songs is now enriched through a set of audio-fingerprinting web 
    164      services.  Everything presented in the DL is still pre-computed 
    165      or else computed at build-time—however,  the inclusion in the document 
    166      view of a &quot;Discovery&quot; block allows a user to begin to 
    167      access and explore through linked-data, information related to 
    168      the song. 
    169    </li> 
    170  
    171   <li> 
    172     <i>Client-side audio processing (and visualization):</i> the 
    173     Pre-computed self-similarity heat-maps are dropped from the 
    174     collection building process in preference for the same information 
    175     being computed through Javascript running in the user's web 
    176     browser. 
    177   </li> 
    178  
    179   <li> 
    180     <i>Embedded Meandre workflows:</i> the Meandre Workbench is 
    181     integrated into Greenstone.  Audio documents in the Greenstone 
    182     digital library can now be dispatched and be processed by the 
    183     selected Meandre, and output from the workflow returned to the 
    184     Greenstone document view—for example, playing audio that has been 
    185     processed and output from the workflow. 
    186   </li> 
    187152 
    188153  <li> 
     
    193158 
    194159  <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. 
    213165  </li> 
    214166 
    215167 
     168  <li> 
     169    <i>Annotation:</i> ... 
     170 
     171  </li> 
    216172</ol> 
    217173 
    218174</p> 
    219175 
    220  
    221  
    222 <!-- 
    223  
    224 <p class="about">This digital library collection demonstrates the 
    225 integration of a variety of sources of structural metadata from both 
    226 automatically derived content analysis and manually labelled 
    227 ground-truth data to form a rich interactive web application suitable 
    228 for musicologists (as the target end-users) to explore a collated set 
    229 of music files.</p> 
    230  
    231 <p class="about">While the base digital library system, <a 
    232 href="http://www.greenstone.org" target="_blank">Greenstone</a>, is 
    233 designed to operate with any web browser, the audio features this 
    234 particular DL collection demonstrates relies on audio processing 
    235 features currently only available in Firefox.  Using one of the other 
    236 web browsers you will be able to access most features of the digital 
    237 library collection, but when you access a particular song you may find 
    238 playing the audio—in particular the panned audio 
    239 effect—does not work.</p> 
    240 --> 
    241  
    242  
    243 <!-- 
    244 <p class="about">The developed system combines the open source capabilities of 
    245 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 contribute  
    250 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 an 
    255 extensible service-based architecture that.  In 
    256 addition to the text-based searching and browsing capability to 
    257 organize content, Greenstone provides the framework in which to harness the 
    258 structural metadata from NEMA and Salami, and the audio-content based 
    259 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 all 
    269 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 worthy 
    272 of study, the <a href="#browse">figure below</a> shows the result of browsing 
    273 the formed digital library collection <a href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;cl=CL1" target="_blank">by title</a> from a web browser. 
    274 The figure is a useful snapshot in which to orientate ourselves with 
    275 the main structure and features to the digital library.  Functionality that 
    276 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 just 
    283 below) with links to more sophisticated searching options; and</li> 
    284 <li>pin-pointing where within the site a user is currently located 
    285 (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 library 
    299   <a href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;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 case 
    306 browsing by title) is shown beneath the main banner.  Various 
    307 groupings of title can be accessed by clicking on the bookshelf icons 
    308 vertically aligned as the main part of the page: currently <a 
    309 href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;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 clicks 
    317 on <a href="dev?a=d&amp;ed=1&amp;book=off&amp;c=salami-audioDB&amp;d=D145&amp;dt=simple&amp;sib=1&amp;p.a=b&amp;p.sa=&amp;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&amp;ed=1&amp;book=off&amp;c=salami-audioDB&amp;d=D145&amp;dt=simple&amp;sib=1&amp;p.a=b&amp;p.sa=&amp;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 digital 
    334 library the document view brings up a page that is strongly derived 
    335 from textual metadata.  If the document viewed was a text-document, 
    336 some summary information such as title and author is typically 
    337 presented, say in tabular form, before the main text is presented. 
    338 Even in the case of multimedia digital libraries, the view presented 
    339 is still strongly derived from textual metadata: this time including 
    340 details such as the length of the video, the TV company that produced 
    341 it, whether captions are available, and so forth, accompanied with an 
    342 embedded video player for viewing the content—essentially more 
    343 textual metadata (in this case the URL to the video content) which in 
    344 terms of the user-interface is largely divorced from the other 
    345 elements displayed on the page.</p> 
    346  
    347 <p class="about">This contrasts sharply with the document view developed in this 
    348 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 the  
    351 other functionality available this is much more closely 
    352 integrated.</p> 
    353  
    354 <p class="about">The most striking visual component to the document view is a 
    355 self-similarity &quot;heat map&quot; where the duration of the song forms both 
    356 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 the 
    358 song are strongly similar, proportionally shifting to blue to 
    359 represent dissimilar.  Given this configuration, the leading diagonal 
    360 to the matrix (<i>x=y</i>) is always coloured red as this represents the 
    361 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 map 
    364 a highlighting circle is shown to emphasize the area the user is over, 
    365 with a black dot at the centre (visible in in 
    366 the <a href="#self-similarity">above figure</a>); annotated vertically 
    367 and horizontally are the two time-offsets in seconds that that point 
    368 in the map corresponds to.  Clicking the cursor at this point results 
    369 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, one 
    371 part is panned to the left speaker, and the other to the right (this 
    372 was implemented using the extended audio API provided by Firefox, and 
    373 so this particular feature only work when viewing the collection with 
    374 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 occurs 
    377 some distance off the leading diagonal.  Listening to the two sounds 
    378 played (most reliably done with headphones on), they hear that these 
    379 two sections of the song are indeed repeating sections of the guitar 
    380 piece <i>Candela</i> with a minor variation in the latter section 
    381 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 another 
    385 area of enriched musical content in the digital library. The upper 
    386 line shows the ground-truth data for this song generated by 
    387 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 content 
    389 analysis algorithm.</p> 
    390  
    391 <p class="about">While there is some agreement between these two lines, there are 
    392 also significant differences.  The play and search buttons within the 
    393 structured time-lines (the latter represented by a magnifying glass) 
    394 allow the user to investigate further these structures.  We shall 
    395 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 the 
    398 self-similarity map, there is further opportunity to study the 
    399 differences between the two structured time-line.  It is certainly the 
    400 case that there are strong visual cues in the map that line up with 
    401 the algorithmic time-line, even though they do not align with a 
    402 boundary in the ground-truth data, and the user can click on these 
    403 parts of the similarity map to hear what is occurring at these 
    404 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) the  
    421     <a href="dev?a=q&amp;sa=&amp;rt=rd&amp;s=AudioQuery&amp;c=salami-audioDB&amp;startPage=1&amp;s1.maxDocs=100&amp;s1.hitsPerPage=20&amp;q=D206.dir&amp;s1.query=D206.dir&amp;s1.offset=263&amp;s1.length=24&amp;mysongWindowDuration=6" target="_blank">result list</a> from 
    422       an audio content based query taken from an extract of </i> 
    423       Michelle; <i>and right) 
    424       the <a href="dev?a=q&amp;sa=&amp;rt=rd&amp;s=TextQuery&amp;c=salami-audioDB&amp;startPage=1&amp;s1.query=%22b+b+c+b+c%22&amp;s1.index=JS" target="_blank">result of a structured music search</a> for 
    425       content containing &quot;b b c b a&quot; as a sequence.</i> 
    426     </td> 
    427   </tr> 
    428 </table> 
    429  
    430 <p class="about">Returning to the search capability provided by the structured 
    431 time-lines, the <a href="#resultspage">above figure (left)</a> show the result of 
    432 using this feature while study the song <i>Michelle</i> by The 
    433 Beatles.  In this case the user selected the section of the 
    434 ground-truth time-line corresponding to section starting &quot;I want you 
    435 ...&quot;, but could have equally used the algorithmically calculated 
    436 time-line, or in fact paused the song playing at any point, and 
    437 started a match from there.</p> 
    438  
    439  
    440 <p class="about">Not surprisingly <i>Michelle</i> is returned as the top hit (at 
    441 92.1%)—we shall see shortly that this is because the system found 
    442 several sections of the song that matched this—the next hit being 
    443 <i>Bigger Than JC</i> at 74.4%, and so on down, where only one hit 
    444 per song occurs.  Clicking on the top hit, 
    445 the <a href="#audiodb">figure below</a> shows the document view that is 
    446 displayed, focusing in on the key area to this screen.  This time the 
    447 time-line area has an additional bar: the points within the song that 
    448 AudioDB found to be similar.  Like the other time-lines, a play button 
    449 is present on these segments so the user can play the matching points 
    450 directly.  In this case 
    451 clicking on them reveals the matching sections found correspond to 
    452 melodically repeating sections of the song, only with different lyrics 
    453 (&quot;I love you ...&quot; and &quot;I need you ...&quot;).</p> 
    454  
    455  
    456 <p class="about">A further form of musical content-based searching is available through 
    457 the main header to the digital library.  Instead of searching by title 
    458 or artist (which are also available) the user can click on this 
    459 &quot;search by&quot; menu next to the quick-search text box and select 
    460 &quot;ground-truth structure&quot; instead. 
    461 The <a href="#resultspage">figure above</a> (right) shows the result of using this 
    462 option, where the user has entered &quot;b b c b c&quot; as the query, in 
    463 other words searching for songs that have two sections in a row the 
    464 same, then a new section, then returning to the original section, 
    465 before progressing to a recurrence of the second distinct section.  In 
    466 pop and rock music this is a popular sequence corresponding to verse, 
    467 verse, chorus, verse, chorus.  A more intriguing framing of a query 
    468 along these lines—equally possible in the digital library—would be 
    469 to go to the fielded search page (accessible through the <i>advanced 
    470   search</i> link below the quick-search box, and entered the same 
    471 music structure query, but this time combine it with other fielded 
    472 query terms (Genre=Blues OR Jazz, Year&lt;1950).  Results from this 
    473 query would let the musicologist explore potential evidence of this 
    474 pattern of sections being used in two of the key musical genres that 
    475 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&amp;c=salami-audioDB&amp;d=D206&amp;dt=simple&amp;p.frameOffset=133,393,264,262,392&amp;p.frameLength=24&amp;p.a=q&amp;p.s=AudioQuery&amp;hl=on&amp;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 were 
    498 implemented using SVG combined with Javascript.  The left- and 
    499 right-panning interactively available from the self-similarity map was 
    500 implemented by processing the raw audio stream, made accessible by the 
    501 Firefox Audio extension 
    502 <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 through 
    505 two components of the digital library software architecture: its 
    506 build-time document processing plugin system, and its runtime 
    507 message-passing service-base framework.  The developed plugin accepts 
    508 a wide range of audio formats (including OGG and MP3), and converts 
    509 them to WAV, the format needed by AudioDB for processing.  The new 
    510 search service took the form of a proxy, accepting messages in the 
    511 XML syntax used by Greenstone, turning them into the necessary calls 
    512 to the AudioDB command-line interface, and then converting the output 
    513 from AudioDB back into the XML syntax expected by the digital library 
    514 architecture.  Finally, the two parts were packaged to operate as a 
    515 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> 
    517176 
    518177</div> 
  • main/trunk/model-sites-dev/multimodal-mdl/collect/js-dsp-my-ipod/transform/pages/document.xsl

    r28433 r28593  
    7777  <xsl:template name="javascript-dsp-header"> 
    7878    <gsf:script src="ext/js-dsp/dsp-custom.js"/> 
     79    <gsf:script src="ext/js-dsp/dsp.js"/> 
    7980    <gsf:script src="ext/js-dsp/chroma-transform.js"/> 
    8081    <gsf:script src="ext/js-dsp/frequency-plotter.js"/> 
     
    99100      height: 100%;  
    100101      position: absolute;  
    101       z-index: 10;  
     102      z-index: 10000;  
    102103      left: 0px;  
    103104      top: 0px;  
     
    168169     
    169170  </xsl:template> 
     171 
     172 
    170173 
    171174  <xsl:template name="fingerprintMetadataBlock"> 
     
    218221      <tr valign="top"> 
    219222        <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","&lt;br /&gt;")); 
     229 
     230        </gsf:script> 
     231          </i> 
     232        </td> 
    221233      </tr> 
    222234       
     
    265277          --> 
    266278 
    267           <table> 
     279          <table style="width: 100%;"> 
    268280        <tr> 
    269           <td> 
     281          <td style="width: 200px;"> 
    270282            MusicBrainz song id:  
    271283          </td> 
    272284          <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"> 
    274286              <xsl:copy-of select="$musicbrainzsongid"/> 
    275287            </a> 
     
    282294          </td> 
    283295          <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"> 
    285297              <xsl:copy-of select="$musicbrainzalbumid"/> 
    286298            </a> 
     
    293305          </td> 
    294306          <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"> 
    296308              <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"/> 
    304309            </a> 
    305310          </td> 
     
    310315          </td> 
    311316          <td> 
    312             <a href="{$echonestsongid}" target="#echonestsongid"> 
     317            <a href="http://developer.echonest.com/api/v4/song/profile?api_key=8WNR9XTGCODO9G4YG&amp;format=xml&amp;id={$echonestsongid}" target="#echonestsongid" class="external"> 
     318 
     319 
     320 
    313321              <xsl:copy-of select="$echonestsongid"/> 
    314322            </a> 
    315323          </td> 
    316324        </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> 
    317334          </table> 
    318335 
     
    330347  <!-- * Audio Player --> 
    331348  <!-- *** --> 
    332  
    333349 
    334350  <xsl:template name="js-mad-header"> 
     
    379395 
    380396 
     397 
    381398  <xsl:template name="audio-icon-cache"> 
    382399    <div style="display:none;"> 
     
    479496    </div> 
    480497 
    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"/> 
    483500     
    484501    <gsf:script> 
     
    611628    <div class="documenttext" style="color: white; background-color: rgb(40%,40%,20%); padding-top: 4px;"> 
    612629 
    613       <span class="vix-heading">Max Values:</span> 
     630      <span class="vis-heading">Max Values:</span> 
    614631      <div style="padding-left: 8px"> 
    615632    <style> 
     
    657674--> 
    658675 
     676 
     677 
    659678    <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)"/>&gt; realtime 
     685        <span id="accProcStatus"></span> 
     686      </div> 
     687 
    662688    </form> 
     689    <div style="clear: both; padding-top: 4px; padding-bottom: 4px;"><hr/></div> 
     690 
    663691    <hr/> 
    664692 
    665693    </div> 
    666694     
    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 = "&nbsp;" + 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 
    6681006 
    6691007  <!-- *** --> 
     
    6771015      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> 
    6781016    </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 --> 
    6791040 
    6801041    <div id="settings-turnstyle" style="margin: 6px;"> 
     
    8261187    </script> 
    8271188 
     1189    </div><!-- wrapped div to force display to none --> 
     1190 
    8281191  </xsl:template> 
    8291192 
     
    8651228    </gsf:script> 
    8661229 
     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"/> 
    8671239 
    8681240    <div id="original-turnstyle" style="margin: 6px;"> 
     
    8751247    <div> 
    8761248      <audio style="width: 100%;" id="original-audio" controls="controls" > 
     1249<!-- 
    8771250        <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}" /> 
    8801254      </audio> 
    8811255    </div> 
     
    8911265 
    8921266 
    893   </xsl:template> 
     1267 
     1268  </xsl:template> 
     1269 
    8941270 
    8951271</xsl:stylesheet>