Working with binary data in JavaScript

by Oleksii Miroshko ~ ^ >>

Feb 06 2013

Is it really necessary?

BROWSERS

imagine browser as a frameworkfor your favorite applications

JS-BASED SERVERS

processing binary data inside node.js server apps

WINDOWS 8

provides API for building metro applications with pure HTML and JS

FIREFOX OS

smartphone OS which requires from apps to be built with HTML and JS

Browser API

FileReader ArrayBufferBlob

File

ArrayFloat32

ArrayUint8

MediaStream

MediaStreamSourceObjectURL

BufferSource

StreamSource

DataView

When you decide to start working with binary data it will definitely be quite confusing

FileListDataTransfer

Sort things out at first

FileListholds file input

DataTransferholds dragged files

Fileblob with metadata

Blobraw binary data

ArrayBufferholds chunk of binary data

Int8ArrayUint8ArrayInt16ArrayUint16ArrayInt32ArrayUint32ArrayFloat32ArrayFloat64Array

FileReaderread the contents of files/buffers

DataViewreads and writes from/to ArrayBuffer

ArrayBufferViewprovides interfacefor getting datafrom ArrayBuffer

Recipes? Scenarios?

var fr = new FileReader()var ab; // ArrayBufferfr.readAsArrayBuffer(fileorblob) // asyncfr.onload = function(e) {

ab = e.target.resultvar dv = new DataView(ab)var x = dv.getInt8(24) // assume 11110000var b = parseInt('01000000', 2)x = x^b // x.toString(2) writes '10110000'dv.setInt8(24, x) )}

var fileorblob = fl.files[0]

var fl = $('input[type=file]')[0] var fltarget.addEventListener("drop", function () {fl = e.dataTransfer});

var xhr = new XMLHttpRequest();xhr.open("POST", "/rcv", true);var data = new FormData();var blob = new Blob([ab],{/*mime*/})data.append('file',blob);xhr.send(data);

var url = URL.createObjectURL(blob);location.href = url

any external binary sourcevar fileorblob = new Blob([chunk], {})

Probe itTask: show graphic spectrogram for uploaded audio

during playback

Tools:

FileReader API

dsp.js for FFT implementation

Device API

Audio API

recorder.js for recording audio on client side

WAV format

class Waveform constructor: (array_buffer)-> @data = data = array_buffer @samplerate = data.getInt32(24, true) @bitrate = data.getInt16(34, true) @numchannels = data.getInt16(22, true) @datasize = data.getInt32(40, true) @numsamples = @datasize * 8 / @bitrate / @numchannels @seconds = @numsamples / @samplerate

Waveform:bitrate: 16data: DataViewdatasize: 970214numchannels: 1numsamples: 485107samplerate: 44100seconds: 11.00015873015873

WAV format

samples

bits

Waveform:bitrate: 16data: DataViewdatasize: 970214numchannels: 1numsamples: 485107samplerate: 44100seconds: 11.00015873015873

getAvg: (from, to)-> getInt = if @bitrate == 8 then 'getInt8' else 'getInt16' sum = 0

for i in [from..to] pos = 44 + i * @bitrate / 8 try sum += Math.abs( @data[getInt](pos) ) catch e break avg = sum / (to-from) avg / Math.pow(2, @bitrate-1) * 100

Demohttp://3.14.kiev.ua/jswave

Conclusion

• basic features for accessing binary data are implemented in Browsers and can be already used

• however API is in the middle of the standardisation process and should be used with caution

• API is rather not ready for processing streaming data in realtime