Some test text!

Integrating Webviewer Audiokeyboard_arrow_down

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 => {
        // 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


Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.