Send Audio (WAV) to web and play using sockets in Java

Question

I have been stuck on this for awhile, and I have scoured the internet, and can't find any solutions. Pretty much I am trying to send a wav, using https://github.com/mrniko/netty-socketio . I do this by converting the WAV to binary (after reading it in) and then pushing it to the front end using the socket

The issue lays that the data is sent, it is converted to a blob, but the blob won't play, the browser siting a Uncaught (in promise) DOMException: Failed to load because no supported source was found. error.

Any ideas? There are multiple possible points of failure, but I can't figure it out.

File file = new File("src/main/resources/test.wav");
    AudioInputStream in;
    try{
        try{
            in = AudioSystem.getAudioInputStream(file);
        }catch (IOException e) {
            System.out.println("Audio io error");
            e.printStackTrace();     
            return;
        }
    }catch (UnsupportedAudioFileException e) {
        System.out.println("Bad Audio File error");
        e.printStackTrace();
        return;
    }
    //CONVERT TO BYTE ARRAY
    ByteArrayOutputStream buffer = new ByteArrayOutputStream();
    int nRead;
    byte[] data = new byte[16384];
    try{
        while ((nRead = in.read(data, 0, data.length)) != -1) {
          buffer.write(data, 0, nRead);
        }
    }catch (java.io.IOException e) {
        System.out.println("Can't read into buffer");
        e.printStackTrace();
        return;
    }

    final byte[] audio = buffer.toByteArray();
    //SERVER
    Configuration config = new Configuration();
    config.setHostname("localhost");
    config.setPort(9092);
    config.setMaxFramePayloadLength(1024 * 1024);
    config.setMaxHttpContentLength(1024 * 1024);

    final SocketIOServer server = new SocketIOServer(config);

    server.addEventListener("updateCoordinates", byte[].class, new DataListener<byte[]>() {
        @Override
        public void onData(SocketIOClient client, byte[] data, AckRequest ackRequest) {
            //System.out.println("Just gonna send it");
            client.sendEvent("sound", audio);
        }
    });

    server.start();

    Thread.sleep(Integer.MAX_VALUE);

    server.stop();

Client.js

var socket =  io.connect('http://localhost:9092');

socket.emit('updateCoordinates');

socket.on('sound', function(file) {
    console.log(file)
    console.log("recieved");
    var arrayBuffer = new Uint8Array(file).buffer;
    console.log(arrayBuffer);
    var blob = new Blob([arrayBuffer], {type : 'audio/wav'});
    console.log(blob);
    const audioUrl = URL.createObjectURL(blob);
    const audio = new Audio(audioUrl);
    audio.play();

});

Answer 1

Alright. I figured it out. The AudioSystem strips the wav of important metadata, so the front end could not read it. Updated code for the server working is

Path path = Paths.get("src/main/resources/test.wav");
    final byte[] audio;
    try{
      audio  = Files.readAllBytes(path);
    }
    catch (IOException e) {
            System.out.println("Audio io error");
            e.printStackTrace();     
            return;
        }
    //SERVER
    Configuration config = new Configuration();
    config.setHostname("localhost");
    config.setPort(9092);
    config.setMaxFramePayloadLength(1024 * 1024);
    config.setMaxHttpContentLength(1024 * 1024);

    final SocketIOServer server = new SocketIOServer(config);

    server.addEventListener("updateCoordinates", byte[].class, new DataListener<byte[]>() {
        @Override
        public void onData(SocketIOClient client, byte[] data, AckRequest ackRequest) {
            //System.out.println("Just gonna send it");
            client.sendEvent("sound", audio);
        }
    });

    server.start();

    Thread.sleep(Integer.MAX_VALUE);

    server.stop();
}