| | window.onload = function() {
2 | var element = document.getElementById('container')
3 | dropAndLoad(element, init, "ArrayBuffer")
4 | } |
| Reusable dropAndLoad function: it reads a local file dropped on a
5 | dropElement in the DOM in the specified readFormat
6 | (In this case, we want an arrayBuffer) | function dropAndLoad(dropElement, callback, readFormat) {
7 | var readFormat = readFormat || "DataUrl"
8 |
9 | dropElement.addEventListener('dragover', function(e) {
10 | e.stopPropagation()
11 | e.preventDefault()
12 | e.dataTransfer.dropEffect = 'copy'
13 | }, false)
14 |
15 | dropElement.addEventListener('drop', function(e) {
16 | e.stopPropagation()
17 | e.preventDefault()
18 | loadFile(e.dataTransfer.files[0])
19 | }, false)
20 |
21 | function loadFile(files) {
22 | var file = files
23 | var reader = new FileReader()
24 | reader.onload = function(e) {
25 | callback(e.target.result)
26 | }
27 | reader['readAs'+readFormat](file)
28 | }
29 | } |
| Once the file is loaded, we start getting our hands dirty. | function init(arrayBuffer) {
30 | document.getElementById('instructions').innerHTML = 'Loading ...' |
| Create a new audioContext and its analyser | window.audioCtx = new webkitAudioContext()
31 | window.analyser = audioCtx.createAnalyser() |
| If a sound is still playing, stop it. | if (window.source)
32 | source.noteOff(0) |
| Decode the data in our array into an audio buffer | audioCtx.decodeAudioData(arrayBuffer, function(buffer) { |
| Use the audio buffer with as our audio source | window.source = audioCtx.createBufferSource()
33 | source.buffer = buffer |
| Connect to the analyser ... | |
| and back to the destination, to play the sound after the analysis. | analyser.connect(audioCtx.destination) |
| Start playing the buffer. | |
| Initialize a visualizer object | var viz = new simpleViz() |
| Finally, initialize the visualizer. | new visualizer(viz['update'], analyser)
34 | document.getElementById('instructions').innerHTML = ''
35 | })
36 | } |
| The visualizer object.
37 | Calls the visualization function every time a new frame
38 | is available.
39 | Is passed an analyser (audioContext analyser). | function visualizer(visualization, analyser) {
40 | var self = this
41 | this.visualization = visualization
42 | var last = Date.now()
43 | var loop = function() {
44 | var dt = Date.now() - last |
| we get the current byteFreq data from our analyser | var byteFreq = new Uint8Array(analyser.frequencyBinCount)
45 | analyser.getByteFrequencyData(byteFreq)
46 | last = Date.now() |
| We might want to use a delta time (dt) too for our visualization. | self.visualization(byteFreq, dt)
47 | webkitRequestAnimationFrame(loop)
48 | }
49 | webkitRequestAnimationFrame(loop)
50 | } |
| A simple visualization. Its update function illustrates how to use
51 | the byte frequency data from an audioContext analyser. | function simpleViz(canvas) {
52 | var self = this
53 | this.canvas = document.getElementById('canvas')
54 | this.ctx = this.canvas.getContext("2d")
55 | this.copyCtx = document.getElementById('canvas-copy').getContext("2d")
56 | this.ctx.fillStyle = '#fff'
57 | this.barWidth = 10
58 | this.barGap = 4 |
| We get the total number of bars to display | this.bars = Math.floor(this.canvas.width / (this.barWidth + this.barGap)) |
| This function is launched for each frame, together with the byte frequency data. | this.update = function(byteFreq) {
59 | self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height) |
| We take an element from the byteFreq array for each of the bars.
60 | Let's pretend our byteFreq contains 20 elements, and we have five bars... | var step = Math.floor(byteFreq.length / self.bars) |
| |||||||||||||||||||| elements
61 | | | | | | elements we'll use for our bars
| for (var i = 0; i < self.bars; i ++) { |
| Draw each bar | var barHeight = byteFreq[i*step]
62 | self.ctx.fillRect(
63 | i * (self.barWidth + self.barGap),
64 | self.canvas.height - barHeight,
65 | self.barWidth,
66 | barHeight)
67 | self.copyCtx.clearRect(0, 0, self.canvas.width, self.canvas.height)
68 | self.copyCtx.drawImage(self.canvas, 0, 0)
69 | }
70 | }
71 | }
72 |
73 | |
12 |