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.Core.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 | Blob | file	The audio url, Blob object, or File object.
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 serviceWorkerLocation string <optional> '' The folder location of your service worker. The service worker is used to pass custom headers to the requested media. You may need to specify where in which folder this file is located on your server if it is not at the root level. 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);
    });