Module: @pdftron/webviewer-audio

This is an addon for WebViewer that allows loading media files (.mp3, .mp4, .ogg, .webm, etc.) so that the audio track can be annotated. See the npm package on @pdftron/webviewer-audio for more information.

Methods


<async, static> initializeAudioViewer(instance, options)

Initializes the audio viewer so that WebViewer can load media files.
Parameters:
Name Type Description
instance Object The WebViewer instance
options Object Options object.
Properties
Name Type Argument Default Description
license string <optional>
'' The WebViewer Audio license.
showMobileStyling boolean <optional>
true Whether to show styling for mobile devices.
generatedPeaks Array.<number> <optional>
null An array of peaks to render the waveform
enableRedaction Object <optional>
Enables Redaction tools. Requires a server component to run ffmpeg commands. See: https://www.pdftron.com/documentation/web/guides/video/server-component/
Returns:
A promise that resolves to an object containing the functions needed to load videos in WebViewer.
Type
AudioFunctions
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const {
        loadAudio,
        getFileURL,
      } = await initializeAudioViewer(
        instance,
        {
          license,
          showMobileStyling: true,
        },
      );
    });

Type Definitions


AudioFunctions

Type:
  • Object
Properties:
Name Type Description
loadAudio function Loads an audio file for the WebViewer instance passed into initializeAudioViewer. First param is the audio/video url.
getFileURL function Can only be used in licensed mode. In the demo mode it will only return `null`. Returns the file URL loaded through `loadAudio` until redactions are made. After redactions are made the URL will be a Data URL for the modified file.
UI UI The UI namespace of WebViewer Audio, used to update UI elements of WebViewer Audio.
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const audioInstance = await initializeAudioViewer(
        instance,
        {
          license,
        },
      );

      const { loadAudio, getFileURL } = audioInstance;
      audioInstance.UI.updateElement('regionDeleteButton', { onClick: () => console.log('do something') });

      loadAudio('https://www.mydomain.com/my_audio_url');

      instance.docViewer.on('documentLoaded', async () => {
        // Download the file
        const anchor = document.createElement('a');
        anchor.href = getFileURL();
        anchor.target = "_blank";
        anchor.download = myAudioFile.mp3;
        // Auto click on a element, trigger the file download
        anchor.click();
      });
    });

getFileURL()

Can only be used in licensed mode. In the demo mode it will only return `null`. Returns the file URL loaded through `loadAudio` until redactions are made. After redactions are made the URL will be a Data URL for the modified file.
Returns:
Type
void
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const {
        getFileURL,
        loadAudio,
      } = await initializeVideoViewer(instance, { license });

      ...
      ...

      // Download the file
      const anchor = document.createElement('a');
      anchor.href = getFileURL();
      anchor.target = "_blank";
      anchor.download = myAudioFile.mp3;
      // Auto click on a element, trigger the file download
      anchor.click();
    });

loadAudio(url, options)

Loads an audio file for the WebViewer instance passed into initializeAudioViewer.
Parameters:
Name Type Description
url String The audio/video url.
options Object Optional options object
Properties
Name Type Argument Default Description
fileName string <optional>
Name of the file. URLs without an extension need this property set
generatedPeaks Array.<number> <optional>
null An array of peaks to render the waveform Large files can freeze the browser so use this as a workaround. Safari has a known issue when this option is turned on. Some files will not seek correctly on Safari.
Returns:
Type
void
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const {
        loadAudio,
      } = await initializeVideoViewer(instance, { license });

      loadAudio('https://www.mydomain.com/my_video_or_audio_url');
    });

Events


audioPause

Event emitted when audio gets paused
Example
WebViewer(...)
    .then(function(instance) {
      const { docViewer } = instance;
      docViewer.on('audioPause', listener);
    });

audioPlay

Event emitted when audio begins playing
Example
WebViewer(...)
    .then(function(instance) {
      const { docViewer } = instance;
      docViewer.on('audioPlay', listener);
    });

audioViewerEventsAttached

Event emitted when an annotation observer is attached
Example
WebViewer(...)
    .then(function(instance) {
      const { docViewer } = instance;
      docViewer.on('audioViewerEventsAttached', listener);
    });

audioViewerLoaded

Event emitted when ffmpeg is loaded
Example
WebViewer(...)
    .then(function(instance) {
      const { docViewer } = instance;
      docViewer.on('audioViewerLoaded', listener);
    });

audioViewerReady

Event emitted when audio is loaded, decoded and the waveform drawn
Example
WebViewer(...)
    .then(function(instance) {
      const { docViewer } = instance;
      docViewer.on('audioViewerReady', listener);
    });