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.

Example

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.

// 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;
}