@pdftron/webviewer-audio
Advanced tools
This is an addon for WebViewer that allows loading media files (.mp3, .mp4, ogg, webm, etc.), so that their audio tracks can annotated and redacted.
WebViewer is a powerful JavaScript-based PDF Library that's part of the PDFTron PDF SDK. It allows you to view and annotate PDF files on your web app with a fully customizable UI.
This is an addon for WebViewer that allows loading media files (.mp3, .mp4, ogg, webm, etc.), so that their audio tracks can annotated and redacted.
Also, try out the react sample here. It shows how to integrate WebViewer and WebViewer-Audio with a server component for the saving of annotations.
https://webviewer-audio.web.app/
Before you begin, make sure your development environment includes Node.js and npm.
npm install @pdftron/webviewer-audio
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.
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.
<head>
...
<!-- Load React. -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<!-- 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 license = '---- Insert commercial license key here after purchase ----';
const {
loadAudio,
} = await window.WebViewerAudio.initializeAudioViewer(
instance,
{ license },
);
...
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.
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<string> = new EventEmitter();
private documentLoaded$: Subject<void>;
constructor() {
this.documentLoaded$ = new Subject<void>();
}
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();
}
}
See @pdftron/webviewer API documentation.
WebViewer Audio will run in trial mode until a license is provided. For more information on licensing, please visit our website.
FAQs
This is an addon for WebViewer that allows loading media files (.mp3, .mp4, ogg, webm, etc.), so that their audio tracks can annotated and redacted.
The npm package @pdftron/webviewer-audio receives a total of 4,315 weekly downloads. As such, @pdftron/webviewer-audio popularity was classified as popular.
We found that @pdftron/webviewer-audio demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.