Some test text!

Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

Web / Guides / Integrating Webviewer Audio


PDFTron is now Apryse, learn more here.

Integrate Webviewer Audio using JavaScript

Video and Audio Integration

Initial setup

Before you begin, make sure your development environment includes Node.js and npm.


npm install @pdftron/webviewer-video
npm install @pdftron/webviewer-audio

How to use

Here is an example of how WebViewer, Webviewer-video and WebViewer-audio could be integrated into your application.

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

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

    useEffect(() => {
          path: '/webviewer/lib',
      ).then(async instance => {
        await initializeAudioViewer(
          { license },

        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
        const {
        } = await initializeVideoViewer(
                license: '---- Insert commercial license key here after purchase ----',
                AudioComponent: Waveform,
                cacheAudioWaveform: false,

        // Load a video 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 '/video.mp4')
        // A unique fileId should be generated for each url for audio caching to work properly
        loadVideo(videoUrl, { fileId: 'testId' });
    }, []);

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

export default App;

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

Get the answers you need: Support