How to play a byte array (not a file!) With JavaScript in a browser

Question

Basically, for security reasons, I am not allowed to store the WAV file on the server that the browser will access. I have a byte array containing audio data (the part of the WAV file data that I believe in) on the server, and I want it to play in the browser via JavaScript (or Applet, but JS), I can use JSON-PRC to send everything byte [], or can I open the socket to transfer it, but in any case, I don’t know who to play byte [] in the browser?

Answer 1

The following code will reproduce a sine wave at 0.5 and 2.0. Call the function play_buffersource() in your button or in any play_buffersource() location.

Tested using Chrome with the Web Audio flag enabled. In your case, all you have to do is just shuffle your audio bytes in buf .

 <script type="text/javascript"> const kSampleRate = 44100; // Other sample rates might not work depending on the your browser AudioContext const kNumSamples = 16834; const kFrequency = 440; const kPI_2 = Math.PI * 2; function play_buffersource() { if (!window.AudioContext) { if (!window.webkitAudioContext) { alert("Your browser sucks because it does NOT support any AudioContext!"); return; } window.AudioContext = window.webkitAudioContext; } var ctx = new AudioContext(); var buffer = ctx.createBuffer(1, kNumSamples, kSampleRate); var buf = buffer.getChannelData(0); for (i = 0; i < kNumSamples; ++i) { buf[i] = Math.sin(kFrequency * kPI_2 * i / kSampleRate); } var node = ctx.createBufferSource(0); node.buffer = buffer; node.connect(ctx.destination); node.noteOn(ctx.currentTime + 0.5); node = ctx.createBufferSource(0); node.buffer = buffer; node.connect(ctx.destination); node.noteOn(ctx.currentTime + 2.0); } </script> 

Recommendations:

• http://epx.com.br/artigos/audioapi.php
• https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

If you need to re-sample the audio, you can use the JavaScript resampler: https://github.com/grantgalitz/XAudioJS

If you need to decode base64 data, there are many base64 JavaScript decoders: https://github.com/carlo/jquery-base64

Answer 2

If you have bytes on the server, I would suggest creating some kind of handler on the server that will transmit bytes in response as a wav file. This "file" will only be in memory on the server, not on disk. Then the browser can simply treat it like a regular wav file. For more information on how this can be done in your environment, you will need additional information on the server stack.

Answer 3

I suspect that you can achieve this using the HTML5 Audio API quite easily:

https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension

This library may come in handy, although I'm not sure if it reflects the latest browser versions:

https://github.com/jussi-kalliokoski/audiolib.js

Answer 4

I accomplished this with the following code. I am passing a byte array containing data from a wav file to the playByteArray function. My solution is similar to Peter Lee, but I could not get it to work in my case (the output was distorted), while this solution worked well for me. I checked that it works in Firefox and Chrome.

 window.onload = init; var context; // Audio context var buf; // Audio buffer function init() { if (!window.AudioContext) { if (!window.webkitAudioContext) { alert("Your browser does not support any AudioContext and cannot play back this audio."); return; } window.AudioContext = window.webkitAudioContext; } context = new AudioContext(); } function playByteArray(byteArray) { var arrayBuffer = new ArrayBuffer(byteArray.length); var bufferView = new Uint8Array(arrayBuffer); for (i = 0; i < byteArray.length; i++) { bufferView[i] = byteArray[i]; } context.decodeAudioData(arrayBuffer, function(buffer) { buf = buffer; play(); }); } // Play the loaded file function play() { // Create a source node from the buffer var source = context.createBufferSource(); source.buffer = buf; // Connect to the final output node (the speakers) source.connect(context.destination); // Play immediately source.start(0); }