aves.js
Version:
Audio spectrum analyzer written in type script. Developed using web audio api.
55 lines (52 loc) • 1.65 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="dist/index.js"></script>
<script>
window.onload = function() {
let aves
const load = document.querySelector('#load')
const start = document.querySelector('#start')
const stop = document.querySelector('#stop')
load.addEventListener('click', function() {
const request = new XMLHttpRequest()
const url = 'skrillex.mp3'
request.open('GET', url, true)
request.responseType = 'arraybuffer'
request.onload = function() {
const audioData = request.response
aves = new Aves()
// Decode asynchronously
aves.loadAudio(audioData).then(() => {
const canvasElm = document.querySelector('#canvas')
aves.createSpectrumAnalyser(canvasElm, 1000, 500)
})
}
request.send()
})
start.addEventListener('click', function() {
aves.start()
})
stop.addEventListener('click', function() {
aves.stop()
})
}
</script>
</head>
<body>
<button id="load">load</button>
<button id="start">start</button>
<button id="stop">stop</button>
<div>
<canvas id="canvas"></canvas>
</div>
<div>
<canvas id="canvas2"></canvas>
</div>
</body>
</html>