How to log each line of the subtitle using the plyr library?

[farhadibehnamdev]

I am working on a project using Next.js v14.0.4 and the Plyr-React library to synchronize subtitles with audio. My first step is to read each line of the transcript. Although I read the documentation of Plyrjs, I found out that the "cuechange" event will be helpful for my goal. However, even after configuring the Plyrjs library to use subtitles, the "cuechange" event doesn't fire. I am not sure if I am going in the right direction.

I provide an example to illustrate what I am doing.
https://stackblitz.com/edit/stackblitz-starters-s6balx?file=components%2FPlayerUI.tsx

import Plyr, { APITypes, PlyrInstance, PlyrProps, usePlyr } from "plyr-react";
import "plyr-react/plyr.css";
import React, { useEffect } from "react";


interface Track {
  kind: TrackKind;
  label: string;
  src: string;
  srcLang: string;
  default?: boolean;
}

interface Source {
  src: string;
  type: string;
}

type TrackKind =
  | "subtitles"
  | "captions"
  | "chapters"
  | "descriptions"
  | "metadata";
type MediaType = "audio" | "video";

const tracks: Track[] = [
  {
    kind: "subtitles",
    label: "English",
    srcLang: "en-US",
    src: "/office.vtt",
    default: true,
  },
];

interface PlyrPropsType {
  type: MediaType;
  title: string;
  sources: Source[];
  tracks: Track[];
}

const plyrProps: PlyrPropsType = {
  type: "audio",
  title: "Example title",

  sources: [
    {
      src: "/audio.mp3",
      type: "audio/mp3",
    },
  ],
  tracks,
};

const CustomPlyrInstance = React.forwardRef<APITypes, PlyrProps>(
  (props, ref) => {
    const { source, options = null } = props;
    const raptorRef = usePlyr(ref, { options, source });

    React.useEffect(() => {
      const { current } = ref as React.MutableRefObject<APITypes>;

      if (current.plyr.source === null) return;

      const api = current as { plyr: PlyrInstance };

      api.plyr.on("ready", () => console.log("I'm ready"));

      api.plyr.on("canplay", () => {
        api.plyr.play();
      });
      api.plyr.on("cuechange", (event) => {
        console.log("cuechange ::", raptorRef.current?.textTracks);
      });

      api.plyr.on("ended", () => console.log("I'm Ended"));
    });

    return (
      <audio
        ref={raptorRef as React.MutableRefObject<HTMLAudioElement>}
        className="plyr-react plyr"
      >
        <track
          src="/office.vtt"
          srcLang="en"
          label="office"
          kind="subtitels"
          lang="en-US"
          id="office-id"
        />
      </audio>
    );
  }
);

const videoOptions = undefined;

const PlayerUI = function () {
  const ref = React.useRef<APITypes>(null);

  return (
    <>
      {plyrProps && (
        <CustomPlyrInstance
          ref={ref}
          source={plyrProps}
          options={videoOptions}
        />
      )}
    </>
  );
};

export default PlayerUI;