Basic playing

Author: lanly-dev

src/bundle.js

@@ -6,60 +6,37 @@
   const canvasContext = canvasElement.getContext('2d')
   const WIDTH = (canvasElement.width = window.innerWidth)
   const HEIGHT = (canvasElement.height = 512)
-  // let currentCount = (oldState && oldState.count) || 0;
 
-  // setInterval(() => {
-  //     counter.textContent = currentCount++;
+  let playing, id
 
-  //     // Update state
-  //     vscode.setState({ count: currentCount });
-
-  //     // Alert the extension when the cat introduces a bug
-  //     if (Math.random() < Math.min(0.001 * currentCount, 0.05)) {
-  //         // Send a message back to the extension
-  //         vscode.postMessage({
-  //             command: 'alert',
-  //             text: '🐛  on line ' + currentCount
-  //         });
-  //     }
-  // }, 100);
-
-  // Handle messages sent from the extension to the webview
   window.addEventListener('message', event => {
-    const message = event.data // The json data that the extension sent
-    switch (message.command) {
-      case 'refactor':
-        currentCount = Math.ceil(currentCount * 0.5)
-        counter.textContent = currentCount
-        break
-    }
+    if (playing) playing.close().then(cancelAnimationFrame(id))
+    playing = player(event.data)
   })
 
-  let audioCtx = new AudioContext()
-  let analyser = audioCtx.createAnalyser()
-  analyser.smoothingTimeConstant = 0.0
-  analyser.fftSize = 1024
-
-  let bufferLength = analyser.frequencyBinCount
-  let eightBufferLength = 8 * bufferLength
-  let dataArray = new Uint8Array(bufferLength)
-
-  let imageDataFrame = canvasContext.createImageData(2, canvasElement.height)
-  for (let i = 0; i < imageDataFrame.data.length * 4; i += 8) {
-    for (let j = 3; j <= 7; j++) {
-      imageDataFrame.data[i + j] = 255 // = 0,0,0,255|255,255,255,255
+  function player(path) {
+    const audioCtx = new AudioContext()
+    const analyser = audioCtx.createAnalyser()
+    analyser.smoothingTimeConstant = 0.0
+    analyser.fftSize = 1024
+
+    let bufferLength = analyser.frequencyBinCount
+    let eightBufferLength = 8 * bufferLength
+    let dataArray = new Uint8Array(bufferLength)
+
+    let imageDataFrame = canvasContext.createImageData(2, canvasElement.height)
+    for (let i = 0; i < imageDataFrame.data.length * 4; i += 8) {
+      for (let j = 3; j <= 7; j++) {
+        imageDataFrame.data[i + j] = 255 // = 0,0,0,255|255,255,255,255
+      }
     }
-  }
 
-  function getData() {
-    let request = new XMLHttpRequest()
-    request.open('GET', rootPath, true)
+    const request = new XMLHttpRequest()
+    request.open('GET', path, true)
     request.responseType = 'arraybuffer'
 
     request.onload = () => {
-      var audioData = request.response
-
-      audioCtx.decodeAudioData(audioData, buffer => {
+      audioCtx.decodeAudioData(request.response, buffer => {
         let offlineCtx = new OfflineAudioContext(2, buffer.length, 44100)
         let source = offlineCtx.createBufferSource()
         source.buffer = buffer
@@ -79,31 +56,31 @@
             // song.playbackRate.value = 2
             song.start()
             // }
-            song.onended = function(e) {
+            song.onended = event => {
+              cancelAnimationFrame(id)
               console.log('finished')
             }
             analyser.getByteFrequencyData(dataArray)
             draw()
           })
           .catch(err => {
             console.log('Rendering failed: ' + err)
-            // Note: The promise should reject when startRendering is called a second time on an OfflineAudioContext
           })
       })
     }
     request.send()
-  }
 
-  getData()
-
-  let x = 0
-  function draw() {
-    requestAnimationFrame(draw)
-    analyser.getByteFrequencyData(dataArray)
-    for (let i = 0, y = eightBufferLength; i < bufferLength; i++, y -= 8) {
-      imageDataFrame.data[y] = dataArray[i]
+    let x = 0
+    function draw() {
+      id = requestAnimationFrame(draw)
+      analyser.getByteFrequencyData(dataArray)
+      for (let i = 0, y = eightBufferLength; i < bufferLength; i++, y -= 8) {
+        imageDataFrame.data[y] = dataArray[i]
+      }
+      canvasContext.putImageData(imageDataFrame, x, 0)
+      x < WIDTH ? x++ : (x = 0)
     }
-    canvasContext.putImageData(imageDataFrame, x, 0)
-    x < WIDTH ? x++ : (x = 0)
+
+    return audioCtx
   }
 })()

src/controller.js

@@ -5,7 +5,7 @@ const pug = require('pug')
 const path = require('path')
 const jquery_path = require.resolve('jquery')
 const semjs_path = require.resolve('semantic-ui-css')
-const semcss_path = require.resolve('semantic-ui-css/semantic.min.css');
+const semcss_path = require.resolve('semantic-ui-css/semantic.min.css')
 
 /**
  * @param {vscode.ExtensionContext} context
@@ -21,25 +21,27 @@ function activate(context) {
 
   const compiledFunction = pug.compileFile(`${__dirname}\\index.pug`)
 
-  const wv = vscode.window.createWebviewPanel('something','Cat Coding', vscode.ViewColumn.One, {
+  const wv = vscode.window.createWebviewPanel('something', 'Cat Coding', vscode.ViewColumn.One, {
     // Enable javascript in the webview
-    enableScripts: true,
+    enableScripts: true
     // And restric the webview to only loading content from our extension's `media` directory.
     // localResourceRoots: [vscode.Uri.file(path.join(extensionPath, 'media'))]
   })
 
   specTV.specViewer.onDidChangeSelection(file => {
-    if(specTV.specViewer.selection.indexOf('.mp3') != -1)
-      wv.webview.postMessage(specTV.specViewer.selection)
+    const fullFilePath = file.selection[0].fullFilePath
+    if (fullFilePath.indexOf('.mp3') != -1) {
+      const song_path = vscode.Uri.file(fullFilePath).with({ scheme: 'vscode-resource' })
+      wv.webview.postMessage(`${song_path}`)
+    }
   })
 
-
-  const song_path = (vscode.Uri.file(path.join(context.extensionPath, 'beat.mp3'))).with({scheme: 'vscode-resource'})
-  const bundle_uri = (vscode.Uri.file(path.join(context.extensionPath, 'src', 'bundle.js'))).with({scheme: 'vscode-resource'})
-  const ctmcss_uri = (vscode.Uri.file(path.join(context.extensionPath, 'src', 'custom.css'))).with({scheme: 'vscode-resource'})
-  const semjs_uri = (vscode.Uri.file(semjs_path)).with({scheme: 'vscode-resource'})
-  const semcss_uri = (vscode.Uri.file(semcss_path)).with({scheme: 'vscode-resource'})
-  const jquery_uri = (vscode.Uri.file(jquery_path)).with({scheme: 'vscode-resource'})
+  const song_path = vscode.Uri.file(path.join(context.extensionPath, 'beat.mp3')).with({ scheme: 'vscode-resource' })
+  const bundle_uri = vscode.Uri.file(path.join(context.extensionPath, 'src', 'bundle.js')).with({ scheme: 'vscode-resource' })
+  const ctmcss_uri = vscode.Uri.file(path.join(context.extensionPath, 'src', 'custom.css')).with({ scheme: 'vscode-resource' })
+  const semjs_uri = vscode.Uri.file(semjs_path).with({ scheme: 'vscode-resource' })
+  const semcss_uri = vscode.Uri.file(semcss_path).with({ scheme: 'vscode-resource' })
+  const jquery_uri = vscode.Uri.file(jquery_path).with({ scheme: 'vscode-resource' })
 
   wv.webview.html = compiledFunction({
     bundle_uri: bundle_uri,

src/extension.js

@@ -79,6 +79,7 @@ class fileItem extends vscode.TreeItem {
     this.label = label
     this.collapsibleState = collapsibleState
     this.filePath = filePath
+    this.fullFilePath = `${this.filePath}\\${this.label}`
     this.command = command
     this.contextValue = 'dependency'
     this.descriptionText = descriptionText

src/treeview.js

@@ -1,5 +1,6 @@
 const path = require('path')
 module.exports = {
+    mode: 'production',
     entry: "./src/controller.js",
     output: {
       filename: "bundle.js",