Skip to content

Commit fd45df2

Browse files
author
Jill Grant
authored
Merge pull request #271856 from sloanster/patch-11
Create audio-quality-enhancements.md
2 parents 70e1ae7 + a60a8c1 commit fd45df2

File tree

3 files changed

+120
-0
lines changed

3 files changed

+120
-0
lines changed

articles/communication-services/concepts/voice-video-calling/calling-sdk-features.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ The following list presents the set of features that are currently available in
9999
| | Custom background image | ✔️ ||||
100100
| Audio Effects | [Music Mode](./music-mode.md) || ✔️ | ✔️ | ✔️ |
101101
| | [Audio filters](../../how-tos/calling-sdk/manage-audio-filters.md) || ✔️ | ✔️ | ✔️ |
102+
| | [Noise Supression](../../tutorials/audio-quality-enhancements/add-noise-supression.md) | ✔️ ||||
102103
| Notifications <sup>4</sup> | [Push notifications](../../how-tos/calling-sdk/push-notifications.md) | ✔️ | ✔️ | ✔️ | ✔️ |
103104

104105
<sup>1</sup> The capability to Mute Others is currently in public preview.

articles/communication-services/toc.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,10 @@ items:
288288
displayName: diagnostics, Survey, feedback, quality, reliability, users, end, call, quick
289289
- name: Collecting user feedback with the mobile UI Library
290290
href: tutorials/collecting-user-feedback/collecting-user-feedback.md
291+
- name: Audio quality enhancements
292+
items:
293+
- name: Enabling noise supression
294+
href: tutorials/audio-quality-enhancements/add-noise-supression.md
291295
- name: Virtual appointments
292296
items:
293297
- name: Sample builder
Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Tutorial - Add audio noise suppression ability to your Web calls
3+
titleSuffix: An Azure Communication Services tutorial on how to enable advanced noise suppression
4+
description: Learn how to add audio effects in your calls using Azure Communication Services.
5+
author: sloanster
6+
7+
ms.author: micahvivion
8+
ms.date: 04/16/2024
9+
ms.topic: tutorial
10+
ms.service: azure-communication-services
11+
ms.subservice: calling
12+
ms.custom: mode-other
13+
---
14+
# Add audio quality enhancements to your audio calling experience
15+
The Azure Communication Services audio effects **noise suppression** abilities can improve your audio calls by filtering out unwanted background noises. **Noise suppression** is a technology that removes background noises from audio calls. It makes audio calls clearer and better by eliminating background noise, making it easier to talk and listen. Noise suppression can also reduce distractions and tiredness caused by noisy places. For example, if you're taking an Azure Communication Services WebJS call in a coffee shop with considerable noise, turning on noise suppression can make the call experience better.
16+
17+
[!INCLUDE [Public Preview](../../includes/public-preview-include-document.md)]
18+
19+
## Using audio effects - **noise suppression**
20+
### Install the npm package
21+
Use the `npm install` command to install the Azure Communication Services Audio Effects SDK for JavaScript.
22+
> [!IMPORTANT]
23+
> This tutorial uses the Azure Communication Services Calling SDK version of `1.24.1-beta.1` (or greater) and the Azure Communication Services Calling Audio Effects SDK version greater than or equal to `1.1.0-beta.1` (or greater).
24+
```console
25+
npm install @azure/communication-calling-effects --save
26+
```
27+
> [!NOTE]
28+
> The calling effect library cannot be used standalone and can only work when used with the Azure Communication Calling client library for WebJS (https://www.npmjs.com/package/@azure/communication-calling).
29+
30+
You can find more [details ](https://www.npmjs.com/package/@azure/communication-calling-effects) on the calling effects npm package page.
31+
32+
> [!NOTE]
33+
> Current browser support for adding audio noise suppression effects is only available on Chrome and Edge Desktop Browsers.
34+
35+
> You can learn about the specifics of the [calling API](/javascript/api/azure-communication-services/@azure/communication-calling/?view=azure-communication-services-js&preserve-view=true).
36+
37+
To use `noise suppression` audio effects within the Azure Communication Calling SDK, you need the `LocalAudioStream` that is currently in the call. You need access to the `AudioEffects` API of the `LocalAudioStream` to start and stop audio effects.
38+
```js
39+
import * as AzureCommunicationCallingSDK from '@azure/communication-calling';
40+
import { DeepNoiseSuppressionEffect } from '@azure/communication-calling-effects';
41+
42+
// Get the LocalAudioStream from the localAudioStream collection on the call object
43+
// 'call' here represents the call object.
44+
const localAudioStreamInCall = call.localAudioStreams[0];
45+
46+
// Get the audio effects feature API from LocalAudioStream
47+
const audioEffectsFeatureApi = localAudioStreamInCall.feature(SDK.Features.AudioEffects);
48+
49+
// Subscribe to useful events that show audio effects status
50+
audioEffectsFeatureApi.on('effectsStarted', (activeEffects: ActiveAudioEffects) => {
51+
console.log(`Current status audio effects: ${activeEffects}`);
52+
});
53+
54+
55+
audioEffectsFeatureApi.on('effectsStopped', (activeEffects: ActiveAudioEffects) => {
56+
console.log(`Current status audio effects: ${activeEffects}`);
57+
});
58+
59+
60+
audioEffectsFeatureApi.on('effectsError', (error: AudioEffectErrorPayload) => {
61+
console.log(`Error with audio effects: ${error.message}`);
62+
});
63+
```
64+
65+
At anytime if you want to check what **noise suppression** effects are currently active, you can use the `activeEffects` property.
66+
The `activeEffects` property returns an object with the names of the current active effects.
67+
```js
68+
// Using the audio effects feature api
69+
const currentActiveEffects = audioEffectsFeatureApi.activeEffects;
70+
```
71+
72+
### Start a call with Noise Suppression enabled
73+
To start a call with **noise suppression** turned on, you can create a new `LocalAudioStream` with a `AudioDeviceInfo` (the LocalAudioStream source <u>shouldn't</u> be a raw `MediaStream` to use audio effects), and pass it in the `CallStartOptions.audioOptions`:
74+
```js
75+
// As an example, here we are simply creating a LocalAudioStream using the current selected mic on the DeviceManager
76+
const audioDevice = deviceManager.selectedMicrophone;
77+
const localAudioStreamWithEffects = new SDK.LocalAudioStream(audioDevice);
78+
const audioEffectsFeatureApi = localAudioStreamWithEffects.feature(SDK.Features.AudioEffects);
79+
80+
// Start effect
81+
await audioEffectsFeatureApi.startEffects({
82+
noiseSuppression: deepNoiseSuppression
83+
});
84+
85+
// Pass the LocalAudioStream in audioOptions in call start/accept options.
86+
await call.startCall({
87+
audioOptions: {
88+
muted: false,
89+
localAudioStreams: [localAudioStreamWithEffects]
90+
}
91+
});
92+
```
93+
94+
### How to turn on Noise Suppression during an ongoing call
95+
There are situations where a user might start a call and not have **noise suppression** turned on, but their current environment might get noisy resulting in them needing to turn on **noise suppression**. To turn on **noise suppression**, you can use the `audioEffectsFeatureApi.startEffects` API.
96+
```js
97+
// Create the noise supression instance
98+
const deepNoiseSuppression = new DeepNoiseSuppressionEffect();
99+
100+
// Its recommened to check support for the effect in the current environment using the isSupported method on the feature API. Remember that Noise Supression is only supported on Desktop Browsers for Chrome and Edge
101+
const isDeepNoiseSuppressionSupported = await audioEffectsFeatureApi.isSupported(deepNoiseSuppression);
102+
if (isDeepNoiseSuppressionSupported) {
103+
console.log('Noise supression is supported in browser environment');
104+
}
105+
106+
// To start ACS Deep Noise Suppression,
107+
await audioEffectsFeatureApi.startEffects({
108+
noiseSuppression: deepNoiseSuppression
109+
});
110+
111+
// To stop ACS Deep Noise Suppression
112+
await audioEffectsFeatureApi.stopEffects({
113+
noiseSuppression: true
114+
});
115+
```

0 commit comments

Comments
 (0)