Module: @pdftron/webviewer-audio

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 headers Object <optional> Custom headers to attach when making http requests to provided url 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

Examples

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');
    });

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', {
        headers: {
          'Authorization': 'Basic YWxhZGRpbjpvcGVuc2VzYW1l'
        },
      });
    });

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);
    });