Some test text!

Search
Hamburger Icon

Web / Guides / Open audio files

Play audio files using JavaScript

Initial setup

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

Install

npm install @pdftron/webviewer-audio

How 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.

Loading 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: Chat with us