Some test text!

Passing authentication headers to audio HTTP requests

Passing authentication headers to audio HTTP requests

WebViewer Audio utilizes service workers to allow for custom headers to be passed onto HTTP requests that retrieve the audio. This gives you the ability to authenticate audio files on the server side and access them securely using WebViewer Audio. See below example on how to utilize the service worker and pass custom headers.

Please note you will have to copy over the service worker file into your public folder. This can be done by using this script.

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 { 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, {
        headers: {
          Authorization: 'Bearer testToken',
          TestHeader: 'Test',
  }, []);

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

export default App;

Get the answers you need: Support

Upcoming Webinar: PDFTron SDK Tech Review | Nov 29, 2022 at 2 pm ET


The Platform


© 2022 PDFTron Systems Inc. All rights reserved.


Terms of Use