Some test text!

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.


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(() => {
          path: '/webviewer/lib',
      ).then(async instance => {
        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
        const {
        } = await initializeAudioViewer(
                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';
    }, []);

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

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.

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

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

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

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales