How to use JavaScript for live audio streaming?

Live audio streaming in JavaScript generally involves utilizing two primary APIs: MediaDevices.getUserMedia and MediaSource.

MediaDevices.getUserMedia allows a web application to access audio and video input devices such as cameras, microphones, screen sharing, etc.

MediaSource API provides functionality to add streams of media data to an HTMLMediaElement that can be played.

Step 1

We can use the MediaSource API to create a new MediaSource object and attach a source buffer to it of the required MIME type.

Step 2

We will then use the getUserMedia to capture the audio from the user's microphone as a stream.

Step 3

That stream can then be added as a source buffer to the MediaSource object.

Step 4

Finally, we can play that MediaSource object in an HTML5 audio tag.

However, both these APIs can be quite complex to use, especially the MediaSource API which involves low level data manipulation.

Instead, it is often simpler and more convenient to use higher level libraries like Howler.js or Web Audio API that provides convenient abstractions and simplifications for using these APIs.

Here's a code sample for the process using MediaDevices and Web Audio API.

HTML:

<button id="start">Start streaming</button>
<audio id="audio"></audio>

JavaScript:

var startButton = document.getElementById('start');
startButton.addEventListener('click', startStreaming);

function startStreaming() {
    if (navigator.mediaDevices.getUserMedia) {
        console.log('getUserMedia supported.');

        var constraints = { audio: true, video: false }

        navigator.mediaDevices.getUserMedia(constraints)
            .then(function(stream) {
                var audio = document.querySelector('audio');
                audio.srcObject = stream;
                audio.onloadedmetadata = function(e) {
                    audio.play();
                    audio.muted = false;
                };
            })
            .catch(function(err) {
                console.log('The following error occurred: ' + err.name);
            }
         );
    } else {
       console.log('getUserMedia not supported on your browser!');
    }
}

The onclick event of the "Start Streaming" button triggers the startStreaming function which in turn accesses the microphone device and starts playing it through the "audio" HTML tag.

This basic example demonstrates how to stream audio from a user's microphone and play it back in real time, also known as a "local" stream. Transmitting this stream in real time to other users over a network, such as in a video meeting application, involves more complex topics such as networking, WebRTC, peer-to-peer connections, signaling, etc.

All these elements go beyond the scope of the present answer. However, the general idea would be to create a peer connection and add this stream to that connection.