Redact audio using JavaScript

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

await redactAudio({
  start: startTime,
  end: endTime,
});

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.

import React, { useRef, useEffect } from 'react';
import WebViewer from '@pdftron/webviewer';
import { initializeAudioViewer } from '@pdftron/webviewer-audio';

const App = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: '/webviewer/lib',
      },
      viewer.current
    ).then(async (instance) => {
      // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
      const { loadAudio, redactAudio } = await initializeAudioViewer(instance, {
        license: '---- Insert commercial license key here after purchase ----',
      });

      // Load a media element at a specific url. Can be a local or public link
      // If local it needs to be relative to lib/ui/index.html.
      // Or at the root. (eg '/audio.mp3')
      const audioUrl = '/audio.mp3';
      loadAudio(audioUrl);

      instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
        // Redact the audio track 0.5 - 2.0 seconds and 2.5 - 4.0 seconds.
        await redactAudio([{ start: 0.5, end: 2.0 }, { start: 2.5, end: 4.0 }]);
      });
    });
  }, []);

  return (
    <div className="App">
      <div className="webviewer" ref={viewer} />
    </div>
  );
};

export default App;

The user can also apply the redactions through UI.

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