diff --git a/index.html b/index.html
index 3989ca4..89cc73b 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,7 @@
+
diff --git a/index.js b/index.js
index 6951a14..0c474e7 100644
--- a/index.js
+++ b/index.js
@@ -2,8 +2,10 @@
const graph = document.getElementById('graph')
const bars = document.getElementById('bars')
const file = document.getElementById('track')
+ const stop = document.getElementById('stop')
const gctx = graph.getContext('2d')
const bctx = bars.getContext('2d')
+ const rate = 2
let context
let analyser
let dataArray
@@ -11,19 +13,21 @@
let source
let started = false
- const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
- const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - 5
+ function resize () {
+ const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+ const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - 5
- graph.width = vw - 100
- graph.height = vh
- bars.height = vh
- bars.width = 100
+ graph.width = vw - 100
+ graph.height = vh
+ bars.height = vh
+ bars.width = 100
+ }
function analyse () {
window.requestAnimationFrame(analyse)
analyser.getFloatFrequencyData(dataArray)
- gctx.drawImage(graph, -2, 0)
+ gctx.drawImage(graph, -rate, 0)
bctx.clearRect(0, 0, bars.width, bars.height)
const dheight = (1 / dataArray.length) * graph.height
@@ -31,10 +35,10 @@
for (let i = 0; i < dataArray.length; i++) {
const p = i / dataArray.length
const h = graph.height - p * graph.height
- const c = Math.max((dataArray[i] - analyser.minDecibels) / 95, 0)
- const s = 'hsl(0, 100%, ' + Math.floor(c * 100 - 10) + '%)'
+ const c = Math.max((dataArray[i] - analyser.minDecibels) / 100, 0)
+ const s = 'rgb(' + (c * 255) + ',0,0)'
gctx.fillStyle = s
- gctx.fillRect(graph.width - 2, h, 2, dheight)
+ gctx.fillRect(graph.width - rate, h, rate, dheight)
// const freq = i * context.sampleRate / analyser.fftSize
const bar = (dataArray[i] + 100)
@@ -47,11 +51,16 @@
if (!context) context = new window.AudioContext()
const audioBuffer = await context.decodeAudioData(arrayBuffer)
- analyser = context.createAnalyser()
- analyser.buffer = audioBuffer
- analyser.connect(context.destination)
+ if (!analyser) {
+ analyser = context.createAnalyser()
+ analyser.connect(context.destination)
+ }
+
+ if (source) {
+ source.stop()
+ source.disconnect()
+ }
- if (source) source.stop()
source = context.createBufferSource()
source.buffer = audioBuffer
source.connect(analyser)
@@ -75,4 +84,13 @@
})
fr.readAsArrayBuffer(fp)
})
+
+ stop.addEventListener('click', function (e) {
+ if (!source) return
+ source.stop()
+ source = null
+ })
+
+ window.addEventListener('resize', resize)
+ resize()
})()