# Making an audio call This guide shows you to how to make an audio call in your JavaScript app. We assume you've already set up your JavaScript app with the In-app Calling JavaScript SDK. If you haven't already, [create an app](/docs/in-app-calling/getting-started/javascript/create-app) first. ## Setting up the UI Before you can make a call, you need to set up the app's UI. ## Initiating an audio call 1. Add the following HTML sample in `index.html`'s ``-section. ```html ``` 2. In `SinchClientWrapper` add the following async method that uses call client to initiate the call and a private method for setting up listeners for the call: ```javascript class SinchClientWrapper { // constructor ... async makeCall(callee) { const call = await this.sinchClient.callClient.callUser(callee); this.#callListeners(call); return call; } #callListeners(currentCall) { currentCall.addListener({ onCallProgressing: (call) => { this.ui.onCallProgressing(call); }, onCallEstablished: (call) => { this.ui.onCallEstablished(call); }, onCallEnded: (call) => { this.ui.onCallEnded(call); }, }); } } ``` 3. In the `UI`-class add instantiation of an `Audio`-reference in the constructor. Add three new callback-functions for handling callbacks from `CallListener` in `SinchClientWrapper`. Add a function that handles outgoing calls called `#handleMakeCallClick`. In the bottom of `#handleLogin` event listener for login clicks add code that shows the `call-container` and calls `#handleMakeCallClick`. Look at the following JavaScript example to see it in action: ```javascript class UI { constructor() { // ... this.audio = new Audio(); this.audio.autoplay = true; } onCallProgressing(call) { console.log("Call progressing", call); } onCallEstablished(call) { console.log("Call established", call); } onCallEnded(call) { console.log("Call ended", call); } #handleLogin() { document.getElementById("login").addEventListener("click", () => { // ... this.#handleMakeCallClick(); this.#showElement("call-container"); }); } #showElement(id) { const element = document.getElementById(id); element.style = "display: block"; } #handleMakeCallClick() { document.getElementById("call").addEventListener("click", async () => { const callee = document.getElementById("callee").value; const call = this.sinchClientWrapper.makeCall(callee); this.audio.srcObject = call.incomingStream; }); } // ... } ``` 4. Open two tabs of the app and login as two different users. Enter the second user ID as the callee in the first tab and click the "Call" button. You should be able to see in the console that it outputs `Call progressing`. ## Next steps Now that you've made a call, you can set up your application to handle incoming calls. Make a call