diff --git a/audino/frontend/package.json b/audino/frontend/package.json
index ef3eb7eb..f46583c0 100644
--- a/audino/frontend/package.json
+++ b/audino/frontend/package.json
@@ -24,13 +24,14 @@
     "popper.js": "^1.16.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-bootstrap": "^1.0.1",
+    "react-bootstrap": "^1.6.3",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
     "react-redux": "^7.2.6",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "3.4.1",
+    "resize-image-data": "^0.3.0",
     "redux": "^4.1.2",
     "uuid": "^8.3.2",
     "wavesurfer.js": "^5.2.0"
diff --git a/audino/frontend/scripts/run-dev.sh b/audino/frontend/scripts/run-dev.sh
index 97875833..f4e91f24 100644
--- a/audino/frontend/scripts/run-dev.sh
+++ b/audino/frontend/scripts/run-dev.sh
@@ -9,6 +9,7 @@ echo "npm install"
     cd "${app}" && npm install
     cd "${app}" && npm install jszip
     cd "${app}" && npm install file-saver
+    cd "${app}" && npm i resize-image-data
 } || {
     echo "package update broke install, deleting node_modules"
     cd "${app}" && rm -rf node_modules
diff --git a/audino/frontend/src/components/annotate/navbutton.js b/audino/frontend/src/components/annotate/navbutton.js
index a10366c2..526bb9f8 100644
--- a/audino/frontend/src/components/annotate/navbutton.js
+++ b/audino/frontend/src/components/annotate/navbutton.js
@@ -34,7 +34,7 @@ const NavButton = props => {
     previous_pages[num_of_prev] = dataId;
     localStorage.setItem('previous_links', JSON.stringify(previous_pages));
     localStorage.setItem('count', JSON.stringify(next_page_num));
-
+    console.log("configed browser settings")
     if (noMore) {
       window.location.href = `${path}/projects/${projectId}/data`;
     } else {
@@ -69,6 +69,7 @@ const NavButton = props => {
     })
       .then(response => {
         const { data_id } = response.data;
+        console.log("successfully prepared next data point")
         loadNextPage(response.status === 202, data_id);
       })
       .catch(e => {
diff --git a/audino/frontend/src/components/annotate/sampleRateChanger.js b/audino/frontend/src/components/annotate/sampleRateChanger.js
new file mode 100644
index 00000000..37bbfc93
--- /dev/null
+++ b/audino/frontend/src/components/annotate/sampleRateChanger.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button } from '../button';
+
+const SampleRateChanger = props => {
+    const {annotate, state} =  props
+    const {wavesurfer, filename, spectrogram} = state
+    const [text, setText] = React.useState("")
+    const [hz, setHz] = React.useState(0)
+    const [hz2, setHz2] = React.useState(Number(wavesurfer.backend.offlineAc.sampleRate/1000))
+
+    const handleSubmit = () => {
+      const int = parseInt(text, 10)
+
+      const newState = annotate.initalState;
+      newState["sampleRate"] = int || 44100
+      wavesurfer.load(`/audios/${filename}`, null, null, null, int );
+    }
+
+    const inputText = e => {
+      setText(e.target.value)
+    }
+
+    const ChangeColorChange = e => {
+      setHz(e.target.value)
+      wavesurfer.empty()
+      wavesurfer.load(`/audios/${filename}`, null, null, null, e.target.value * 1000);
+    }
+
+    return (
+      <div className="sideMenuItem">
+       <input
+        type="range"
+        min="0"
+        max={`${Number(wavesurfer.backend.offlineAc.sampleRate/1000) - 1}`}
+        value={hz}
+        onChange={e => {
+          setHz(e.target.value)
+          spectrogram.scale(e.target.value, hz2, wavesurfer.backend.offlineAc.sampleRate/1000)
+        }} />
+       <input
+        type="range"
+        min="1"
+        max={`${Number(wavesurfer.backend.offlineAc.sampleRate/1000)}`}
+        value={hz2}
+        onChange={e => {
+          setHz2(e.target.value);
+          spectrogram.scale(0, e.target.value, Math.ceil(wavesurfer.backend.offlineAc.sampleRate/1000))
+          /*Object.values(wavesurfer.regions.list).forEach(segment => {
+            segment.scale(e.target.value * 1000)
+          })*/
+        }}
+      />
+      {hz/2 + " - " + hz2/2 + " khz"}
+      </div>
+    )
+};
+
+export default SampleRateChanger;
diff --git a/audino/frontend/src/components/annotate/zoom.js b/audino/frontend/src/components/annotate/zoom.js
new file mode 100644
index 00000000..a4f484f8
--- /dev/null
+++ b/audino/frontend/src/components/annotate/zoom.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import StickySlider from '../stickySlider';
+const Zoom = props => {
+  const {annotate} = props
+  const {state} = annotate;
+  const {isRendering, wavesurfer, zoomOn} = state
+
+  /*wavesurfer.on('zoom', pxPerSec => {
+    wavesurfer.spectrogram._onUpdate(pxPerSec * wavesurfer.getDuration());
+  })*/
+
+  const handleZoom = value => {
+    console.log("hello", wavesurfer, state, annotate, props)
+    wavesurfer.zoom(value);
+    wavesurfer.spectrogram._onUpdate()
+  }
+
+  return (
+    <div>
+      {zoomOn ?  
+      <div
+        style={{ display: isRendering ? 'none' : '' }}
+      >
+      <StickySlider
+        min="1"
+        max="200"
+        finalChangeCallback={value => handleZoom(value)}
+        stickyPos={[0, 200]}
+        threshold={5}
+      />
+      </div>
+       : null}
+     
+    </div>
+    
+  );
+};
+
+export default Zoom;
diff --git a/audino/frontend/src/components/sideMenu.js b/audino/frontend/src/components/sideMenu.js
index 46b6da4e..67869c3c 100644
--- a/audino/frontend/src/components/sideMenu.js
+++ b/audino/frontend/src/components/sideMenu.js
@@ -6,7 +6,8 @@ import { Button, IconButton } from './button';
 import SpectroChanger from './annotate/spectroChanger';
 import ChangePlayback from './annotate/extraFeatures/changePlayback';
 import PreviousAnnotationButton from './annotate/extraFeatures/previousAnnotationButton';
-
+import SampleRateChanger from './annotate/sampleRateChanger';
+import Zoom from './annotate/zoom';
 const SideMenuTab = props => {
   const { tab, icon, tabOpen, setTab } = props;
   const swapTabs = tab => {
@@ -100,6 +101,8 @@ const SideMenu = props => {
           <ChangePlayback annotate={annotate} />
           <PreviousAnnotationButton annotate={annotate} />
           {toUnsavedClipOn && annotate.UnsavedButton ? annotate.UnsavedButton.render() : null}
+          <SampleRateChanger state={state}  annotate={annotate}/>
+          <Zoom annotate={annotate} />
 
           <br />
           <Button
diff --git a/audino/frontend/src/components/stickySlider.js b/audino/frontend/src/components/stickySlider.js
index ba451d71..75acb249 100644
--- a/audino/frontend/src/components/stickySlider.js
+++ b/audino/frontend/src/components/stickySlider.js
@@ -9,7 +9,8 @@ const StickySlider = ({
   hasLabels = true,
   threshold = 10,
   stickyPos = [],
-  changeCallback = noop
+  changeCallback = noop,
+  finalChangeCallback = noop
 }) => {
   const [value, setValue] = React.useState(Math.floor((max - min) / 2));
 
@@ -25,6 +26,7 @@ const StickySlider = ({
       if (Math.abs(pos - finalValue) < threshold) finalValue = pos;
     });
     changeCallback(finalValue);
+    finalChangeCallback(finalValue)
     setValue(finalValue);
   };
 
diff --git a/audino/frontend/src/containers/forms/featureForm.js b/audino/frontend/src/containers/forms/featureForm.js
index 921beb1d..8c1de8e9 100644
--- a/audino/frontend/src/containers/forms/featureForm.js
+++ b/audino/frontend/src/containers/forms/featureForm.js
@@ -21,7 +21,8 @@ class FeatureForm extends React.Component {
         '2D Labels': false,
         'to unsaved cliped': false,
         playbackOn: false,
-        'spectrogram demo': false
+        'spectrogram demo': false,
+        'zoom': true,
       }
     };
 
diff --git a/audino/frontend/src/css/index.css b/audino/frontend/src/css/index.css
index b4d7720e..eee4c985 100644
--- a/audino/frontend/src/css/index.css
+++ b/audino/frontend/src/css/index.css
@@ -29,6 +29,14 @@ body,
   float: left;
 }
 
+#wavegraph-fliped {
+  width: 200%;
+  top: 256px;
+  position: relative;
+  float: left;
+  transform: scaleY(-1);
+}
+
 #waveform-labels {
   width: 100%;
   position: relative;
diff --git a/audino/frontend/src/pages/annotate.js b/audino/frontend/src/pages/annotate.js
index 653fa32a..0084dd27 100644
--- a/audino/frontend/src/pages/annotate.js
+++ b/audino/frontend/src/pages/annotate.js
@@ -83,7 +83,8 @@ class Annotate extends React.Component {
           toUnsavedClipOn: response.data.features_list['to unsaved cliped'],
           referenceWindowOn: response.data.features_list['reference window'],
           playbackOn: response.data.features_list.playbackOn,
-          spectrogramDemoOn: response.data.features_list['spectrogram demo']
+          spectrogramDemoOn: response.data.features_list['spectrogram demo'],
+          zoomOn: response.data.features_list['zoom']
         });
 
         const wavesurferMethods = new WavesurferMethods({
@@ -146,13 +147,19 @@ class Annotate extends React.Component {
   }
 
   loadFileMetadata(response, boundingBox, wavesurfer, wavesurferMethods) {
+    console.log("hello?????????????????????????")
     this.setState({
       isDataLoading: false,
-      labels: response[0].data
+      labels: response[0].data,
+      wavesurfer,
+      wavesurferMethods
     });
 
-    const { is_marked_for_review, segmentations, filename, original_filename } = response[1].data;
-
+    const { is_marked_for_review, segmentations, filename, original_filename, sampling_rate } = response[1].data;
+    let {sampleRate} = this.state
+    if (!sampleRate) {
+      sampleRate = sampling_rate
+    }
     const regions = segmentations.map(segmentation => {
       if (boundingBox) {
         return {
@@ -180,18 +187,20 @@ class Annotate extends React.Component {
         boundingBox
       };
     });
-
+    console.log("hello?????????????????????????", this.state.wavesurfer)
     this.setState({
       isDataLoading: false,
       isMarkedForReview: is_marked_for_review,
       original_filename
     });
+    console.log("hello?????????????????????????")
 
-    wavesurfer.load(`/audios/${filename}`);
+    console.log("start load", sampleRate)
+    wavesurfer.load(`/audios/${filename}`, null, null, null, sampleRate);
     const { zoom } = this.state;
     wavesurfer.zoom(zoom);
 
-    this.setState({ wavesurfer, wavesurferMethods });
+    this.setState({ wavesurfer, wavesurferMethods, filename });
     this.loadRegions(regions);
   }
 
@@ -203,8 +212,9 @@ class Annotate extends React.Component {
     newState.segmentationUrl = `/api/projects/${projectId}/data/${nextDataId}/segmentations`;
     newState.dataId = nextDataId;
     newState.wavesurfer = null;
-
+    console.log("configed new state")
     wavesurfer.destroy();
+    console.log("wavesurfer destroied")
     this.setState(newState, () => {
       this.componentDidMount();
     });
diff --git a/audino/frontend/src/pages/annotateHelpers/wavesurferMethods.js b/audino/frontend/src/pages/annotateHelpers/wavesurferMethods.js
index efdb4b65..36d67d68 100644
--- a/audino/frontend/src/pages/annotateHelpers/wavesurferMethods.js
+++ b/audino/frontend/src/pages/annotateHelpers/wavesurferMethods.js
@@ -164,13 +164,6 @@ class WavesurferMethods {
     wavesurfer.skipBackward(5);
   }
 
-  handleZoom(e) {
-    const { wavesurfer } = this.state;
-    const zoom = Number(e.target.value);
-    wavesurfer.zoom(zoom);
-    this.setState({ zoom });
-  }
-
   styleRegionColor(region, color) {
     region.style(region.element, {
       backgroundColor: color
diff --git a/audino/frontend/src/wavesurfer.js/src/plugin/regions/region.js b/audino/frontend/src/wavesurfer.js/src/plugin/regions/region.js
index 14bf9c5c..e75fd41a 100644
--- a/audino/frontend/src/wavesurfer.js/src/plugin/regions/region.js
+++ b/audino/frontend/src/wavesurfer.js/src/plugin/regions/region.js
@@ -110,6 +110,17 @@ export default class Region {
     };
   }
 
+    async scale(newMaxFrequency) {
+
+        const freqRatio = newMaxFrequency / this.maxFrequency
+        console.log(this.maxFrequency, newMaxFrequency, freqRatio )
+        this.maxFrequency = newMaxFrequency
+        console.log(this.top, this.top / freqRatio )
+        this.top = this.top * freqRatio
+        this.bot = this.bot * freqRatio
+        this.update({})
+    }
+
   /* Update region params. */
   update(params) {
     if (params.start != null) {
diff --git a/audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/index.js b/audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/index.js
index 9908e1d2..b04d1b51 100644
--- a/audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/index.js
+++ b/audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/index.js
@@ -283,6 +283,16 @@ export default class SpectrogramPlugin {
   }
 
   render(zoom = false) {
+    this.loadLabels(
+        'rgba(68,68,68,0.5)',
+        '12px',
+        '10px',
+        '',
+        '#fff',
+        '#f7f7f7',
+        'center',
+        '#specLabels'
+      );
     this.updateCanvasStyle(zoom);
 
     if (this.frequenciesDataUrl) {
@@ -334,7 +344,7 @@ export default class SpectrogramPlugin {
       }
       spectrCc.putImageData(imageData, 0, 0);
       try {
-        const test = new Spectrogram(my.wavesurfer, spectrCc, imageData, pixels, heightFactor);
+        const test = new Spectrogram(my.wavesurfer, spectrCc, imageData, pixels, heightFactor, my);
       } catch (e) {
         console.error(e);
       }
@@ -349,7 +359,9 @@ export default class SpectrogramPlugin {
     const { buffer } = this;
     const channelOne = buffer.getChannelData(0);
     // const bufferLength = buffer.length;
-    const { sampleRate } = buffer;
+    let { sampleRate } = buffer;
+    //sampleRate = 18000 * 2
+    console.log(sampleRate)
     const frequencies = [];
 
     if (!buffer) {
@@ -405,7 +417,9 @@ export default class SpectrogramPlugin {
     textColorFreq,
     textColorUnit,
     textAlign,
-    container
+    container,
+    sampleRateParam=null,
+    sampleRateMin=null
   ) {
     const frequenciesHeight = this.height;
     bgFill = bgFill || 'rgba(68,68,68,0)';
@@ -419,8 +433,21 @@ export default class SpectrogramPlugin {
     const bgWidth = 55;
     const getMaxY = frequenciesHeight || 512;
     const labelIndex = 5 * (getMaxY / 256);
-    const freqStart = 0;
-    const step = (this.wavesurfer.backend.ac.sampleRate / 2 - freqStart) / labelIndex;
+    const freqStart = sampleRateMin || 0;
+
+    let sampleRate = sampleRateParam
+    if (sampleRate === null) {
+        if (this.wavesurfer.backend.offlineAc.sampleRate) {
+            sampleRate = this.wavesurfer.backend.offlineAc.sampleRate
+        } else if (this.wavesurfer.backend.ac.sampleRate) {
+            sampleRate = this.wavesurfer.backend.ac.sampleRate
+        }
+    } else {
+        sampleRate = sampleRateParam
+    }
+
+
+    const step = (sampleRate / 2 - freqStart) / labelIndex;
 
     // prepare canvas element for labels
     const ctx = this.labelsEl.getContext('2d');
diff --git a/audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/spectrogram.js b/audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/spectrogram.js
index f4a34afd..a8d8775a 100644
--- a/audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/spectrogram.js
+++ b/audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/spectrogram.js
@@ -3,7 +3,7 @@
 const colormap = require('colormap');
 
 class Spectrogram {
-  constructor(wavesurfer, spectrCc, imageData, pixels, heightFactor) {
+  constructor(wavesurfer, spectrCc, imageData, pixels, heightFactor, render) {
     this.wavesurfer = wavesurfer;
     this.spectrCc = spectrCc;
     this.imageData = imageData;
@@ -13,6 +13,7 @@ class Spectrogram {
     this.wavesurfer.fireEvent('spectrogram_created', this);
     const { width, height, data } = this.imageData;
     this.copyID = this.copy(width, height, data);
+    this.render = render
 
     // TODO: capture frequency data output then use it to import new colormaps
   }
@@ -110,6 +111,74 @@ class Spectrogram {
     this.spectrCc.putImageData(imageData, 0, 0);
     this.imageData = imageData;
   }
+
+  scale(newHzMin, newHzMax, initMaxHz) {
+    console.log(newHzMin, newHzMax, initMaxHz)
+    const resizeImageData = require('resize-image-data')
+    newHzMin /= 2
+    newHzMax /= 2
+    const colorMapArray = colormap({
+        colormap: "warm",
+        nshades: 256,
+        format: 'float',
+        alpha: 1
+      });
+
+    const fftSamples = 256
+    const sampleToFreq = fftSamples/initMaxHz
+    const minSample = Math.floor(newHzMin * sampleToFreq)
+    console.log("minSample", minSample)
+    const maxSample = Math.floor(newHzMax * sampleToFreq)
+    console.log("maxSample", maxSample)
+    const pixels = this.pixels;
+    const { width, height } = this.imageData;
+    const heightFactor = this.heightFactor;
+    const newHeight = maxSample - (minSample)
+    console.log("maxSample", newHeight, height) // 531
+
+    const imageData = this.spectrCc.createImageData(width, newHeight);
+    let i;
+    let y;
+    let k;
+
+    for (i = 0; i < pixels.length; i++) {
+        let count = 0;
+        let newY = Math.min(maxSample - minSample, pixels[i].length)
+        for (y = minSample; y < pixels[i].length ; y++) { //&& j < maxSample
+            const colorMap = colorMapArray[pixels[i][y]];
+            /* eslint-disable max-depth */
+            var index = 4 * (i + (newY) * width);
+            //const redIndex = y * (width * 4) + i * 4;
+            imageData.data[index] = colorMap[0] * 255;
+            imageData.data[index + 1] = colorMap[1] * 255;
+            imageData.data[index + 2] = colorMap[2] * 255;
+            imageData.data[index + 3] = colorMap[3] * 255;
+            /* eslint-enable max-depth */
+            newY--
+            count++
+        }
+    }
+
+    const result = resizeImageData(imageData, width, height, 'nearest-neighbor')
+    console.log(result.height)
+    const imageData2 = this.spectrCc.createImageData(width, height);
+    this.spectrCc.putImageData(imageData2, 0, 0)
+    this.spectrCc.putImageData(result, 0, Math.max(0, height - height / newHeight * height))
+    console.log(Math.max(0, height - height / newHeight * height))
+    this.render.loadLabels(
+        'rgba(68,68,68,0.5)',
+        '12px',
+        '10px',
+        '',
+        '#fff',
+        '#f7f7f7',
+        'center',
+        '#specLabels',
+        newHzMax * 2000,
+        newHzMin * 1000
+      );
+
+  }
 }
 
 export default Spectrogram;
diff --git a/audino/frontend/src/wavesurfer.js/src/wavesurfer.js b/audino/frontend/src/wavesurfer.js/src/wavesurfer.js
index 77748edc..de2dc87d 100644
--- a/audino/frontend/src/wavesurfer.js/src/wavesurfer.js
+++ b/audino/frontend/src/wavesurfer.js/src/wavesurfer.js
@@ -1302,12 +1302,14 @@ export default class WaveSurfer extends util.Observer {
    * @private
    * @param {ArrayBuffer} arraybuffer Buffer to process
    */
-  loadArrayBuffer(arraybuffer) {
+   loadArrayBuffer(arraybuffer, sampleRate = null) {
+       console.log(arraybuffer, sampleRate)
     this.decodeArrayBuffer(arraybuffer, data => {
+        console.log(data)
       if (!this.isDestroyed) {
         this.loadDecodedBuffer(data);
       }
-    });
+    }, sampleRate);
   }
 
   /**
@@ -1318,6 +1320,7 @@ export default class WaveSurfer extends util.Observer {
    * @emits WaveSurfer#ready
    */
   loadDecodedBuffer(buffer) {
+    console.log(buffer)
     this.backend.load(buffer);
     this.drawBuffer();
     this.isReady = true;
@@ -1371,7 +1374,7 @@ export default class WaveSurfer extends util.Observer {
    *   true
    * );
    */
-   load(url, peaks, preload, duration) {
+   load(url, peaks, preload, duration, sampleRate) {
     if (!url) {
         throw new Error('url parameter cannot be empty');
     }
@@ -1408,10 +1411,10 @@ export default class WaveSurfer extends util.Observer {
     if (this.params.backend === 'WebAudio' && url instanceof HTMLMediaElement) {
         url = url.src;
     }
-
+    console.log(sampleRate)
     switch (this.params.backend) {
         case 'WebAudio':
-            return this.loadBuffer(url, peaks, duration);
+            return this.loadBuffer(url, peaks, duration, sampleRate);
         case 'MediaElement':
         case 'MediaElementWebAudio':
             return this.loadMediaElement(url, peaks, preload, duration);
@@ -1428,12 +1431,13 @@ export default class WaveSurfer extends util.Observer {
    * @param {?number} duration Optional duration of audio file
    * @returns {void}
    */
-  loadBuffer(url, peaks, duration) {
+  loadBuffer(url, peaks, duration, sampleRate = null) {
+      console.log(sampleRate)
     const load = action => {
       if (action) {
         this.tmpEvents.push(this.once('ready', action));
       }
-      return this.getArrayBuffer(url, data => this.loadArrayBuffer(data));
+      return this.getArrayBuffer(url, data => this.loadArrayBuffer(data, sampleRate));
     };
 
     if (peaks) {
@@ -1514,7 +1518,7 @@ export default class WaveSurfer extends util.Observer {
    * @param {Object} arraybuffer The array buffer to decode
    * @param {function} callback The function to call on complete
    */
-  decodeArrayBuffer(arraybuffer, callback) {
+  decodeArrayBuffer(arraybuffer, callback, sampleRate) {
     this.arraybuffer = arraybuffer;
     this.backend.decodeArrayBuffer(
       arraybuffer,
@@ -1526,7 +1530,8 @@ export default class WaveSurfer extends util.Observer {
           this.arraybuffer = null;
         }
       },
-      () => this.fireEvent('error', 'Error decoding audiobuffer')
+      () => this.fireEvent('error', 'Error decoding audiobuffer'),
+      sampleRate
     );
   }
 
diff --git a/audino/frontend/src/wavesurfer.js/src/webaudio.js b/audino/frontend/src/wavesurfer.js/src/webaudio.js
index 11d23c99..573b4b02 100644
--- a/audino/frontend/src/wavesurfer.js/src/webaudio.js
+++ b/audino/frontend/src/wavesurfer.js/src/webaudio.js
@@ -70,6 +70,35 @@ export default class WebAudio extends util.Observer {
     return !!(window.AudioContext || window.webkitAudioContext);
   }
 
+  createVolumeNode() {
+    // Create gain node using the AudioContext
+    if (this.ac.createGain) {
+      this.gainNode = this.ac.createGain();
+    } else {
+      this.gainNode = this.ac.createGainNode();
+    }
+    // Add the gain node to the graph
+    this.gainNode.connect(this.ac.destination);
+  }
+
+
+/** Create analyser node to perform audio analysis */
+createAnalyserNode() {
+    this.analyser = this.ac.createAnalyser();
+    this.analyser.connect(this.gainNode);
+  }
+
+  createScriptNode() {
+    if (this.params.audioScriptProcessor) {
+      this.scriptNode = this.params.audioScriptProcessor;
+    } else if (this.ac.createScriptProcessor) {
+      this.scriptNode = this.ac.createScriptProcessor(WebAudio.scriptBufferSize);
+    } else {
+      this.scriptNode = this.ac.createJavaScriptNode(WebAudio.scriptBufferSize);
+    }
+    this.scriptNode.connect(this.ac.destination);
+  }
+
   /**
    * Get the audio context used by this backend or create one
    *
@@ -102,280 +131,100 @@ export default class WebAudio extends util.Observer {
    *
    * @param {WavesurferParams} params Wavesurfer parameters
    */
-  constructor(params) {
-    super();
-    /** @private */
-    this.params = params;
-    /** ac: Audio Context instance */
-    this.ac = params.audioContext || (this.supportsWebAudio() ? this.getAudioContext() : {});
-    /** @private */
-    this.lastPlay = this.ac.currentTime;
-    /** @private */
-    this.startPosition = 0;
-    /** @private */
-    this.scheduledPause = null;
-    /** @private */
-    this.states = {
-      [PLAYING]: Object.create(this.stateBehaviors[PLAYING]),
-      [PAUSED]: Object.create(this.stateBehaviors[PAUSED]),
-      [FINISHED]: Object.create(this.stateBehaviors[FINISHED])
-    };
-    /** @private */
-    this.buffer = null;
-    /** @private */
-    this.filters = [];
-    /** gainNode: allows to control audio volume */
-    this.gainNode = null;
-    /** @private */
-    this.mergedPeaks = null;
-    /** @private */
-    this.offlineAc = null;
-    /** @private */
-    this.peaks = null;
-    /** @private */
-    this.playbackRate = 1;
-    /** analyser: provides audio analysis information */
-    this.analyser = null;
-    /** scriptNode: allows processing audio */
-    this.scriptNode = null;
-    /** @private */
-    this.source = null;
-    /** @private */
-    this.splitPeaks = [];
-    /** @private */
-    this.state = null;
-    /** @private */
-    this.explicitDuration = params.duration;
+
     /**
-     * Boolean indicating if the backend was destroyed.
+     * Does the browser support this backend
+     *
+     * @return {boolean} Whether or not this browser supports this backend
      */
-    this.destroyed = false;
-  }
-
-  /**
-   * Initialise the backend, called in `wavesurfer.createBackend()`
-   */
-  init() {
-    this.createVolumeNode();
-    this.createScriptNode();
-    this.createAnalyserNode();
-
-    this.setState(PAUSED);
-    this.setPlaybackRate(this.params.audioRate);
-    this.setLength(0);
-  }
-
-  /** @private */
-  disconnectFilters() {
-    if (this.filters) {
-      this.filters.forEach(filter => {
-        filter && filter.disconnect();
-      });
-      this.filters = null;
-      // Reconnect direct path
-      this.analyser.connect(this.gainNode);
-    }
-  }
-
-  /**
-   * @private
-   *
-   * @param {string} state The new state
-   */
-  setState(state) {
-    if (this.state !== this.states[state]) {
-      this.state = this.states[state];
-      this.state.init.call(this);
-    }
-  }
-
-  /**
-   * Unpacked `setFilters()`
-   *
-   * @param {...AudioNode} filters One or more filters to set
-   */
-  setFilter(...filters) {
-    this.setFilters(filters);
-  }
-
-  /**
-   * Insert custom Web Audio nodes into the graph
-   *
-   * @param {AudioNode[]} filters Packed filters array
-   * @example
-   * const lowpass = wavesurfer.backend.ac.createBiquadFilter();
-   * wavesurfer.backend.setFilter(lowpass);
-   */
-  setFilters(filters) {
-    // Remove existing filters
-    this.disconnectFilters();
-
-    // Insert filters if filter array not empty
-    if (filters && filters.length) {
-      this.filters = filters;
-
-      // Disconnect direct path before inserting filters
-      this.analyser.disconnect();
-
-      // Connect each filter in turn
-      filters
-        .reduce((prev, curr) => {
-          prev.connect(curr);
-          return curr;
-        }, this.analyser)
-        .connect(this.gainNode);
-    }
-  }
-
-  /** Create ScriptProcessorNode to process audio */
-  createScriptNode() {
-    if (this.params.audioScriptProcessor) {
-      this.scriptNode = this.params.audioScriptProcessor;
-    } else if (this.ac.createScriptProcessor) {
-      this.scriptNode = this.ac.createScriptProcessor(WebAudio.scriptBufferSize);
-    } else {
-      this.scriptNode = this.ac.createJavaScriptNode(WebAudio.scriptBufferSize);
-    }
-    this.scriptNode.connect(this.ac.destination);
-  }
-
-  /** @private */
-  addOnAudioProcess() {
-    this.scriptNode.onaudioprocess = () => {
-      const time = this.getCurrentTime();
-
-      if (time >= this.getDuration()) {
-        this.setState(FINISHED);
-        this.fireEvent('pause');
-      } else if (time >= this.scheduledPause) {
-        this.pause();
-      } else if (this.state === this.states[PLAYING]) {
-        this.fireEvent('audioprocess', time);
-      }
-    };
-  }
-
-  /** @private */
-  removeOnAudioProcess() {
-    this.scriptNode.onaudioprocess = null;
-  }
-
-  /** Create analyser node to perform audio analysis */
-  createAnalyserNode() {
-    this.analyser = this.ac.createAnalyser();
-    this.analyser.connect(this.gainNode);
-  }
-
-  /**
-   * Create the gain node needed to control the playback volume.
-   *
-   */
-  createVolumeNode() {
-    // Create gain node using the AudioContext
-    if (this.ac.createGain) {
-      this.gainNode = this.ac.createGain();
-    } else {
-      this.gainNode = this.ac.createGainNode();
+    supportsWebAudio() {
+        return !!(window.AudioContext || window.webkitAudioContext);
     }
-    // Add the gain node to the graph
-    this.gainNode.connect(this.ac.destination);
-  }
-
-  /**
-   * Set the sink id for the media player
-   *
-   * @param {string} deviceId String value representing audio device id.
-   * @returns {Promise} A Promise that resolves to `undefined` when there
-   * are no errors.
-   */
-  setSinkId(deviceId) {
-    if (deviceId) {
-      /**
-       * The webaudio API doesn't currently support setting the device
-       * output. Here we create an HTMLAudioElement, connect the
-       * webaudio stream to that element and setSinkId there.
-       */
-      const audio = new window.Audio();
-      if (!audio.setSinkId) {
-        return Promise.reject(new Error('setSinkId is not supported in your browser'));
-      }
-      audio.autoplay = true;
-      const dest = this.ac.createMediaStreamDestination();
-      this.gainNode.disconnect();
-      this.gainNode.connect(dest);
-      audio.srcObject = dest.stream;
 
-      return audio.setSinkId(deviceId);
+    /**
+     * Get the audio context used by this backend or create one
+     *
+     * @return {AudioContext} Existing audio context, or creates a new one
+     */
+    getAudioContext() {
+        if (!window.WaveSurferAudioContext) {
+            window.WaveSurferAudioContext = new (window.AudioContext ||
+                window.webkitAudioContext)();
+        }
+        return window.WaveSurferAudioContext;
     }
-    return Promise.reject(new Error(`Invalid deviceId: ${deviceId}`));
-  }
-
-  /**
-   * Set the audio volume
-   *
-   * @param {number} value A floating point value between 0 and 1.
-   */
-  setVolume(value) {
-    this.gainNode.gain.setValueAtTime(value, this.ac.currentTime);
-  }
-
-  /**
-   * Get the current volume
-   *
-   * @return {number} value A floating point value between 0 and 1.
-   */
-  getVolume() {
-    return this.gainNode.gain.value;
-  }
 
-  /**
-   * Decode an array buffer and pass data to a callback
-   *
-   * @private
-   * @param {ArrayBuffer} arraybuffer The array buffer to decode
-   * @param {function} callback The function to call on complete.
-   * @param {function} errback The function to call on error.
-   */
-  async decodeArrayBuffer(arraybuffer, callback, errback) {
-    if (!this.offlineAc) {
-      this.offlineAc = this.getOfflineAudioContext(
-        this.ac && this.ac.sampleRate ? this.ac.sampleRate : 44100
-      );
-    }
-    if ('webkitAudioContext' in window) {
-      // Safari: no support for Promise-based decodeAudioData enabled
-      // Enable it in Safari using the Experimental Features > Modern WebAudio API option
-      this.offlineAc.decodeAudioData(arraybuffer, data => callback(data), errback);
-    } else {
-      /* const context = new (window.AudioContext || window.webkitAudioContext)();
-            const audiobuffer = await context.decodeAudioData( arraybuffer );
-            console.log(audiobuffer)
-            callback(audiobuffer) */
-      const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-      await audioCtx.decodeAudioData(
-        arraybuffer,
-        data => {
-          callback(data);
-        },
-        err => errback(err)
-      );
+    /**
+     * Get the offline audio context used by this backend or create one
+     *
+     * @param {number} sampleRate The sample rate to use
+     * @return {OfflineAudioContext} Existing offline audio context, or creates
+     * a new one
+     */
+    getOfflineAudioContext(sampleRate) {
+        window.WaveSurferOfflineAudioContext = new (window.OfflineAudioContext ||
+            window.webkitOfflineAudioContext)(1, 2, sampleRate);
+        return window.WaveSurferOfflineAudioContext;
     }
-  }
 
-  /**
-   * Set pre-decoded peaks
-   *
-   * @param {number[]|Number.<Array[]>} peaks Peaks data
-   * @param {?number} duration Explicit duration
-   */
-  setPeaks(peaks, duration) {
-    if (duration != null) {
-      this.explicitDuration = duration;
+    /**
+     * Construct the backend
+     *
+     * @param {WavesurferParams} params Wavesurfer parameters
+     */
+    constructor(params) {
+        super();
+        /** @private */
+        this.params = params;
+        /** ac: Audio Context instance */
+        this.ac =
+            params.audioContext ||
+            (this.supportsWebAudio() ? this.getAudioContext() : {});
+        /**@private */
+        this.lastPlay = this.ac.currentTime;
+        /** @private */
+        this.startPosition = 0;
+        /** @private */
+        this.scheduledPause = null;
+        /** @private */
+        this.states = {
+            [PLAYING]: Object.create(this.stateBehaviors[PLAYING]),
+            [PAUSED]: Object.create(this.stateBehaviors[PAUSED]),
+            [FINISHED]: Object.create(this.stateBehaviors[FINISHED])
+        };
+        /** @private */
+        this.buffer = null;
+        /** @private */
+        this.filters = [];
+        /** gainNode: allows to control audio volume */
+        this.gainNode = null;
+        /** @private */
+        this.mergedPeaks = null;
+        /** @private */
+        this.offlineAc = null;
+        /** @private */
+        this.peaks = null;
+        /** @private */
+        this.playbackRate = 1;
+        /** analyser: provides audio analysis information */
+        this.analyser = null;
+        /** scriptNode: allows processing audio */
+        this.scriptNode = null;
+        /** @private */
+        this.source = null;
+        /** @private */
+        this.splitPeaks = [];
+        /** @private */
+        this.state = null;
+        /** @private */
+        this.explicitDuration = params.duration;
+        /**
+         * Boolean indicating if the backend was destroyed.
+         */
+        this.destroyed = false;
     }
-    this.peaks = peaks;
-  }
 
-  /**
+     /**
    * Set the rendered length (different from the length of the audio)
    *
    * @param {number} length The rendered length
@@ -401,95 +250,83 @@ export default class WebAudio extends util.Observer {
     this.mergedPeaks[2 * (length - 1) + 1] = 0;
   }
 
-  /**
-   * Compute the max and min value of the waveform when broken into <length> subranges.
+    /**
+   * @private
    *
-   * @param {number} length How many subranges to break the waveform into.
-   * @param {number} first First sample in the required range.
-   * @param {number} last Last sample in the required range.
-   * @return {number[]|Number.<Array[]>} Array of 2*<length> peaks or array of arrays of
-   * peaks consisting of (max, min) values for each subrange.
+   * @param {string} state The new state
    */
-  getPeaks(length, first, last) {
-    if (this.peaks) {
-      return this.peaks;
-    }
-    if (!this.buffer) {
-      return [];
+  setState(state) {
+    if (this.state !== this.states[state]) {
+      this.state = this.states[state];
+      this.state.init.call(this);
     }
+  }
 
-    first = first || 0;
-    last = last || length - 1;
-
-    this.setLength(length);
-
-    if (!this.buffer) {
-      return this.params.splitChannels ? this.splitPeaks : this.mergedPeaks;
-    }
+   /** @private */
+   removeOnAudioProcess() {
+    this.scriptNode.onaudioprocess = null;
+  }
 
     /**
-     * The following snippet fixes a buffering data issue on the Safari
-     * browser which returned undefined It creates the missing buffer based
-     * on 1 channel, 4096 samples and the sampleRate from the current
-     * webaudio context 4096 samples seemed to be the best fit for rendering
-     * will review this code once a stable version of Safari TP is out
+     * Initialise the backend, called in `wavesurfer.createBackend()`
      */
-    if (!this.buffer.length) {
-      const newBuffer = this.createBuffer(1, 4096, this.sampleRate);
-      this.buffer = newBuffer.buffer;
+    init() {
+        this.createVolumeNode();
+        this.createScriptNode();
+        this.createAnalyserNode();
+
+        this.setState(PAUSED);
+        this.setPlaybackRate(this.params.audioRate);
+        this.setLength(0);
     }
 
-    const sampleSize = this.buffer.length / length;
-    const sampleStep = ~~(sampleSize / 10) || 1;
-    const channels = this.buffer.numberOfChannels;
-    let c;
-
-    for (c = 0; c < channels; c++) {
-      const peaks = this.splitPeaks[c];
-      const chan = this.buffer.getChannelData(c);
-      let i;
-
-      for (i = first; i <= last; i++) {
-        const start = ~~(i * sampleSize);
-        const end = ~~(start + sampleSize);
-        /**
-         * Initialize the max and min to the first sample of this
-         * subrange, so that even if the samples are entirely
-         * on one side of zero, we still return the true max and
-         * min values in the subrange.
-         */
-        let min = chan[start];
-        let max = min;
-        let j;
-
-        for (j = start; j < end; j += sampleStep) {
-          const value = chan[j];
-
-          if (value > max) {
-            max = value;
-          }
-
-          if (value < min) {
-            min = value;
-          }
-        }
-
-        peaks[2 * i] = max;
-        peaks[2 * i + 1] = min;
+    async decodeArrayBuffer(arraybuffer, callback, errback, sampleRate) {
+        console.log("in decode array buffer", sampleRate, sampleRate ? sampleRate: this.ac && this.ac.sampleRate ? this.ac.sampleRate : 44100)
+        this.offlineAc = this.getOfflineAudioContext(
+            sampleRate ? sampleRate: this.ac && this.ac.sampleRate ? this.ac.sampleRate : 44100
+        );
+
+        console.log(this.offlineAc)
+
+        if ('webkitAudioContext' in window) {
+            // Safari: no support for Promise-based decodeAudioData enabled
+            // Enable it in Safari using the Experimental Features > Modern WebAudio API option
+            this.offlineAc.decodeAudioData(
+                arraybuffer,
+                data => callback(data),
+                errback
+            );
+        } else {
+
+            /*const context = new (window.AudioContext || window.webkitAudioContext)();
+            const audiobuffer = await context.decodeAudioData( arraybuffer );
+            console.log(audiobuffer)
+            callback(audiobuffer)*/
+            console.log("here")
+            //var audioCtx = new (window.AudioContext || window.webkitAudioContext)(1, 2, sampleRate);
+            console.log(arraybuffer)
+            await this.offlineAc.decodeAudioData(arraybuffer,  (data) => {
+                callback(data)
+                console.log("here", data)
+            },
+            err => errback(err))
 
-        if (c == 0 || max > this.mergedPeaks[2 * i]) {
-          this.mergedPeaks[2 * i] = max;
         }
+    }
 
-        if (c == 0 || min < this.mergedPeaks[2 * i + 1]) {
-          this.mergedPeaks[2 * i + 1] = min;
+    /**
+     * Set pre-decoded peaks
+     *
+     * @param {number[]|Number.<Array[]>} peaks Peaks data
+     * @param {?number} duration Explicit duration
+     */
+    setPeaks(peaks, duration) {
+        if (duration != null) {
+            this.explicitDuration = duration;
         }
-      }
+        this.peaks = peaks;
     }
 
-    return this.params.splitChannels ? this.splitPeaks : this.mergedPeaks;
-  }
-
   /**
    * Get the position from 0 to 1
    *
@@ -506,6 +343,18 @@ export default class WebAudio extends util.Observer {
     }
   }
 
+   /** @private */
+   disconnectFilters() {
+    if (this.filters) {
+        this.filters.forEach(filter => {
+            filter && filter.disconnect();
+        });
+        this.filters = null;
+        // Reconnect direct path
+        this.analyser.connect(this.gainNode);
+    }
+}
+
   /**
    * Destroy all references with WebAudio, disconnecting audio nodes and closing Audio Context
    */
@@ -750,4 +599,110 @@ export default class WebAudio extends util.Observer {
   setPlayEnd(end) {
     this.scheduledPause = end;
   }
+
+   /**
+   * Compute the max and min value of the waveform when broken into <length> subranges.
+   *
+   * @param {number} length How many subranges to break the waveform into.
+   * @param {number} first First sample in the required range.
+   * @param {number} last Last sample in the required range.
+   * @return {number[]|Number.<Array[]>} Array of 2*<length> peaks or array of arrays of
+   * peaks consisting of (max, min) values for each subrange.
+   */
+    getPeaks(length, first, last) {
+        if (this.peaks) {
+          return this.peaks;
+        }
+        if (!this.buffer) {
+          return [];
+        }
+
+        first = first || 0;
+        last = last || length - 1;
+
+        this.setLength(length);
+
+        if (!this.buffer) {
+          return this.params.splitChannels ? this.splitPeaks : this.mergedPeaks;
+        }
+
+        /**
+         * The following snippet fixes a buffering data issue on the Safari
+         * browser which returned undefined It creates the missing buffer based
+         * on 1 channel, 4096 samples and the sampleRate from the current
+         * webaudio context 4096 samples seemed to be the best fit for rendering
+         * will review this code once a stable version of Safari TP is out
+         */
+        if (!this.buffer.length) {
+          const newBuffer = this.createBuffer(1, 4096, this.sampleRate);
+          this.buffer = newBuffer.buffer;
+        }
+
+        const sampleSize = this.buffer.length / length;
+        const sampleStep = ~~(sampleSize / 10) || 1;
+        const channels = this.buffer.numberOfChannels;
+        let c;
+
+        for (c = 0; c < channels; c++) {
+          const peaks = this.splitPeaks[c];
+          const chan = this.buffer.getChannelData(c);
+          let i;
+
+          for (i = first; i <= last; i++) {
+            const start = ~~(i * sampleSize);
+            const end = ~~(start + sampleSize);
+            /**
+             * Initialize the max and min to the first sample of this
+             * subrange, so that even if the samples are entirely
+             * on one side of zero, we still return the true max and
+             * min values in the subrange.
+             */
+            let min = chan[start];
+            let max = min;
+            let j;
+
+            for (j = start; j < end; j += sampleStep) {
+              const value = chan[j];
+
+              if (value > max) {
+                max = value;
+              }
+
+              if (value < min) {
+                min = value;
+              }
+            }
+
+            peaks[2 * i] = max;
+            peaks[2 * i + 1] = min;
+
+            if (c == 0 || max > this.mergedPeaks[2 * i]) {
+              this.mergedPeaks[2 * i] = max;
+            }
+
+            if (c == 0 || min < this.mergedPeaks[2 * i + 1]) {
+              this.mergedPeaks[2 * i + 1] = min;
+            }
+          }
+        }
+
+        return this.params.splitChannels ? this.splitPeaks : this.mergedPeaks;
+      }
+
+       /** @private */
+  addOnAudioProcess() {
+    this.scriptNode.onaudioprocess = () => {
+      const time = this.getCurrentTime();
+
+      if (time >= this.getDuration()) {
+        this.setState(FINISHED);
+        this.fireEvent('pause');
+      } else if (time >= this.scheduledPause) {
+        this.pause();
+      } else if (this.state === this.states[PLAYING]) {
+        this.fireEvent('audioprocess', time);
+      }
+    };
+  }
+
 }