|
| 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