How to pass credentials through code instead of requesting user

I want to pass credentials thru code instead of requesting user to give credentials thru this prompt.

Although I'm passing credentials in header as given in below code:

<html>
<head>    
</head>
<body>
    <div id="text-to-speech">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

        <input type="text" name="speech-text" TextMode="MultiLine" height:50px;">
        <input type="button" id="btnPOst" value="Play" />
        <br /><br /><br />
        <audio id="speech" autoplay preload="auto" autobuffer controls class="audio"></audio>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            debugger;
            $("#btnPOst").click(function () {
                debugger;
                var username= "";  
                var password = "";
                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) {

                      },

                  });

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

            });
        });


    </script>
</body>
</html>