evert/spectest
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

switch to monochrome rgb, stop button

Browse Source
This commit is contained in:
Evert Prants 2020-09-26 17:35:19 +03:00
parent 4a197c2d25
commit c39bf73149
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
2 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -27,6 +27,7 @@
<body>
<div class="input">
<input type="file" name="track" accept="audio/*" id="track"/>
<button id="stop">Stop</button>
</div>
<div class="canvases">
<canvas width="300" height="300" id="graph"></canvas>

46
index.js
View File

@ -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()
})()