Changeset 34076

Show
Ignore:
Timestamp:
15.03.2020 14:57:44 (2 weeks ago)
Author:
davidb
Message:

Changed to using WaveSurfer? to play audio, rather than raw \<audio\> tag

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/model-sites-dev/atea/collect/he-herenga-korero-mp3s/etc/collectionConfig.xml

    r34041 r34076  
    290290                <div id="viewer" style="heightXXX: 300px; overflow: auto; text-align: center; width: 100%"> 
    291291                  <div style="padding: 20px;"> 
     292 
     293                    <!-- 
    292294                    <audio controls="controls" widthXXX="300"> 
    293295                      <source> 
     
    296298                      Your web browser does not support the this form of audio. 
    297299                    </audio> 
     300                    --> 
     301 
     302                    <!-- WaveSurfer (self-contained) splice starts here --> 
     303                     
     304                    <!-- Bootstrap --> 
     305                    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> 
     306                       
     307                    <link rel="stylesheet" href="ext/audio/css/style.css" /> 
     308                    <link rel="stylesheet" href="ext/audio/css/ribbon.css" /> 
     309                    <!-- wavesurfer.js --> 
     310                    <!-- <script src="//unpkg.com/wavesurfer.js"> --> 
     311                    <script src="ext/audio/ws/wavesurfer.js"><xsl:text>  </xsl:text></script> 
     312                    <script src="ext/audio/ws/plugin/wavesurfer.cursor.js"><xsl:text>  </xsl:text></script> 
     313                    <script src="ext/audio/ws/plugin/wavesurfer.timeline.js"><xsl:text>  </xsl:text></script> 
     314                     
     315                     
     316                    <style> 
     317                      .btn-primary { 
     318                        color: #fff; 
     319                        background-color: #376f26; 
     320                        border-color: #204116; 
     321                    outline: none; 
     322                      } 
     323 
     324                      .btn-primary:focus { 
     325                    color: #fff ; 
     326                        background-color: #407530; 
     327                        border-color: #254620; 
     328                    outline: none ; 
     329                      } 
     330 
     331                      .btn-primary:active { 
     332                    color: #fff !important; 
     333                        background-color: #275f20 !important; 
     334                        border-color: #1C3114 !important; 
     335                    outline: none !important; 
     336                      } 
     337 
     338                      .btn-primary:hover { 
     339                    color: #fff; 
     340                    background-color: #407530; 
     341                    border-color: #254620; 
     342                    outline: none; 
     343                      } 
     344                    </style> 
     345 
     346 
     347                    <div id="waveform-container"> 
     348                      <div id="waveform"> 
     349                    <!-- Here be the waveform --> 
     350                    <xsl:text> </xsl:text> 
     351                      </div> 
     352                      <div id="wave-timeline"><xsl:text> </xsl:text></div> 
     353 
     354                      <div> 
     355                    <div class="controls"> 
     356                      <button class="btn btn-primary" data-action="play"> 
     357                        <i class="glyphicon glyphicon-play"><xsl:text> </xsl:text></i> 
     358                        Play / 
     359                        <i class="glyphicon glyphicon-pause"><xsl:text> </xsl:text></i> 
     360                        Pause 
     361                      </button> 
     362                    </div> 
     363                      </div> 
     364                    </div> 
     365 
     366                     
     367                    <xsl:variable name="httpCollection">library/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="/page/pageResponse/collection/@name"/></xsl:variable> 
     368 
     369                    <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable> 
     370                     
     371                    <gsf:variable name="mp3url"><xsl:value-of select="$httpCollection"/>/index/assoc/<xsl:value-of select="$assocFilePath"/>/<gsf:metadata name="SourceFile"/></gsf:variable> 
     372 
     373                    <script src="ext/audio/wavesurfer-player.js"> 
     374                      <xsl:text>  </xsl:text> 
     375                    </script> 
     376 
     377                    <gsf:script> 
     378                      document.addEventListener('DOMContentLoaded', function() { 
     379                        // Load audio from URL 
     380                        wavesurfer.load(gs.variables.mp3url); 
     381                      }); 
     382                    </gsf:script> 
     383                     
     384                    <!-- WaveSurfer (self-contained) splice end here --> 
     385 
     386                     
    298387                  </div> 
    299388                </div>