From d69fb8b6527401d5de13f90454edc6262c42ef80 Mon Sep 17 00:00:00 2001 From: Samuel Degueldre Date: Sun, 14 Mar 2021 18:32:21 +0100 Subject: [PATCH] [REF] minor style changes and refactoring --- .eslintrc.js | 11 ++++------- src/index.js | 24 ++++++++++++++++-------- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 7fb8905..3b01ca5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -54,7 +54,7 @@ module.exports = { ], 'consistent-return': 'error', 'consistent-this': 'error', - 'curly': 'off', + 'curly': 'error', 'default-case': 'error', 'default-case-last': 'error', 'default-param-last': 'error', @@ -68,10 +68,7 @@ module.exports = { 'func-call-spacing': 'error', 'func-name-matching': 'error', 'func-names': 'error', - 'func-style': [ - 'error', - 'declaration', - ], + 'func-style': 'off', 'function-paren-newline': 'error', 'generator-star-spacing': 'error', 'global-require': 'error', @@ -82,6 +79,7 @@ module.exports = { 'id-denylist': 'error', 'id-length': 'off', 'id-match': 'error', + 'ignorePatterns': ['.eslintrc.js'], 'implicit-arrow-linebreak': [ 'error', 'beside', @@ -113,7 +111,6 @@ module.exports = { 'max-params': 'error', 'max-statements': 'off', 'max-statements-per-line': 'error', - 'multiline-comment-style': 'error', 'new-cap': 'error', 'new-parens': 'error', 'newline-after-var': 'off', @@ -239,7 +236,7 @@ module.exports = { 'padded-blocks': 'off', 'padding-line-between-statements': 'error', 'prefer-arrow-callback': 'error', - 'prefer-const': 'off', + 'prefer-const': 'warn', 'prefer-destructuring': 'error', 'prefer-exponentiation-operator': 'off', 'prefer-named-capture-group': 'error', diff --git a/src/index.js b/src/index.js index ca1632b..afc88bf 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ gradient.addColorStop(1, '#008ce2'); ctx.fillStyle = gradient; // TODO: this seems shitty. Should probably get sample rate from file... +// This doesn't seem possible without parsing the files by hand unfortunately const samplingRate = 44100; let leftSamples, rightSamples; let cache = {}; @@ -28,8 +29,9 @@ function loadAudio(fileOrBlob) { const audioBuffer = await audioCtx.decodeAudioData(reader.result); leftSamples = audioBuffer.getChannelData(0); rightSamples = audioBuffer.getChannelData(1); - if (!playing) + if (!playing) { playAnim(); + } console.log('Samples acquired'); } } @@ -56,8 +58,9 @@ window.addEventListener('resize', () => { gradient.addColorStop(1, '#008ce2'); ctx.fillStyle = gradient; - if (!playing) + if (!playing) { playAnim(); + } }); const halfWinsize = 4096; @@ -66,10 +69,14 @@ function getFrame(time) { const centerSample = roundTo(time * samplingRate, samplingRate / 30); // TODO: make cache actually useful if (!cache[centerSample]) { - let left = leftSamples.slice(Math.max(0, centerSample - halfWinsize), Math.max(2 * halfWinsize, centerSample + halfWinsize)); - let right = rightSamples.slice(Math.max(0, centerSample - halfWinsize), Math.max(2 * halfWinsize, centerSample + halfWinsize)); - left = left.map((v, i) => v * (Math.cos(i / left.length * 2 * Math.PI + Math.PI) + 1)); - right = right.map((v, i) => v * (Math.cos(i / right.length * 2 * Math.PI + Math.PI) + 1)); + const sliceStart = Math.max(0, centerSample - halfWinsize); + const sliceEnd = Math.max(2 * halfWinsize, centerSample + halfWinsize); + let left = leftSamples.slice(sliceStart, sliceEnd); + let right = rightSamples.slice(sliceStart, sliceEnd); + const scaleFactor = i => Math.cos(i / left.length * 2 * Math.PI + Math.PI) + 1; + left = left.map((v, i) => v * scaleFactor(i)); + right = right.map((v, i) => v * scaleFactor(i)); + // TODO: return something when close to boundaries if (left.length != 2 * halfWinsize) { cache[centerSample] = [ [], @@ -106,8 +113,9 @@ function playAnim() { })); channels.forEach(channel => { - if (channel.length == 0) + if (channel.length == 0) { return; + } ctx.beginPath(); ctx.moveTo(0, cv.height / 2); ctx.lineTo(0, channel[0].y); @@ -128,7 +136,7 @@ function playAnim() { ctx.fill(); }) - let now = Date.now(); + const now = Date.now(); if (lastFrameTime) { frameTimes.push(now - lastFrameTime); }