WebViewer is a powerful JavaScript-based PDF Library that is part of the Apryse SDK. It allows you to view and annotate PDF files on your web app with a fully customizable UI.
This sample uses the audio addon for WebViewer that allows the loading of media elements (.mp3, .mp4, ogg, webm, etc.), so that their audio tracks can be annotated and redacted.
This repo is specifically designed for users interested in integrating WebViewer Audio into a React project. This project was generated with an npx Create React App command.
npx create-react-app webviewer-audio --template javascript-blank
Before you begin, make sure your development environment includes Node.js and npm.
- Node.js.
- IDE used in this sample is Visual Studio Code with an NPM extension to process commands within its terminal.
- GitHub command line
git.
gh repo clone ApryseSDK/webviewer-audio
cd webviewer-audio-sample
npm install
In Visual Studio Code or from a Command Prompt window, preview the app in localhost with an npm command.
npm start
npm run start-server is required for saving of annotations. This will start a separate server on localhost:8080 that will handle web requests to save the annotations as XFDF to the local drive.
This option will be available on the UI as part of the Download button, which requires an active license.
Run npm run build to build the project. The build artifacts will be stored in the build/ directory. See the section about deployment for more information.
To test the build directory locally, outside of Visual Studio Code, you can use serve or http-server. In case of serve, by default it strips the .html extension stripped from paths. We added serve.json configuration to disable cleanUrls option.
Refer to a running sample on Apryse SDK showcase page.
Any submission to this repo is governed by these guidelines.
For licensing, refer to License.