Did you find this guide helpful?
Some test text!
Web / Guides / Open audio files
Before you begin, make sure your development environment includes Node.js and npm.
npm install @pdftron/webviewer-audioHere 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.
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 ----',
}
);
// ...Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales