Unauthorized Text to Speech Watson IBM

Question

I have a problem trying to make a request through the text-to-Speech api, when trying to make the request it gives the following error:

{
    "code": 401,
    "error": "Unauthorized"
}

My JS code

$(function () {

    $("#btnPOst").click(function () {

        var username= "XXXX-XXXX-XXXX";  
        var password = "XXXX-XXXX-XXXX";
        var request = $("#text-to-speech input[name=speech-text]").val();

        var url = "https://stream.watsonplatform.net/text-to-speech/api/v1/synthesize?voice=en-US_MichaelVoice&accept=audio/wav&text=" + request;


    $.ajax({
        type: "POST",
        url: url,
        dataType: "application/json; charset=utf-8",
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'audio/wav',
            'Authorization': ("Basic " + btoa(username + ":" + password))
        },

        success: function (content) {
            alert('ok');
        },

    });

    $("#speech").attr("src", url)[0].play();

    });
});

My HTML code

<input type="text" name="speech-text" TextMode="MultiLine" />
<input type="button" id="btnPOst" value="Play" />
<audio id="speech" autoplay preload="auto" autobuffer controls class="audio"></audio>