Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
RTC Engine
Overview
  • Web
    • Demo Quick Run
    • SDK Quick Start
    • Basic Features
      • Screen Sharing
      • Live Streaming
      • Media Device
      • Audio Volume
      • Set Encoding Profile
      • Detect Network Quality
      • Detect Capabilities
    • Advance Features
      • Enable AI Denoiser
      • Enable Audio Mixer
      • Enable Watermark
      • SEI Message
      • Custom Capturing and Rendering
      • Web Beautification Effects
    • Best Practices
      • Optimize Multi-Person Video Calls
      • Handle Autoplay Restriction
      • Handle Firewall Restriction
    • API List
    • Released Notes
    • Supported Platforms
    • Web FAQs
  • Android
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Setting Video Quality
      • 10.Rotating Videos
    • Testing Newwork Quality
    • Custom Capturing and Rendering
    • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • Error Codes
    • Release Notes
  • iOS
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Setting Video Quality
      • 10.Rotating Videos
    • Testing Network Quality
    • Custom Capturing and Rendering
    • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • ErrorCode
    • Release Notes
  • macOS
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Testing Hardware Devices
    • Testing Network Quality
    • Custom Capturing and Rendering
    • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • ErrorCode
      • Release Notes
    • Release Notes
  • Windows C++
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Setting Video Quality
      • 10.Rotating Videos
    • Testing Hardware Devices
    • Testing Network Quality
    • Custom Capturing and Rendering
    • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • Type Definition
      • Deprecated Interface
      • Error Codes
    • Release Notes
  • Electron
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Client APIs
      • Overview
      • Error Codes
  • Flutter
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Client APIs
      • Overview
      • Error Codes
  • Unity
    • Integration
      • 1.API Examples
      • 2Importing the SDK
    • Client APIs
      • Overview
      • Error Codes
  • Qt
    • Integration
      • 1.Importing the SDK
  • Overview
    • Overview
  • Pricing
    • RTC-Engine Packages
    • Billing of On-Cloud Recording
    • Billing of MixTranscoding and Relay to CDN
    • Billing Explanation for Subscription Package Duration
    • Billing of Monitoring Dashboard
    • Free Minutes
    • Pay-As-You-Go
  • Concepts
  • Features
  • Performance Statistics
  • FAQs
    • FAQs for Beginners
    • Migration Guide
      • Twilio Video to Tencent RTC
      • Billing
      • Features
      • UserSig
      • Firewall Restrictions
      • How to Downsize Installation Package
      • TRTCCalling for Web
      • Audio and Video Quality
      • Others
RTC Engine

Enable Audio Mixer

This article will introduce how to add background music during a call. Experience demo.

Prerequisites

TRTC version 5.1+
The following platforms support adding background music during a call:
Operating System
Browser Type
Minimum Browser Version
Mac OS
Desktop Chrome
56+
Desktop Safari
11+
Desktop Firefox
56+
Desktop Edge
80+
Windows
Desktop Chrome
56+
Desktop QQ Browser
10.4+
Desktop Firefox
56+
Desktop Edge
80+
iOS
Mobile Safari
14+
WeChat Embedded Web
Android
Mobile Chrome
81+
WeChat Embedded Web
Mobile QQ Browser

Implementation Process

Start Background Music

When playing online sound effect files, the sound effect files must support CORS and the access protocol must be https.
Supported formats include MP3, AAC (and other audio formats supported by browsers).
Before any user interaction, browsers prohibit web pages from playing media with sound. It is recommended to guide users to perform a click action before calling this interface.
Reference: Autoplay_guide.
await trtc.startPlugin('AudioMixer', {
id: 'count',
url: '../assets/count.mp3',
loop: true,
volume: 0.2
})

Update Background Music

Perform operations on the background music.
// disable loop playback
await trtc.updatePlugin('AudioMixer', {
id: 'count',
loop: false
})
// volume setting
await trtc.updatePlugin('AudioMixer', {
id: 'count',
volume: 1
})
// pause music `count`
await trtc.updatePlugin('AudioMixer', {
id: 'count',
loop: true,
volume: 0.2,
operation: 'pause'
})
// resume music `count`
await trtc.updatePlugin('AudioMixer', {
id: 'count',
operation: 'resume'
})
// play `count` from 5s
await trtc.updatePlugin('AudioMixer', {
id: 'count',
seekFrom: 5
})

Stop Background Music

Stop a background music that is not needed.
await trtc.stopPlugin('AudioMixer', {
id: 'count'
})

API

trtc.startPlugin('AudioMixer', options)

Start background music.

options

Name
Type
Required
Description
id
string
Yes
Set a unique ID for each incoming music URL
url
string
Yes
Music file URL.

One of url and track must be passed in. If both are passed in, the url will be selected first.
track
MediaStreamAudioTrack
Yes
Music mediaStreamTrack.

One of url and track must be passed in. You can pass in a track extracted from the <audio/> tag. If both are passed in, the url will be selected first.
loop
boolean
No
Whether to loop play, default is false
volume
number
No
Set the initial volume, default is 1 (0-1)
await trtc.startPlugin('AudioMixer', {
id: 'count',
url: '../assets/count.mp3',
loop: true,
volume: 0.2
})

trtc.updatePlugin('AudioMixer', options)

Update background music.

options

Name
Type
Required
Description
id
string
Yes
The unique ID for each incoming music URL you set when call startPlugin
loop
boolean
No
Whether to loop play, default is false
volume
number
No
Set the initial volume, default is 1 (0-1)
seekFrom
number
No
Start seeking playback from which second, this parameter requires the music resource file to support HTTP range requests.
operation
number
No
Operation on the background music: 'pause' | 'resume' | 'stop'
Example:
await trtc.updatePlugin('AudioMixer', {
id: 'count',
loop: true,
volume: 0.2,
operation: 'pause'
})

trtc.stopPlugin('AudioMixer', options)

Stop a background music that is not needed.

options

Name
Type
Required
Description
id
string
Yes
The unique ID for each incoming music URL you set when call startPlugin
Example:
await trtc.stopPlugin('AudioMixer', {
id: 'count'
})

FAQs

1. Cross-Origin Error?
For example: Access to audio at XXX from origin XXX has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Solution: You need to configure the CORS protocol for your online music files.
2. Incorrect Audio Format, Unable to Play in Browser?
For example: NotSupportedError: The operation is not supported.
Solution: You need to use an audio format supported by the browser.