Audio Player

The Audio Player Bar is responsible for loading and playing an audio asset.

Props

Prop	Description
keyName	String The ID of an audio asset, used to fetch a signed URL to load the asset.

Important Note: To use this atom, the file should be /atoms/AudioPlayerBar.jsx. Below is the code

Example

• The example below is the base code of AudioPlayerBar.jsx component which you can replace when you place the code in the file /atoms/AudioPlayerBar.jsx.
• Utilizing the keyName prop and the /learn/audio endpoint, the user can fetch the signed URL and use the resulting path as the audio element's src.
• Recommendation: You should keep the code as is except for updating returing DOM elements and if you would like to fetch something else before returning the DOM elements.

// AudioPlayerBar.jsx
import React, { useEffect, useState } from 'react';

export default function AudioPlayerBar({ keyName }) {
  const [path, setPath] = useState(null);
  useEffect(() => {
    fetch('/learn/audio?key=' + keyName)
      .then(res => res.json())
      .then(result => {
        setPath(result.path);
      });
  }, [keyName]);

  if (path) {
    return <audio controls src={path} />;
  }

  return null;
}

The keyName can be aquired via the accessibilityAudioAsset element's of the Page's query