Some test text!

menu
Open audio fileskeyboard_arrow_down

Play audio files using JavaScript

linkInitial setup

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

linkInstall

npm install @pdftron/webviewer-audio

linkHow to use

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

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

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

    useEffect(() => {
      WebViewer(
        {
          path: '/webviewer/lib',
        },
        viewer.current,
      ).then(async instance => {
        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
        const {
            loadAudio,
        } = await initializeAudioViewer(
            instance,
            {
                license: '---- Insert commercial license key here after purchase ----',
            }
        );

        // Load a media element 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 '/audio.mp3')
        const audioUrl = '/audio.mp3';
        loadAudio(audioUrl);
      });
    }, []);

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

export default App;

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

linkLoading as a Script Tag

If your environment can not import WebViewer Video from the module, you can instead include WebViewer Video as a script tag. Simply, take the file node_modules/@pdftron/webviewer-audio/dist/main.js and add it to your project's html page.

<head>
    <!-- ... -->
    <!-- main.js can be renamed -->
    <script src="./main.js"></script>
</head>

This will add the object WebViewerAudio to the window. This object contains initializeAudioViewer. So the previous code can be changed to:

// ...
const {
    loadAudio,
} = await window.WebViewerAudio.initializeAudioViewer(
    instance,
    {
        license: '---- Insert commercial license key here after purchase ----',
    }
);
// ...

Get the answers you need: Support

close

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.

Join our upcoming webinar to learn about how to collaborate on videos frame by frame directly in your browser

Save your seat
close