Changeset 34076

Timestamp:

2020-03-15T14:57:44+13:00 (4 years ago)

Author:

davidb

Message:

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

File:

• main/trunk/model-sites-dev/atea/collect/he-herenga-korero-mp3s/etc/collectionConfig.xml (modified) (2 diffs)

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

@@ -290 +290 @@
                 <div id="viewer" style="heightXXX: 300px; overflow: auto; text-align: center; width: 100%">
                   <div style="padding: 20px;">
+
+                    <!--
                     <audio controls="controls" widthXXX="300">
                       <source>
@@ -296 +298 @@
                       Your web browser does not support the this form of audio.
                     </audio>
+                    -->
+
+                    <!-- WaveSurfer (self-contained) splice starts here -->
+                    
+                    <!-- Bootstrap -->
+                    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
+                      
+                    <link rel="stylesheet" href="ext/audio/css/style.css" />
+                    <link rel="stylesheet" href="ext/audio/css/ribbon.css" />
+                    <!-- wavesurfer.js -->
+                    <!-- <script src="//unpkg.com/wavesurfer.js"> -->
+                    <script src="ext/audio/ws/wavesurfer.js"><xsl:text>  </xsl:text></script>
+                    <script src="ext/audio/ws/plugin/wavesurfer.cursor.js"><xsl:text>  </xsl:text></script>
+                    <script src="ext/audio/ws/plugin/wavesurfer.timeline.js"><xsl:text>  </xsl:text></script>
+                    
+                    
+                    <style>
+                      .btn-primary {
+                        color: #fff;
+                        background-color: #376f26;
+                        border-color: #204116;
+                    outline: none;
+                      }
+
+                      .btn-primary:focus {
+                    color: #fff ;
+                        background-color: #407530;
+                        border-color: #254620;
+                    outline: none ;
+                      }
+
+                      .btn-primary:active {
+                    color: #fff !important;
+                        background-color: #275f20 !important;
+                        border-color: #1C3114 !important;
+                    outline: none !important;
+                      }
+
+                      .btn-primary:hover {
+                    color: #fff;
+                    background-color: #407530;
+                    border-color: #254620;
+                    outline: none;
+                      }
+                    </style>
+
+
+                    <div id="waveform-container">
+                      <div id="waveform">
+                    <!-- Here be the waveform -->
+                    <xsl:text> </xsl:text>
+                      </div>
+                      <div id="wave-timeline"><xsl:text> </xsl:text></div>
+
+                      <div>
+                    <div class="controls">
+                      <button class="btn btn-primary" data-action="play">
+                        <i class="glyphicon glyphicon-play"><xsl:text> </xsl:text></i>
+                        Play /
+                        <i class="glyphicon glyphicon-pause"><xsl:text> </xsl:text></i>
+                        Pause
+                      </button>
+                    </div>
+                      </div>
+                    </div>
+
+                    
+                    <xsl:variable name="httpCollection">library/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="/page/pageResponse/collection/@name"/></xsl:variable>
+
+                    <xsl:variable name="assocFilePath"><gsf:metadata name="assocfilepath" select="root"/></xsl:variable>
+                    
+                    <gsf:variable name="mp3url"><xsl:value-of select="$httpCollection"/>/index/assoc/<xsl:value-of select="$assocFilePath"/>/<gsf:metadata name="SourceFile"/></gsf:variable>
+
+                    <script src="ext/audio/wavesurfer-player.js">
+                      <xsl:text>  </xsl:text>
+                    </script>
+
+                    <gsf:script>
+                      document.addEventListener('DOMContentLoaded', function() {
+                        // Load audio from URL
+                        wavesurfer.load(gs.variables.mp3url);
+                      });
+                    </gsf:script>
+                    
+                    <!-- WaveSurfer (self-contained) splice end here -->
+
+                    
                   </div>
                 </div>