diff --git a/src/clip/Clip.jsx b/src/clip/Clip.jsx
index d27d3e1..7f52af6 100644
--- a/src/clip/Clip.jsx
+++ b/src/clip/Clip.jsx
@@ -59,30 +59,52 @@ export function Clip({ url, tracksId, clipId }) {
   } = tracks[tracksIdx].data[clipIdx]
   const waveformRef = useRef(null)
   const wavesurfer = useRef(null)
+  const startWasCalled = useRef(null)
+  const arrayBuffer = useRef(null)
+
+  const audioCtx = useRef(new AudioContext())
+  const source = useRef(audioCtx.current.createBufferSource())
   // const startTime = useRef(window.performance.now())
   const [playing, setPlay] = useState(isPlaying)
 
   useEffect(() => {
-    const options = formWaveSurferOptions(waveformRef.current)
-    wavesurfer.current = WaveSurfer.create(options)
+    //setPlay(false)
+    //dispatch(toggleIsPlaying({ tracksId, clipId, isPlaying: false }))
+    //audioCtx.current = new AudioContext()
+    //Now that the request has been defined, actually make the request. (send it)
+    //const options = formWaveSurferOptions(waveformRef.current)
+    // wavesurfer.current = WaveSurfer.create(options)
+    //wavesurfer.current.cancelAjax()
+    //wavesurfer.current.load(url)
+
+    //wavesurfer.current.load(url)
+
+    // wavesurfer.current.on('ready', function () {
+    //   // make sure object stillavailable when file loaded
+    //   // if (wavesurfer.current) {
+    //   //wavesurfer.current.setVolume(volume)
+    //   // setIsLoading(false)
+    //   //  }
+    // })
+    // wavesurfer.current.on('finish', () => {
+    //   if (isLooping) {
+    //     // wavesurfer.current.playPause()
+    //     //buffer.current.start()
+    //   }
+    // })
+
+    cbd()
 
-    wavesurfer.current.load(url)
+    async function cbd() {
+      source.current = await getBufferByUrl(url)
+      //wavesurfer.current.loadDecodedBuffer(source.current.buffer)
+      console.log(source.current)
+      //source.current.start(0)
+    }
 
-    wavesurfer.current.on('ready', function () {
-      // make sure object stillavailable when file loaded
-      // if (wavesurfer.current) {
-      //wavesurfer.current.setVolume(volume)
-      // setIsLoading(false)
-      //  }
-    })
-    wavesurfer.current.on('finish', () => {
-      if (isLooping) {
-        wavesurfer.current.playPause()
-      }
-    })
     // Removes events, elements and disconnects Web Audio nodes.
     // when component unmount
-    return () => wavesurfer.current.destroy()
+    // return () => wavesurfer.current.destroy()
   }, [url])
 
   useEffect(() => {
@@ -95,15 +117,32 @@ export function Clip({ url, tracksId, clipId }) {
   }, [audioDriverOutName])
 
   useEffect(() => {
+    if (isPlaying) {
+      console.log('play!!')
+      source.current.start(0)
+      startWasCalled.current = true
+      //dispatch(toggleIsPlaying({ tracksId, clipId, isPlaying: true }))
+      //wavesurfer.current.play(0.001)
+      //audioCtx.current && audioCtx.current.resume()
+    }
+    if (!isPlaying && startWasCalled.current) {
+      source.current.stop(0)
+      console.log('stop!!!')
+      //audioCtx.current && audioCtx.current.resume()
+      //dispatch(toggleIsPlaying({ tracksId, clipId, isPlaying: false }))
+    }
+    //wavesurfer.current.stop(0.001)
+    // source.current.stop(0)
+    //startWasCalled = false
     // let playAlreadyStarted = false
     // const ct = wavesurfer.current.backend.ac.currentTime
     // const diff = (startTime.current - ct) / 1000 + 0.1
 
-    if (isPlaying) {
-      wavesurfer.current.play()
-    } else {
-      wavesurfer.current.stop()
-    }
+    // if (isPlaying) {
+    //   wavesurfer.current.play()
+    // } else {
+    //   wavesurfer.current.stop()
+    // }
   }, [isPlaying])
 
   return (
@@ -244,10 +283,32 @@ export function Clip({ url, tracksId, clipId }) {
       )}
     </div>
   )
+  async function getBufferByUrl(url) {
+    //...and the source
+
+    //var source = audioCtx.current.createBufferSource()
+    //connect it to the destination so you can hear it.
+    source.current.connect(audioCtx.current.destination)
+    const resp = await fetch(url)
+    const arrayBuffer = await resp.arrayBuffer()
+    arrayBuffer.current = arrayBuffer
+    const audioBuffer = await audioCtx.current.decodeAudioData(arrayBuffer)
+    source.current.buffer = audioBuffer
+    source.current.loop = isLooping
+    var merger = audioCtx.current.createChannelMerger(32)
 
+    merger.connect(audioCtx.current.destination)
+    source.current.connect(merger, 0, 1)
+    source.current.connect(merger, 0, 0)
+    //source.current.start(0)
+    return source.current
+    //source.buffer
+  }
   function handlePlayPause() {
     setPlay(!playing)
     //dispatch(toggleIsPlaying({ tracksId, clipId, isPlaying: !isPlaying }))
+    //wavesurfer.current.playPause()
+    //source.current.buffer.start()
     if (isPlaying) {
       dispatch(registerClip({ clip: { tracksId, clipId, isPlaying: false } }))
     } else {
@@ -262,7 +323,7 @@ export function Clip({ url, tracksId, clipId }) {
     if (newVolume) {
       dispatch(changeClipVolume({ clipId, tracksId, volume: newVolume }))
       //setVolume(newVolume)
-      wavesurfer.current.setVolume(newVolume || 1)
+      //wavesurfer.current.setVolume(newVolume || 1)
     }
   }
 }
@@ -275,6 +336,10 @@ Clip.propTypes = {
 }
 
 function formWaveSurferOptions(ref) {
+  // const processor = audioaudioCtx.current.createScriptProcessor(1024, 1, 1)
+
+  // audioaudioCtx.current,
+  // audioScriptProcessor: processor,
   return {
     container: ref,
     closeAudioContext: false,