Section:

Integrate Webviewer Audio using JavaScript

Apryse Docs Image

Initial setup

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

Install

sh

1npm install @pdftron/webviewer-video
2npm 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.

JavaScript

1import React, { useRef, useEffect } from 'react';
2import WebViewer from '@pdftron/webviewer';
3import { initializeVideoViewer } from '@pdftron/webviewer-video';
4import {
5  Waveform,
6  initializeAudioViewer
7} from '@pdftron/webviewer-audio';
8
9const App = () => {
10    const viewer = useRef(null);
11    const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
12
13    useEffect(() => {
14      WebViewer(
15        {
16          path: '/webviewer/lib',
17        },
18        viewer.current,
19      ).then(async instance => {
20        await initializeAudioViewer(
21          instance,
22          { license },
23        );
24
25        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
26        const {
27            loadVideo,
28        } = await initializeVideoViewer(
29            instance,
30            {
31                license: '---- Insert commercial license key here after purchase ----',
32                AudioComponent: Waveform,
33                cacheAudioWaveform: false,
34            }
35        );
36
37        // Load a video at a specific url. Can be a local or public link
38        // If local it needs to be relative to lib/ui/index.html.
39        // Or at the root. (eg '/video.mp4')
40        // A unique fileId should be generated for each url for audio caching to work properly
41        loadVideo(videoUrl, { fileId: 'testId' });
42      });
43    }, []);
44
45    return (
46        <div className="App">
47            <div className="webviewer" ref={viewer} />
48        </div>
49    );
50}
51
52export default App;

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales