RTC Engine
  • Overview
  • Web
    • Demo のクイックスタート
    • SDK クイックスタート
    • 基本機能
      • 画面共有
      • ライブブロードキャスト
      • メディアデバイス
      • 音量
      • エンコーディング構成ファイルの設定
      • ネットワーク品質の検出
      • 検出能力
    • 高度な機能
      • AI ノイズ低減の有効化
      • ミキシングを有効にします
      • ウォーターマークを有効にします
      • Enable Virtual Background
      • 美顔とエフェクトの有効化
      • データメッセージ
      • キャプチャーとレンタリングのカスタマイズ
    • インターフェースリスト
    • リリース説明
    • 対応するプラットホーム
    • Web に関するよくあるご質問
      • 複数人でのビデオ通話を最適化
      • 制限付き自動再生の処理
      • ファイアウォール制限への対応
      • その他
  • Android
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • エラーコード
    • ソリューション
      • リアルタイムコーラス (TUIKaraoke)
        • クイックインテグレーション
        • 実施ステップ
        • 曲の同期
        • 歌詞の同期
        • 音声同期
        • ミクスストリーミングソリューション
        • TRTCKaraoke 関連インターフェース
        • よくあるご質問
    • リリース説明
  • iOS
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • ErrorCode
    • ソリューション
      • クイックインテグレーション
      • 実施ステップ
      • 曲の同期
      • 歌詞の同期
      • 音声同期
      • ミクスストリーミングソリューション
      • TRTCKaraoke 関連インターフェース
      • よくあるご質問
    • リリース説明
  • macOS
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • Advanced Features
      • ハードウェアデバイスのテスト
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • ErrorCode
      • リリース説明
    • リリース説明
  • Windows
    • Run Sample Code
    • Integration
    • インテグレーション
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • Advanced Features
      • ハードウェアデバイスのテスト
      • ネットワーク品質のテスト
      • キャプチャーとレンタリングのカスタマイズ
      • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • エラーコード
    • リリース説明
  • Electron
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • 顧客インターフェース
      • Overview
      • エラーコード
  • Flutter
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • 顧客インターフェース
      • Overview
      • エラーコード
  • Unity
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
    • 顧客インターフェース
      • Overview
      • エラーコード
  • QT
    • インテグレーション
      • 1. SDK のインポート
  • Overview
    • Overview
  • 概念
  • Features
  • 性能統計
  • 価格
    • 無料時間
    • RTC-Engine パッケージ
    • サブスクリプションパッケージ期間の課金説明
    • 従量課金
      • 音声・ビデオ時間の課金説明
      • クラウド録画の課金説明
      • ミックストランスコーディングとCDNへのリレーの課金説明
  • よくあるご質問
    • 初心者のよくあるご質問
    • マイグレーションガイド
      • Twilio Video から TRTC への移行
      • 課金
      • Features
      • UserSig
      • ファイアウォール制限
      • インストールパッケージを削減する方法
      • TRTCCalling Web 関連
      • オーディオ・ビデオの品質
      • その他
RTC Engine
このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

ミキシングを有効にします

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.