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> <body>
<div class="input"> <div class="input">
<input type="file" name="track" accept="audio/*" id="track"/> <input type="file" name="track" accept="audio/*" id="track"/>
<button id="stop">Stop</button>
</div> </div>
<div class="canvases"> <div class="canvases">
<canvas width="300" height="300" id="graph"></canvas> <canvas width="300" height="300" id="graph"></canvas>

30
index.js
View File

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