export default App;
`

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

$3

If your environment can not import WebViewer Audio from the module, you can instead include WebViewer Audio 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. WebViewer Audio requires the react library, so include that as well.

`html

...






`

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

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

$3

Webviewer Video comes with two builds. The default build does not include React and React-DOM in the bundle and both must be provided by the parent code. The other build includes React and React-DOM in the bundle. See the AngularJS example below on how to load the build that includes React.

`javascript
import { Component, ViewChild, OnInit, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
import { Subject } from 'rxjs';
import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
import { initializeAudioViewer } from '@pdftron/webviewer-audio/dist/main-with-react';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('viewer') viewer: ElementRef;
wvInstance: WebViewerInstance;
@Output() coreControlsEvent:EventEmitter = new EventEmitter();

private documentLoaded$: Subject;

constructor() {
this.documentLoaded$ = new Subject();
}

ngAfterViewInit(): void {

WebViewer({
path: '../lib',
}, this.viewer.nativeElement).then(async instance => {
const license = ---- Insert commercial license key here after purchase ----;

this.wvInstance = instance;

const audioInstance = await initializeAudioViewer(
//@ts-ignore
instance,
{
license,
}
);

// Load a video 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 '/video.mp4')
const audioUrl = '/audio.mp3';
loadAudio(audioUrl);
})
}

ngOnInit() {
}

getDocumentLoadedObservable() {
return this.documentLoaded$.asObservable();
}
}
``

Documentation

API documentation

WebViewer APIs

See @pdftron/webviewer API documentation.

License

WebViewer Audio will run in trial mode until a license is provided. For more information on licensing, please visit our website.