Wsrtjtyk

i have a chatbot solution and i'm trying to implement audio text-to-speech feature. After the chatbot return the answer from a question, i call a spring api that process the text converting it in a "audio/wav" file returned by Watson Text-to-Speech service.

The audio data returned by watson is ok, when i save in my computer, i can play without problem, but i'm having trouble returning this data to the javascript client. At the end of all process, i can play a audio file full of noise, but i dont know why. i have no experience with audio data and maybe for more experience developer, this can be a common mistake.

spring boot webservice

@PostMapping("/text-to-speech")

    @Produces(MediaType.APPLICATION_OCTET_STREAM_VALUE)

    @Consumes(value = MediaType.APPLICATION_JSON_VALUE)

    public ResponseEntity<byte>  textToSpeech(@RequestBody ConversationBean bean, HttpServletRequest request) {



            try {



                SpeechModel speechModel = new SpeechModelFactory().create(EPlataforma.IBM_BLUEMIX.getCodigo());



                InputStream audio = speechModel.textToSpeech(bean.getInput());

                byte arraySaida = IOUtils.toByteArray(audio);



                HttpHeaders responseHeaders = new HttpHeaders();

                responseHeaders.set("charset", "utf-8");

                responseHeaders.setContentType(MediaType.valueOf("audio/wav"));

                responseHeaders.set("Content-disposition", "attachment; filename=filename.wav");



                return new ResponseEntity<byte>(arraySaida, responseHeaders, HttpStatus.OK);



            } catch (Exception e) {

                // TODO Auto-generated catch block

                e.printStackTrace();

            }



        return null;

    }

javascript call to spring boot service

function textToSpeech(text) {



      console.log("textToSpeech: " + text);



      var data = {

        input: text

      };



      $.ajax({



        url: urlTextToSpeech,

        beforeSend: function (request) {

          request.setRequestHeader("Authorization", tokenAuth);

        },

        cache: false, 

        timeout: 600000, 

        type: 'POST',

        contentType: 'application/json',

        data: JSON.stringify(data),

        success: function (data, textStatus, request) {



          console.log("textToSpeech return: ", data);

          playByteArray(data);



        },

        error: function (request, error) {

          console.log("error: " + JSON.stringify(request));

        }

      });



    }

javascript receive and playing audio

function playByteArray(bytes) {



        var array = getByteArray(bytes);



        var isWAV = array[0] === 82 && array[1] === 73 && array[2] === 70 && array[3] === 70 &&

            array[8] === 87 && array[9] === 65 && array[10] === 86 && array[11] === 69;



        console.log("Is a valid WAV File? : " + isWAV);



        /* TODO: replace the blob content with your byte */

        var blob = new Blob(array, {type: "application/octet-stream"});

        var fileName = "c:\temp\boomcake3.wav";

        saveAs(blob, fileName);



        var arrayBuffer = new ArrayBuffer(array.length);

        var bufferView = new Uint8Array(arrayBuffer);

        for (i = 0; i < array.length; i++) {

          bufferView[i] = array[i];

        }



        context.decodeAudioData(arrayBuffer, function(buffer) {

          buf = buffer;

          play();

        });



    }



    // Play the loaded file

    function play() {



        console.log("audio decodificado, playing audio ...");



        // Create a source node from the buffer

        var source = context.createBufferSource();



        console.log("step 2: ", source);



        source.buffer = buf;



        console.log("step 3: ", source.buffer);



        // Connect to the final output node (the speakers)

        source.connect(context.destination);



        console.log("step 4 ", context.destination);



        // Play immediately

        source.start(0);



        console.log("step 5 ", context.destination);



    }



    function getByteArray(dataStr) {

          var array = new Uint8Array(dataStr.length);

          for (var i = 0; i < dataStr.length; i++) {

            array[i] = dataStr.charCodeAt(i);

          }

          return array;

        }