title: Streaming Microphone from Javascript to Java. Unable to convert float 32 array to audio file
body: <p>I am streaming the audio from microphone using javascript and sending the audio stream from frontend to backend via websocket. In my websocket handle message i can see float array recieving from front end but as soon as i write the float array to a file it does contatin any audio. here is link of generated <a href="https://file.io/D94taHwci1O4" rel="nofollow noreferrer">audio file</a>.</p>
  <pre><code>@Override
      public void handleMessage(WebSocketSession session, WebSocketMessage&lt;?&gt; message) throws Exception {
          // TODO Auto-generated method stub
  
          byte [] bb =getByteArrayFromByteBuffer((ByteBuffer)message.getPayload());
          System.out.println(Arrays.toString(bb));
          FileUtils.writeByteArrayToFile(file,bb,true);
      }
  
  private static byte[] getByteArrayFromByteBuffer(ByteBuffer byteBuffer) {
          byte[] bytesArray = new byte[byteBuffer.remaining()];
          byteBuffer.get(bytesArray, 0, bytesArray.length);
          return bytesArray;
      }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/VGdEs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VGdEs.jpg" alt="enter image description here" /></a></p>
  <p>below is javascript streaming code:</p>
  <pre><code>&lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot;
      pageEncoding=&quot;UTF-8&quot;%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button onclick=&quot;stop()&quot;&gt;stop&lt;/button&gt;
  
  &lt;script&gt;
  const AudioContext = window.AudioContext// Safari and old versions of Chrome
  var context;
  var source;
  var bufferDetectorNode ;
  
  
  
  jssocket= new WebSocket(&quot;ws://localhost:8080/websocket/name?user_id=&quot;+ generateRandomInteger(0, 3));
  
  
  jssocket.onopen = function(e) {
  
       console.log(&quot;[open] Connection established&quot;);
       
  };
  
  jssocket.onmessage = function(event) {
    console.log(`[message] Data received from server: ${event.data}`);
  };
  
  jssocket.onclose = function(event) {
    if (event.wasClean) {
        console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
    } else {
      // e.g. server process killed or network down
      // event.code is usually 1006 in this case
       console.log('[close] Connection died');
    }
  };
  
  jssocket.onerror = function(error) {
       console.log(`[error] ${error.message}`);
  };
  
  
  try {
      navigator.getUserMedia = navigator.getUserMedia
              || navigator.webkitGetUserMedia
              || navigator.mozGetUserMedia;
  
      microphone = navigator.getUserMedia({
          audio : true,
          video : false
      }, onMicrophoneGranted, onMicrophoneDenied);
  } catch (e) {
      alert(e)
  }
  async function onMicrophoneGranted(stream) {
      console.log(stream)
      
  
  
      context = new AudioContext();
      source = context.createMediaStreamSource(stream);
      
      await context.audioWorklet.addModule('/assets/js/buffer-detector.js');
  
      // Create our custom node.
      bufferDetectorNode= new AudioWorkletNode(context, 'buffer-detector');
  
      bufferDetectorNode.port.onmessage = (event) =&gt; {
          // Handling data from the processor.
          jssocket.send(event.data)
        // const byteArr = Int8Array.from(event.data)
      //const original = Array.from(byteArr)
        //  console.log(original);
        //  jssocket.send( Buffer.from(byteArr, 'base64').toString('utf8'));
  
  
          
        };
      
      source.connect(bufferDetectorNode);
      bufferDetectorNode.connect(context.destination);
       //source.connect(context.destination);
  }
  
  function _base64ToArrayBuffer(base64) {
      var binary_string = window.atob(base64);
      var len = binary_string.length;
      var bytes = new Uint8Array(len);
      for (var i = 0; i &lt; len; i++) {
          bytes[i] = binary_string.charCodeAt(i);
      }
      return bytes.buffer;
  }
  function onMicrophoneDenied() {
      console.log('denied')
  }
  function stop(){
      bufferDetectorNode.disconnect(context.destination)  
      source.disconnect(bufferDetectorNode)
  }
  function generateRandomInteger(min, max) {
      return Math.floor(min + Math.random() * (max - min + 1))
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>AudioWorklet</p>
  <pre><code>class BufferProcessor extends AudioWorkletProcessor {
      
    bufferSize = 256
    _bytesWritten = 0
    // 2. Create a buffer of fixed size
    _buffer = new Float32Array(this.bufferSize)
    
    
     initBuffer() {
      this._bytesWritten = 0
    }
  
    isBufferEmpty() {
      return this._bytesWritten === 0
    }
  
    isBufferFull() {
      return this._bytesWritten === this.bufferSize
    }
    
  process (inputs) {
     
      this.append(inputs[0][0])
  
      return true;
    }
  
  
  append(channelData) {
      if (this.isBufferFull()) {
        this.flush()
      }
      if (!channelData) return
      for (let i = 0; i &lt; channelData.length; i++) {
        this._buffer[this._bytesWritten++] = channelData[i]
      }
    }
    
    
    flush() {
      // trim the buffer if ended prematurely
      this.port.postMessage(
        this._bytesWritten &lt; this.bufferSize
          ? this._buffer.slice(0, this._bytesWritten)
          : this._buffer
      )
      this.initBuffer()
    }
    
    static get parameterDescriptors() {
      return [{
        name: 'Buffer Detector',
      }]
    }
  
    constructor() {
      super();
      this._socket = null;
      this._isRecording = true;
      this.initBuffer()
  
    }
  
    get socket() {
      return this._socket;
    }
  
    set socket(value) {
      if (value instanceof WebSocket) {
        this._socket = value;
      }
    }
  
    get recording() {
      return this._isRecording;
    }
  
    set recording(value) {
      if ('boolean' === typeof value) {
        this._isRecording = value;
      }
    }
  
  
  }
  
  
  
  registerProcessor('buffer-detector',BufferProcessor );
  </code></pre>