Index: /gs3-extensions/mars-src/trunk/CASCADE-MAKE.sh
===================================================================
--- /gs3-extensions/mars-src/trunk/CASCADE-MAKE.sh	(revision 34369)
+++ /gs3-extensions/mars-src/trunk/CASCADE-MAKE.sh	(revision 34370)
@@ -3,5 +3,5 @@
 source ./devel.bash
 
-for d in packages ; do
+for d in packages src ; do
     echo "Running $d/CASCADE-MAKE.sh"
 
Index: /gs3-extensions/mars-src/trunk/src/CASCADE-MAKE.sh
===================================================================
--- /gs3-extensions/mars-src/trunk/src/CASCADE-MAKE.sh	(revision 34370)
+++ /gs3-extensions/mars-src/trunk/src/CASCADE-MAKE.sh	(revision 34370)
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+
+source ../cascade-make/lib/cascade-lib.bash GEXT_MARS .. $*
+
+for d in WAVESURFER ; do
+    echo "    Running CASCADE-MAKE/$d.sh"
+
+    ./CASCADE-MAKE/$d.sh $*
+
+    if [ $? != 0 ] ; then
+	echo "Error encountered running CASCADE-MAKE/$d.sh"
+	exit 1
+    fi
+done
Index: /gs3-extensions/mars-src/trunk/src/CASCADE-MAKE/WAVESURFER.sh
===================================================================
--- /gs3-extensions/mars-src/trunk/src/CASCADE-MAKE/WAVESURFER.sh	(revision 34370)
+++ /gs3-extensions/mars-src/trunk/src/CASCADE-MAKE/WAVESURFER.sh	(revision 34370)
@@ -0,0 +1,94 @@
+#!/bin/bash
+
+package=wavesurfer.js
+version=-4.0.1
+
+progname=$0
+
+source ../cascade-make/lib/cascade-lib.bash GEXT_MARS ../.. $*
+
+prefix=$GEXT_MARS_INSTALLED
+
+#export CFLAGS="$CFLAGS -I$GEXT_MARS_INSTALLED/include"
+#export CPPFLAGS="$CPPFLAGS -I$GEXT_MARS_INSTALLED/include"
+#export CXXFLAGS="$CXXFLAGS -I$GEXT_MARS_INSTALLED/include"
+#export LDFLAGS="$LDFLAGS -L$GEXT_MARS_INSTALLED/lib"
+#export LD_LIBRARY_PATH="$GEXT_MARS_INSTALLED/lib"
+
+opt_run_untar $force_untar $auto_untar $package $version
+
+#opt_run_configure $force_config $auto_config $package $version $prefix 
+if [ $force_config = "1" ] ; then
+    echo "[pushd $package$version]"
+    ( cd $package$version ; \
+      echo "Running the *configure* stage with NodeJS source code equates to running 'npm install' to downloading required packages" ; \
+      echo "npm install" ; \
+      npm install )
+    if [ $? != 0 ] ; then
+        echo "      Error encountered running *configure* stage of $progname"
+        exit 1
+    fi
+    echo "[popd]"
+else
+    # Is the following check meaningful for npm???
+    if [ $auto_config = "1" ] ; then
+      echo "Found top-level for ${progname%.*} => no need to run ./configure"
+    fi
+fi
+
+
+# opt_run_make $compile $package $version
+if [ $compile = "1" ] ; then
+    ( cd $package$version ; \
+      echo "npm run build $@" ; \
+      npm run build $@ )
+    if [ $? != 0 ] ; then
+        echo "      Error encountered running *make $target* stage of $progname"
+        exit 1
+    fi
+fi
+
+# opt_run_make $install $package $version "install"
+if [ $install = "1" ] ; then
+#    echo "****"
+#    echo "* Generate files: $package$version/dist"
+#    echo "****"
+
+    if [ ! -d ../../../web/ext ] ; then
+	echo "  Making directory: ../../../web/ext"
+	mkdir ../../../web/ext
+    fi
+    
+    if [ ! -d ../../../web/ext/audio ] ; then
+	echo "  Making directory: ../../../web/ext/audio"
+	mkdir ../../../web/ext/audio
+    fi
+
+    echo "  Installing 'wavesurfer' into ../../../web/ext/audio"
+
+    echo "Copying  $package$version/dist to ../../../web/ext/audio/ws"
+    /bin/cp -r "$package$version/dist" "../../../web/ext/audio/ws"
+
+    echo "Copying  wavesurfer-player to ../../../web/ext/audio"
+    /bin/cp -r wavesurfer-player/css wavesurfer-player/wavesurfer-player.js ../../../web/ext/audio/.
+
+fi
+
+# opt_run_make $clean $package $version "clean"
+if [ $clean = "1" ] ; then
+    echo "****"
+    echo "* No 'clean' target currently implemented for 'npm' based src package"
+    echo "****"
+fi
+
+#opt_run_make $distclean $package $version "distclean"
+if [ $distclean = "1" ] ; then
+    echo "****"
+    echo "* No 'clean' target currently implemented for 'npm' based src package"
+    echo "****"
+fi
+
+opt_run_tarclean $tarclean $package $version
+
+
+
Index: /gs3-extensions/mars-src/trunk/src/GET-WAVESURFER.sh
===================================================================
--- /gs3-extensions/mars-src/trunk/src/GET-WAVESURFER.sh	(revision 34370)
+++ /gs3-extensions/mars-src/trunk/src/GET-WAVESURFER.sh	(revision 34370)
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+curl "https://codeload.github.com/katspaugh/wavesurfer.js/tar.gz/4.0.1" > wavesurfer-js-4.0.1.tar.gz
Index: /gs3-extensions/mars-src/trunk/src/wavesurfer-player/css/ribbon.css
===================================================================
--- /gs3-extensions/mars-src/trunk/src/wavesurfer-player/css/ribbon.css	(revision 34370)
+++ /gs3-extensions/mars-src/trunk/src/wavesurfer-player/css/ribbon.css	(revision 34370)
@@ -0,0 +1,140 @@
+/*!
+ * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
+ * https://github.com/simonwhitaker/github-fork-ribbon-css
+*/
+
+/* Left will inherit from right (so we don't need to duplicate code) */
+.github-fork-ribbon {
+  /* The right and left classes determine the side we attach our banner to */
+  position: absolute;
+
+  /* Add a bit of padding to give some substance outside the "stitching" */
+  padding: 2px 0;
+
+  /* Set the base colour */
+  background-color: #a00;
+
+  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+
+  /* Add a drop shadow */
+  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+
+  /* Set the font */
+  font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  z-index: 9999;
+  pointer-events: auto;
+}
+
+.github-fork-ribbon a,
+.github-fork-ribbon a:hover {
+  /* Set the text properties */
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+  text-align: center;
+
+  /* Set the geometry. If you fiddle with these you'll also need
+     to tweak the top and right values in .github-fork-ribbon. */
+  width: 200px;
+  line-height: 20px;
+
+  /* Set the layout properties */
+  display: inline-block;
+  padding: 2px 0;
+
+  /* Add "stitching" effect */
+  border-width: 1px 0;
+  border-style: dotted;
+  border-color: #fff;
+  border-color: rgba(255, 255, 255, 0.7);
+}
+
+.github-fork-ribbon-wrapper {
+  width: 150px;
+  height: 150px;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.github-fork-ribbon-wrapper.fixed {
+  position: fixed;
+}
+
+.github-fork-ribbon-wrapper.left {
+  left: 0;
+}
+
+.github-fork-ribbon-wrapper.right {
+  right: 0;
+}
+
+.github-fork-ribbon-wrapper.left-bottom {
+  position: fixed;
+  top: inherit;
+  bottom: 0;
+  left: 0;
+}
+
+.github-fork-ribbon-wrapper.right-bottom {
+  position: fixed;
+  top: inherit;
+  bottom: 0;
+  right: 0;
+}
+
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+  top: 42px;
+  right: -43px;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+  top: 42px;
+  left: -43px;
+
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+  top: 80px;
+  left: -43px;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+  top: 80px;
+  right: -43px;
+
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
Index: /gs3-extensions/mars-src/trunk/src/wavesurfer-player/css/style.css
===================================================================
--- /gs3-extensions/mars-src/trunk/src/wavesurfer-player/css/style.css	(revision 34370)
+++ /gs3-extensions/mars-src/trunk/src/wavesurfer-player/css/style.css	(revision 34370)
@@ -0,0 +1,110 @@
+/* Space out content a bit */
+body {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+/* Everything but the jumbotron gets side spacing for mobile first views */
+.header,
+.marketing,
+.footer {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+/* Custom page header */
+.header {
+    border-bottom: 1px solid #e5e5e5;
+}
+
+/* Make the masthead heading the same height as the navigation */
+.header h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 40px;
+    padding-bottom: 19px;
+}
+
+/* Custom page footer */
+.footer {
+    padding-top: 19px;
+    color: #777;
+    border-top: 1px solid #e5e5e5;
+}
+
+/* Customize container */
+@media (min-width: 1024px) {
+    .container {
+        max-width: 900px;
+    }
+}
+
+.container-narrow > hr {
+    margin: 30px 0;
+}
+
+/* Supporting marketing content */
+.marketing {
+    margin: 40px 0;
+}
+
+.marketing p + h4 {
+    margin-top: 28px;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+    /* Remove the padding we set earlier */
+    .header,
+    .marketing,
+    .footer {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    /* Space out the masthead */
+    .header {
+        margin-bottom: 30px;
+    }
+}
+
+.controls {
+    padding: 30px 0 15px;
+    text-align: center;
+}
+
+.controls .btn {
+    margin-bottom: 15px;
+}
+
+@media screen and (min-width: 990px) {
+    .controls .mark-controls {
+        display: inline;
+    }
+}
+
+.lead {
+    text-align: center;
+    padding: 20px;
+}
+
+#waveform {
+    position: relative;
+}
+
+#progress-bar {
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    margin-top: -10px;
+    left: 5%;
+    width: 90%;
+}
+
+#drop {
+    border: 3px dashed #ddd;
+    padding: 30px;
+}
+
+#drop.wavesurfer-dragover {
+    border-color: #333;
+}
Index: /gs3-extensions/mars-src/trunk/src/wavesurfer-player/wavesurfer-player.js
===================================================================
--- /gs3-extensions/mars-src/trunk/src/wavesurfer-player/wavesurfer-player.js	(revision 34370)
+++ /gs3-extensions/mars-src/trunk/src/wavesurfer-player/wavesurfer-player.js	(revision 34370)
@@ -0,0 +1,41 @@
+'use strict';
+
+// Create an instance
+var wavesurfer = {};
+
+// Init & load audio file
+document.addEventListener('DOMContentLoaded', function() {
+    wavesurfer = WaveSurfer.create({
+        container: document.querySelector('#waveform'),
+	minPxPerSec: 2,
+	//normalize: true,
+	barWidth: 2,
+	barHeight: 3, // the height of the wave
+	barGap: 1, // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
+        plugins: [
+            WaveSurfer.cursor.create({
+                showTime: true,
+                opacity: 1,
+                customShowTimeStyle: {
+                    'background-color': '#000',
+                    color: '#fff',
+                    padding: '2px',
+                    'font-size': '10px'
+                }
+		}),
+	    WaveSurfer.timeline.create({
+		    container: "#wave-timeline"
+		})
+        ]
+    });
+
+    wavesurfer.on('error', function(e) {
+        console.warn(e);
+    });
+
+
+    // Play button
+    var button = document.querySelector('[data-action="play"]');
+
+    button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
+});
