Redact audio using JavaScript

Here is an example of redacting audio programmatically. redactAudio redacts ranges of time in the audio.

JavaScript

1await redactAudio({
2  start: startTime,
3  end: endTime,
4});

The start and end keys are both expected to be in seconds. Returns a promise that resolves when the operation is complete. Note that redactAudio should not be invoked simultaneously more than once. You must wait for the previous operation to finish before beginning another.

1import React, { useRef, useEffect } from 'react';
2import WebViewer from '@pdftron/webviewer';
3import { initializeAudioViewer } from '@pdftron/webviewer-audio';
4
5const App = () => {
6  const viewer = useRef(null);
7
8  useEffect(() => {
9    WebViewer(
10      {
11        path: '/webviewer/lib',
12      },
13      viewer.current
14    ).then(async (instance) => {
15      // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
16      const { loadAudio, redactAudio } = await initializeAudioViewer(instance, {
17        license: '---- Insert commercial license key here after purchase ----',
18      });
19
20      // Load a media element at a specific url. Can be a local or public link
21      // If local it needs to be relative to lib/ui/index.html.
22      // Or at the root. (eg '/audio.mp3')
23      const audioUrl = '/audio.mp3';
24      loadAudio(audioUrl);
25
26      instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
27        // Redact the audio track 0.5 - 2.0 seconds and 2.5 - 4.0 seconds.
28        await redactAudio([{ start: 0.5, end: 2.0 }, { start: 2.5, end: 4.0 }]);
29      });
30    });
31  }, []);
32
33  return (
34    <div className="App">
35      <div className="webviewer" ref={viewer} />
36    </div>
37  );
38};
39
40export default App;

1import React, { useRef, useEffect } from 'react';
2import WebViewer from '@pdftron/webviewer';
3import { initializeAudioViewer } from '@pdftron/webviewer-audio';
4
5const App = () => {
6  const viewer = useRef(null);
7
8  useEffect(() => {
9    WebViewer(
10      {
11        path: '/webviewer/lib',
12      },
13      viewer.current
14    ).then(async (instance) => {
15      // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
16      const { loadAudio, redactAudio } = await initializeAudioViewer(instance, {
17        license: '---- Insert commercial license key here after purchase ----',
18      });
19
20      // Load a media element at a specific url. Can be a local or public link
21      // If local it needs to be relative to lib/ui/index.html.
22      // Or at the root. (eg '/audio.mp3')
23      const audioUrl = '/audio.mp3';
24      loadAudio(audioUrl);
25
26      instance.docViewer.on('documentLoaded', async () => {
27        // Redact the audio track 0.5 - 2.0 seconds and 2.5 - 4.0 seconds.
28        await redactAudio([{ start: 0.5, end: 2.0 }, { start: 2.5, end: 4.0 }]);
29      });
30    });
31  }, []);
32
33  return (
34    <div className="App">
35      <div className="webviewer" ref={viewer} />
36    </div>
37  );
38};
39
40export default App;

The user can also apply the redactions through UI.

Also see the React sample, for a complete solution, with further customizations.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales