Audio-Only Calls
Build crystal-clear audio calling experiences with minimal bandwidth requirements
Overview
Audio-only calls provide high-quality voice communication without the bandwidth overhead of video. Perfect for scenarios where visual communication isn't necessary or network conditions are limited. BaxCloud's audio calls leverage advanced audio codecs like Opus to deliver exceptional clarity while using minimal data.
High-Quality Audio
Crystal-clear voice with Opus codec at 48kHz
Low Bandwidth
Works seamlessly on 2G/3G networks
Scalable
Support hundreds of participants in audio rooms
Common Use Cases
Podcast Recording
Record high-quality audio conversations with remote guests. Perfect for podcast hosts who need reliable, studio-quality audio without complex setups.
Customer Support
Provide voice support to customers directly from your web or mobile app. Lower bandwidth requirements mean more reliable connections and better customer experience.
Voice Chat Rooms
Create social audio spaces where users can drop in and chat. Similar to Discord voice channels or Clubhouse rooms, but fully integrated into your app.
How Audio Calls Work
BaxCloud audio calls are powered by WebRTC technology, the same protocol used by major platforms like Google Meet and Zoom. Here's what happens under the hood:
1. Audio Capture & Processing
The SDK captures audio from the device microphone and applies several enhancements:
- Echo cancellation to prevent feedback loops
- Noise suppression to remove background sounds
- Automatic gain control for consistent volume
- Voice activity detection to optimize bandwidth
2. Audio Encoding
Audio is encoded using the Opus codec, which provides excellent quality at bitrates from 6 kbps to 510 kbps. The SDK automatically adjusts the bitrate based on network conditions, ensuring the best possible quality while maintaining reliability.
3. Transmission & Routing
Encoded audio packets are transmitted via UDP for low latency. BaxCloud's global edge network ensures packets take the shortest path to participants, reducing latency to typically under 150ms.
4. Decoding & Playback
Received audio is decoded and played through the device speakers or headphones. Jitter buffering ensures smooth playback even when packets arrive out of order or with varying delays.
Step-by-Step Implementation
Learn how to build audio-only calls in your application
Install the SDK
Add BaxCloud SDK to your project
First, install the BaxCloud SDK for your platform:
1npm install @baxcloud/react-sdkInitialize the Client
Create and configure your BaxCloud client instance
Initialize the client with your project credentials:
1import { BaxCloudClient } from '@baxcloud/react-sdk';
2import { useState, useEffect } from 'react';
3
4export default function AudioCall() {
5 const [client, setClient] = useState<BaxCloudClient | null>(null);
6 const [isMuted, setIsMuted] = useState(false);
7
8 useEffect(() => {
9 const baxClient = new BaxCloudClient({
10 projectId: 'your-project-id',
11 apiKey: 'your-api-key',
12 });
13
14 setClient(baxClient);
15
16 return () => {
17 baxClient.disconnect();
18 };
19 }, []);
20
21 return (
22 <div>
23 {/* UI components will go here */}
24 </div>
25 );
26}Join an Audio Room
Connect to a room and enable microphone
Connect to an audio room and start transmitting audio:
1const joinAudioCall = async () => {
2 if (!client) return;
3
4 try {
5 // Join the room
6 await client.connect({
7 roomName: 'audio-room-123',
8 liveType: 'audio_call',
9 participant: {
10 userId: 'user-456',
11 name: 'John Doe',
12 avatarUrl: 'https://example.com/avatar.jpg',
13 isHost: false,
14 },
15 });
16
17 // Enable microphone
18 await client.enableMicrophone();
19
20 console.log('Successfully joined audio call');
21 } catch (error) {
22 console.error('Failed to join audio call:', error);
23 }
24};Audio-Only Mode
liveType: 'audio_call', the SDK automatically disables video tracks to save bandwidth. Participants won't transmit or receive video, reducing data usage by up to 90% compared to video calls.Implement Audio Controls
Add mute/unmute and volume controls
Provide users with controls to manage their audio experience:
1// Mute/unmute microphone
2const toggleMicrophone = async () => {
3 if (!client) return;
4
5 try {
6 if (client.isMicrophoneEnabled()) {
7 await client.disableMicrophone();
8 setIsMuted(true);
9 } else {
10 await client.enableMicrophone();
11 setIsMuted(false);
12 }
13 } catch (error) {
14 console.error('Failed to toggle microphone:', error);
15 }
16};
17
18// UI Component
19return (
20 <div className="audio-controls">
21 <button onClick={toggleMicrophone}>
22 {isMuted ? '🔇 Unmute' : '🎤 Mute'}
23 </button>
24 </div>
25);Handle Participants
Display and manage other participants
Get the list of participants using the SDK controller:
1import { useBaxCloudRoom } from '@baxcloud/react-sdk';
2
3function AudioCallParticipants() {
4 const { controller } = useBaxCloudRoom();
5 const participants = controller.getParticipants();
6
7 return (
8 <div className="participants-list">
9 <h3>Participants ({participants.length})</h3>
10 {participants.map(participant => (
11 <div key={participant.userId} className="participant">
12 <span className="name">{participant.name}</span>
13 </div>
14 ))}
15 </div>
16 );
17}Leave the Call
Disconnect gracefully and clean up resources
When the user wants to leave, disconnect properly:
1const leaveCall = async () => {
2 if (!client) return;
3
4 try {
5 // Disconnect from the room
6 await client.disconnect();
7
8 console.log('Left audio call successfully');
9 } catch (error) {
10 console.error('Error leaving call:', error);
11 }
12};
13
14// Add leave button to UI
15<button onClick={leaveCall} className="leave-button">
16 Leave Call
17</button>Clean Up Resources
disconnect() when leaving to properly release microphone access and close network connections. Failing to do so can cause resource leaks and prevent microphone access in subsequent calls.Audio Quality Settings & Optimization
BaxCloud provides fine-grained control over audio quality to balance clarity with bandwidth usage:
1// Audio quality is automatically optimized by the SDK
2// The SDK handles echo cancellation, noise suppression, and adaptive bitrate
3
4const client = new BaxCloudClient({
5 projectId: 'your-project-id',
6 apiKey: 'your-api-key',
7});Quality Presets
Adaptive Bitrate
Network Handling & Fallback
Handle network issues gracefully to provide the best user experience:
1// Monitor connection state
2const connectionState = client.getConnectionState();
3
4if (connectionState === 'reconnecting') {
5 console.log('Connection lost, attempting to reconnect...');
6 showNotification('Reconnecting...');
7} else if (connectionState === 'connected') {
8 console.log('Reconnected successfully');
9 showNotification('Connection restored', 'success');
10}
11
12// Monitor network quality (if available via controller)
13import { useBaxCloudRoom } from '@baxcloud/react-sdk';
14
15const { controller } = useBaxCloudRoom();
16const quality = controller.getNetworkQuality();
17
18if (quality.connectionQuality === 'poor') {
19 showNotification('Poor network connection. Audio quality may be reduced.');
20}Automatic Reconnection
Best Practices
Request microphone permission early
Request microphone permissions before joining the call to avoid delays. Show a clear explanation of why the permission is needed.
Provide visual feedback
Show audio level indicators so users know their microphone is working. Display speaking indicators for other participants to show who's talking.
Start muted for large calls
For calls with many participants, start users in a muted state to avoid chaos. Allow them to unmute when ready to speak.
Handle interruptions gracefully
On mobile, handle interruptions like phone calls or app backgrounding. Automatically mute the microphone when the app goes to background.
Use echo cancellation
Always enable echo cancellation unless users are guaranteed to use headphones. This prevents annoying feedback loops.
Test on poor networks
Test your audio calls on 3G networks and with simulated packet loss to ensure they work reliably for all users.
Troubleshooting
No Audio / Microphone Not Working
- Check that microphone permissions are granted
- Verify the correct audio input device is selected
- Ensure microphone isn't being used by another app
- Check browser console for WebRTC errors
Echo or Feedback
- Enable echo cancellation in audio config
- Ask users to use headphones
- Reduce speaker volume
- Ensure only one tab/window has the call open
Poor Audio Quality / Robotic Voice
- Check network connection quality
- Reduce audio bitrate for unstable networks
- Enable forward error correction (FEC)
- Ask users to close bandwidth-heavy apps
Audio Cutting Out
- Monitor packet loss and latency
- Switch to a lower quality preset
- Check if other participants have the same issue
- Verify firewall isn't blocking UDP traffic