Changeset 36865


Ignore:
Timestamp:
2022-10-24T08:34:28+13:00 (18 months ago)
Author:
davidb
Message:

Changes after work on macrocarpa in the DL lab, testing with Safari

Location:
gs3-installations/mars/trunk/sites/mars/collect/amc-essentia
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/etc/collectionConfig.xml

    r36862 r36865  
    99    <displayItem assigned="true" lang="en" name="name">AMC-Essentia</displayItem>
    1010    <displayItem assigned="true" lang="en" name="description">
     11      <h4>Overview</h4>     
    1112      <p>
    1213    This conent analysis enhanced digital library collection is
    13     based around 9960 audio files from
     14    comprised of 9960 audio files from
    1415    <a href="https://www.australianmusiccentre.com.au/">
    15       Australian Muisc Centre </a>, which exhibits the country's
    16       best contemporary classical, improvisatory and experimental
    17       music and sound art.
     16      Australian Music Centre</a>, an organisation
     17      which hosts music and sound art from the country's
     18      leading contemporary classical, improvisatory and experimental
     19      composers.
     20      Through this digital library you can use traditional text-based
     21      searching and browsing to locate content.  You can also try
     22      out our experimental arousal-valence based music recommender.
    1823      </p>
    19      
     24
     25      <h4>Background</h4>
    2026      <p>
    2127    Using the <a href="https://essentia.upf.edu/documentation/">Essentia</a>
    … …  
    110116    <format>
    111117      <gsf:template match="documentNode">
    112     <td valign="top">
    113       <gsf:link type="document">
    114         <gsf:icon type="document"/>
    115       </gsf:link>
    116     </td>
    117     <td>
    118118
    119119      <xsl:choose>
    120120        <xsl:when test="/page/pageResponse/service/@name = 'AudioQuery'">
     121         
    121122          <gsf:variable name="frameOffset">
    122123        <xsl:value-of select="@frameOffset"/>
    … …  
    125126        <xsl:value-of select="@rank"/>
    126127          </gsf:variable>
     128         
     129          <td valign="top">
     130          <gsf:icon type="document"/>
     131          </td>
     132          <td>
    127133         
    128134          <a>
    … …  
    143149          </span>
    144150
    145          
     151          </td>
    146152        </xsl:when>
    147153        <xsl:otherwise>
    148           <gsf:link type="document">
    149             <gsf:metadata name="amc.title"/>
    150         by <gsf:metadata name="amc.artist"/>
    151           </gsf:link>
     154          <td valign="top">
     155        <gsf:link type="document">
     156          <gsf:icon type="document"/>
     157        </gsf:link>
     158          </td>
     159          <td>
     160         
     161        <gsf:link type="document">
     162              <gsf:metadata name="amc.title"/>
     163          by <gsf:metadata name="amc.artist"/>
     164        </gsf:link>
    152165          <!--
    153166          <gsf:switch>
    … …  
    161174          </gsf:link>
    162175          -->
     176          </td>
    163177        </xsl:otherwise>
    164178        </xsl:choose>
    … …  
    184198
    185199      -->
    186      
    187     </td>
    188200      </gsf:template>
    189201    </format>
    … …  
    323335                </td>
    324336                <td valign="top">
     337                  <gsf:link type="document">
    325338                        <gsf:choose-metadata>
    326339                      <gsf:metadata name="dc.Title"/>
    … …  
    331344                    </gsf:choose-metadata>
    332345                    <gsf:space />
    333                    
     346                  </gsf:link>
     347
     348                  <!--
    334349                    <gsf:link type="document">[Experimental Spectral Frequency]</gsf:link>
    335350
    336351                    <gsf:space />
     352                  -->
     353                 
    337354                    <!--
    338355                     <gsf:variable name="AssocEssentiaJSON"><gsf:OID/>-AssocEssentia.json</gsf:variable>
    339356                     <a download="{$AssocEssentiaJSON}" href="{$httpCollection}/index/assoc/{$assocFilePath}/{$AssocEssentiaJSON}">Download Audio Features</a>
    340357                    -->
    341 
     358<!--
    342359                    <xsl:call-template name="gsf-link-render-wave"/>
    343 
     360-->
    344361                    <!--
    345362                    <span id="renderWave">                   
    … …  
    529546              <gsf:script src="{$httpCollection}/js/av_document.js"/>
    530547
    531               <div class="documenttext" style="padding-bottom: 20px; width:100%;"> 
     548              <div class="documenttext" style="padding-bottom: 20px; width:100%;">
    532549                <style>
    533550                  .doc-metadata td { padding: 7px; }
    … …  
    564581
    565582             
    566               <div class="documenttext">
     583              <div class="documenttext" style="position: relative;">
    567584               
     585                <div style="position: absolute; right: 24px; top: -18px; z-index: 1000; font-size: 90%; font-style:italic">
     586                  <a id="switch-to-waveform"    stylexx="display: none;" href="">Switch to Waveform</a>
     587                  <a id="switch-to-spectrogram" stylexx="display: none;" href="">Switch to Spectrogram</a>
     588                </div>
     589
    568590                <style>
    569591                  #wave-timeline {
    … …  
    602624          <div class="controls">
    603625        <button class="btn btn-primary" onclick="AVSeekTo(0)">
     626          <i id="ws-return-to-start-icon"  class="fa-solid fa-backward-fast" ><xsl:text> </xsl:text></i>
    604627          Return to Start
    605628        </button>
    606 
    607629       
    608630        <button class="btn btn-primary" data-action="play" style="display: none;">
    609                   <i class="glyphicon glyphicon-play"></i>
     631                  <i class="glyphicon glyphicon-play"><xsl:text> </xsl:text></i>
    610632                  Play /
    611                   <i class="glyphicon glyphicon-pause"></i>
     633                  <i class="glyphicon glyphicon-pause"><xsl:text> </xsl:text></i>
    612634                  Pause
    613635        </button>
    614636       
    615637       
    616         <button class="btn btn-primary" onclick="AVPlayPause()">
    617                   Play
     638        <button id="ws-playpause" class="btn btn-primary" onclick="AVPlayPause()">
     639                  <span id="ws-playpause-label" style="display: inline-block; width: 3rem;">Play</span>
     640          <span style="display: inline-block; width: 1rem;">
     641            <i id="ws-play-icon"  class="fa-solid fa-play"                      ><xsl:text> </xsl:text></i>
     642            <i id="ws-pause-icon" class="fa-solid fa-pause" style="display:none"><xsl:text> </xsl:text></i>
     643          </span>
    618644        </button>
    619645       
    … …  
    634660     
    635661      document.addEventListener('DOMContentLoaded', function() {
    636         //postInitWavesurfer(wavesurfer);
    637      
     662        postInitWavesurfer(wavesurfer);
     663/*   
    638664        // Load audio from URL
    639665        wavesurfer.load(gs.variables.mp3url);
    … …  
    656682          }
    657683          });
    658          
     684*/       
    659685      });
    660686    </gsf:script>
    661687
    662               </div>
    663 
    664 
    665 
    666               <gsf:variable name="docID"><xsl:value-of select="@nodeID"/></gsf:variable>
    667 
    668               <hr/>
     688            </div>
     689
     690
     691
     692            <gsf:variable name="docID"><xsl:value-of select="@nodeID"/></gsf:variable>
     693
     694            <hr/>
     695            <div id="recommendationArea">
     696               
    669697              <form action="{$library_name}" method="get" name="QueryForm">
    670698                <input name="a" type="hidden" value="q"/>
    … …  
    717745                <input name="s1.valence" type="hidden" value="0"/>
    718746
    719                 <div style="font-style: italics;">
     747                <div style="font-style: italic;">
    720748                  <span id="makeRecommendationFrom">
    721749                Based on the start of this musical/sound art work:
    722750                  </span>
    723                   <input onclick="return preSubmit(this.form);" type="submit" value="Make Arousal-Valence Recommendations"/>
     751                  <input onclick="return preSubmit(this.form);" type="submit" value="Make Arousal-Valence Recommendation"/>
     752                  <div id="makeRecommendationFrom-AV" style="font-style: italics; font-size: 90%;">
     753                <xsl:text> </xsl:text>
     754                  </div>
    724755                </div>
    725756               
    … …  
    732763                </div>
    733764              </form>
    734               <div id="resultsAreaDiv">
    735                
     765              <div id="resultsAreaDiv" style="padding-top: 1rem;">             
    736766                <xsl:text> </xsl:text>
    737767              </div>
    738               <hr/>
     768            </div>
     769            <hr/>
    739770              <!--
    740771              <script>

  • gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/js/av_document.js

    r36862 r36865  
     1var AMC_SONG_DURATION = 30;
     2
     3var currentPosIsZero = true;
     4var currentPosRunup  = 0;
     5
     6
     7function AVEnsurePaused()
     8{
     9    if (!wavesurfer.backend.isPaused()) {   
     10    $('#ws-pause-icon').hide();
     11    $('#ws-play-icon' ).show();
     12    $('#ws-playpause-label').html("Play");
     13    }
     14   
     15    wavesurfer.pause();
     16}
     17
     18function AVPlay()
     19{
     20    $('#ws-play-icon' ).hide();
     21    $('#ws-pause-icon').show();
     22    $('#ws-playpause-label').html("Pause");
     23
     24    if (currentPosRunup>0) {
     25    var skip_amount = -1 * currentPosRunup;
     26    wavesurfer.skip(skip_amount);
     27    currentPosRunup = 0;   
     28    }
     29   
     30    wavesurfer.play();
     31   
     32}
     33
    134function AVPlayPause()
    235{
    3     return wavesurfer.backend.isPaused() ? wavesurfer.play() : wavesurfer.pause();
     36    if (wavesurfer.backend.isPaused()) {
     37    AVPlay();
     38    }
     39    else {
     40    AVEnsurePaused();
     41    }
     42   
     43    //return wavesurfer.backend.isPaused() ? wavesurfer.play() : wavesurfer.pause();
    444}
    545
    … …  
    3676    // clamp to ensure >= 6.0 secs
    3777    var current_time = Math.max(6.0,wavesurfer.getCurrentTime());
    38    
    39     wavesurfer.pause();
     78    var current_time_1dp = current_time.toFixed(1);
     79    AVEnsurePaused();
    4080   
    4181    weka_segment = Math.round(current_time/3) * 3;
    … …  
    4787    form.elements["s1.arousal"].value = arousal_val;
    4888    form.elements["s1.valence"].value = valence_val;
     89
     90    $('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal=${arousal_val}, valence=${valence_val})`);
    4991   
    5092
    … …  
    83125    };
    84126
    85 
     127/*
    86128    var argsFixed = {
    87129    "a": "q",
    … …  
    101143    "excerptid" : "resultsArea"
    102144    };
     145*/
    103146   
    104147    var url = "https://mars.so-we-must-think.space/greenstone3/library";
     148
     149    $('#recommendationArea').css("cursor","wait");
     150    $('#resultsAreaDiv').html("Retrieving recommendation ...");
    105151   
    106152    $.ajax({
    … …  
    109155    data: args
    110156    })
    111     .done(function( msg ) {
    112         $('#resultsAreaDiv').html(msg);
    113     //alert( "Data Saved: " + msg );
    114     });
    115 
     157    .always(function() {
     158        $('#recommendationArea').css("cursor","revert");
     159    })
     160    .fail(function(jqXHR,textStatus) {
     161        console.error( "Request failed: " + textStatus);
     162    })
     163    .done(function(html_result) {
     164        $('#resultsAreaDiv').html(html_result);
     165
     166        const updated_url = new URL(window.location);
     167        updated_url.searchParams.set('p.frameOffset', current_time);
     168        //window.history.pushState({}, '', url + "?p.frameOffset=" + current_time);
     169        //window.history.pushState({}, '', updated_url);
     170        window.history.replaceState({}, '', updated_url);
     171
     172       
     173    });
     174   
    116175    // stop submit
    117176    return false;
    118177
     178    // force GET method request to go ahead
    119179    //return true;
    120180}
    121181
    122182
    123 var currentPosIsZero = true;
    124183
    125184function recommendFromStart()
    … …  
    140199function postInitWavesurfer(wavesurfer)
    141200{
     201    console.log("postInitWavesurfer called with wavesufer = " + wavesurfer);
     202   
    142203    wavesurfer.load(gs.variables.mp3url);
    143204   
    … …  
    157218
    158219    wavesurfer.on('ready', function () {
     220
     221    console.log("**** wavesurfer ready()");
    159222   
    160223    if ('p_frameOffset' in gs.cgiParams) {
    … …  
    162225        //console.log("**** starting play @ " + frameOffset);
    163226        //wavesurfer.play(frameOffset);
    164         wavesurfer.seekTo(frameOffset/30.0);
     227        //console.log("**** setting play seek @ " + frameOffset);
     228        wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
     229
     230        if (frameOffset>1.0) {
     231        currentPosRunup = 1.0; // 1 second
     232        }
    165233    }
    166234    });
    167235
    168236}
     237
     238$(document).ready(function() {
     239
     240    const doc_url = new URL(window.location);
     241    var renderWave = doc_url.searchParams.get('renderWave');
     242
     243    if (renderWave && (renderWave == 1)) {
     244    // showing the waveform => offer link to spectrogram
     245    const sts_url = new URL(window.location);
     246    sts_url.searchParams.set('renderWave', 0);
     247    $('#switch-to-spectrogram').attr("href",sts_url);
     248    $('#switch-to-waveform').hide();
     249    }
     250    else {
     251    // show the spectrogram => offer link to waveform
     252   
     253    const stw_url = new URL(window.location);
     254    stw_url.searchParams.set('renderWave', 1);
     255    $('#switch-to-waveform').attr("href",stw_url);
     256    $('#switch-to-spectrogram').hide();
     257    }
     258   
     259});
     260         
Note: See TracChangeset for help on using the changeset viewer.