112 lines
3.1 KiB
JavaScript
112 lines
3.1 KiB
JavaScript
(function () {
|
|
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
|
|
let bufferLength
|
|
let source
|
|
let started = false
|
|
|
|
const gColorTable = []
|
|
const bColorTable = []
|
|
for (let i = 0; i <= 256; i++) { // include 256
|
|
const color = 'rgb(' + i + ',0,0)'
|
|
const gGrad = gctx.createLinearGradient(0, 0, 0, 1)
|
|
gGrad.addColorStop(0, color)
|
|
gGrad.addColorStop(1, color)
|
|
gColorTable.push(gGrad)
|
|
const bGrad = bctx.createLinearGradient(0, 0, 0, 1)
|
|
bGrad.addColorStop(0, color)
|
|
bGrad.addColorStop(1, color)
|
|
bColorTable.push(bGrad)
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
function analyse () {
|
|
window.requestAnimationFrame(analyse)
|
|
analyser.getFloatFrequencyData(dataArray)
|
|
|
|
gctx.drawImage(graph, -rate, 0)
|
|
bctx.clearRect(0, 0, bars.width, bars.height)
|
|
|
|
const dheight = (1 / dataArray.length) * graph.height
|
|
|
|
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) / 100, 0)
|
|
// if (c === 0) continue
|
|
const s = Math.floor(c * 256)
|
|
gctx.fillStyle = gColorTable[s]
|
|
gctx.fillRect(graph.width - rate, h, rate, dheight)
|
|
|
|
// const freq = i * context.sampleRate / analyser.fftSize
|
|
const bar = (dataArray[i] + 100)
|
|
bctx.fillStyle = bColorTable[s]
|
|
bctx.fillRect(0, h, bar, dheight)
|
|
}
|
|
}
|
|
|
|
async function start (arrayBuffer) {
|
|
if (!context) context = new window.AudioContext()
|
|
const audioBuffer = await context.decodeAudioData(arrayBuffer)
|
|
|
|
if (!analyser) {
|
|
analyser = context.createAnalyser()
|
|
analyser.connect(context.destination)
|
|
}
|
|
|
|
if (source) {
|
|
source.stop()
|
|
source.disconnect()
|
|
}
|
|
|
|
source = context.createBufferSource()
|
|
source.buffer = audioBuffer
|
|
source.connect(analyser)
|
|
source.start()
|
|
|
|
bufferLength = analyser.frequencyBinCount
|
|
dataArray = new Float32Array(bufferLength)
|
|
|
|
if (started) return
|
|
started = true
|
|
analyse()
|
|
}
|
|
|
|
file.addEventListener('change', function (e) {
|
|
const fp = file.files[0]
|
|
if (!fp) return window.alert('Invalid file.')
|
|
const fr = new window.FileReader()
|
|
fr.addEventListener('loadend', function (e) {
|
|
if (fr.readyState !== 2) return window.alert('File reading failed.')
|
|
start(fr.result)
|
|
})
|
|
fr.readAsArrayBuffer(fp)
|
|
})
|
|
|
|
stop.addEventListener('click', function (e) {
|
|
if (!source) return
|
|
source.stop()
|
|
source = null
|
|
})
|
|
|
|
window.addEventListener('resize', resize)
|
|
resize()
|
|
})()
|