# Audio mixing and sound effects (/en/realtime-media/broadcast-streaming/build/control-audio-and-devices/audio-mixing-and-sound-effects/web)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Video SDK makes it simple for you to publish audio captured through the microphone to subscribers in a channel. In some real-time audio and video use-cases, such as games or karaoke, you need to play sound effects or mix in music files to enhance the atmosphere and add interest. Video SDK enables you to add sound effects and mix in pre-recorded audio.

      
  
      
  
      
  
      
    In Agora Web SDK, if you publish multiple local audio tracks, the SDK automatically mixes these audios. To achieve the effect of mixing audio files with voice, create and publish multiple local audio tracks.

    Try out the [online demo](https://webdemo-global.agora.io/index.html) for [Audio effects and music files](https://webdemo-global.agora.io/example/advanced/audioMixingAndAudioEffect/index.html).

    This page shows you how to implement audio mixing and playing sound effects in your app.

    ## Understand the tech [#understand-the-tech-3]

    Video SDK provides APIs that enable you to implement:

    * **Audio mixing**

      Mix in music file such as background music with microphone audio. Using this feature, you can play only one file at a time.

    * **Sound effects**

      Play audios with a short duration. For example, applause, cheers, or gunshots. You can play multiple sound effects at the same time.

    ## Prerequisites [#prerequisites-3]

    Ensure that you have:

    * Implemented the [SDK quickstart](../../index) in your project.

    ## Implement audio mixing [#implement-audio-mixing]

    To implement audio mixing in your project, take the following steps:

    1. **Create a buffer source track**

    Video SDK offers the `createBufferSourceAudioTrack` method that enables you to read a local or online audio file, and create a corresponding local audio track object `BufferSourceAudioTrack`:

    ```javascript
    // Create an audio track using online music
    const audioFileTrack = await AgoraRTC.createBufferSourceAudioTrack({
      source: "https://web-demos-static.agora.io/agora/smlt.flac",
    });
    console.log("create audio file track success");
    ```

    Audio tracks created from audio files follow a different audio data processing flow than microphone audio tracks. After creating a track using an audio file, if you directly call `audioFileTrack.play` or `client.publish([audioFileTrack])`, you do not hear the music either locally or remotely.

    You can publish the following audio tracks in the channel.

    1. **MicrophoneAudioTrack**

    For microphone audio tracks, the SDK continuously collects the latest audio data (`AudioBuffer`) from the target microphone device.

    ![MicrophoneAudioTrack](https://assets-docs.agora.io/images/video-sdk/microphone-audio-track-web.svg)

    * After you call the `play` method, the audio data is sent to the `LocalPlayback` component, allowing the local user to hear it.

    * When the `publish` method is called, the audio data is transmitted to Agora SDRTN® and eventually heard by the remote user.
      The microphone audio track continues to acquire audio data until the `close` method is invoked, at which point the audio track becomes unavailable.

    2. **BufferSourceAudioTrack**

    For audio files, the Video SDK does not collect audio data; instead, it achieves a similar effect by reading files, shown in the following figure.

    ![BufferSourceAudioTrack](https://assets-docs.agora.io/images/video-sdk/buffer-source-audio-track-web.svg)

    The key distinctions between collecting audio data and reading files are as follows:

    1. **Continuous vs. controlled reading:**
       * Collection of audio data is continuous and cannot be paused, focusing on capturing the latest audio data.
       * File reading provides more flexibility. You can pause, jump to specific positions, or loop playback. These operations are core functions of `BufferSourceAudioTrack`.

    2. **Initiating file reading:**
       * After creating an audio track from an audio file, the SDK does not automatically read the file. You need to use `BufferSourceAudioTrack`'s `startProcessAudioBuffer` method to initiate the reading and audio data processing. You then call the `play` and `publish` methods to make the audio file audible locally and remotely.

    3. **Enable audio mixing**

    Video SDK supports publishing multiple audio tracks. You can mix audio by publishing `BufferSourceAudioTrack` together with the audio tracks created through the microphone. To enable audio mixing, refer to the following code:

    ```javascript
    // Create a microphone audio track
    const microphoneTrack = await AgoraRTC.createMicrophoneAudioTrack();

    // Start processing audio data from the audio file
    audioFileTrack.startProcessAudioBuffer();

    // Publish both the audio file track and the microphone track to begin mixing
    await client.publish([microphoneTrack, audioFileTrack]);

    // To stop mixing, either stop processing audio data from the file
    audioFileTrack.stopProcessAudioBuffer();

    // Or directly unpublish the audio file track
    await client.unpublish([audioFileTrack]);
    ```

    3. **Manage audio mixing**

    To handle audio mixing, refer to the following code:

    ```javascript
    // Pause processing audio data
    audioFileTrack.pauseProcessAudioBuffer();
    // Resume processing audio data
    audioFileTrack.resumeProcessAudioBuffer();
    // Stop processing audio data
    audioFileTrack.stopProcessAudioBuffer();
    // Start processing audio data in the loop mode
    audioFileTrack.startProcessAudioBuffer({ loop: true });

    // Get the current playback progress (seconds)
    audioFileTrack.getCurrentTime();
    // Total duration of the current audio file (seconds)
    audioFileTrack.duration;
    // Jump to the position at 50 seconds
    audioFileTrack.seekAudioBuffer(50);
    ```

    <CalloutContainer type="warning">
      <CalloutDescription>
        If you play a short sound effect file using `startAudioMixing`, or a long music file using `playEffect`, the playback may fail.
      </CalloutDescription>
    </CalloutContainer>

    ## Reference [#reference-3]

    This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

    ### Development notes [#development-notes]

    Consider the following when developing your app:

    * To play online audio files, you also need to configure CORS.
    * Supported audio formats are MP3, AAC, and other audio formats supported by the browser.
    * Local files only support the browser's native [File object](https://developer.mozilla.org/en-US/docs/Web/API/File).
    * Safari versions below 12 do not support mixing, so publishing multiple audio tracks is not possible.
    * Irrespective of the number of audio tracks published locally, the SDK automatically mixes them into one audio track, so the remote user only receives one `RemoteAudioTrack`.

    ### API reference [#api-reference-3]

    * [`createBufferSourceAudioTrack`](https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/iagorartc.html#createbuffersourceaudiotrack)
    * [`BufferSourceAudioTrack`](https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/ibuffersourceaudiotrack.html)
    * [`publish`](https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/iagorartcclient.html#publish)