Unable to reproduce <audio> from specific time HTML/React

Question

So, I have this page, where I want to reproduce the audio from 00:13 (second 13rd) when my yesChecker is true but it keeps reproducing the audio from second 0. I know I can simply cut the audio but I want to get this done by code.

I've tried by using the "#t=" fromat to the mp3 file but it doesn´t work still.

Here´s the code: // App.tsx

import { useState, useEffect, useRef } from "react";
import "./App.css";
import audioFile from "./assets/Everybody.mp3";

export default function App() {
  const [noIdx, setNoIdx] = useState(0);
  const [yesChecker, setYesChecker] = useState(false);
  const yesSize = noIdx * 20 + 16;

  const audioRef = useRef<HTMLAudioElement | null>(null);

  ...

  useEffect(() => {
    const handleLoadedMetadata = () => {
      if (audioRef.current) {
        audioRef.current.currentTime = 13;
        audioRef.current.play();
      }
    };

    if (audioRef.current) {
      audioRef.current.addEventListener("loadedmetadata", handleLoadedMetadata);
    }

    return () => {
      if (audioRef.current) {
        audioRef.current.removeEventListener(
          "loadedmetadata",
          handleLoadedMetadata,
        );
      }
    };
  }, []);
  const handleNoClick = () => {
    setNoIdx(noIdx + 1);
    createHeart();

    const noText = getNoText();
    if (noText === "está bien") {
      setYesChecker(true);
    }
  };

  ...

  return (
    <div className="flex flex-col items-center justify-center">
      {yesChecker ? (
        <>
          <div className="flex flex-col items-center">
            <img
              className="h-[300px] mx-auto"
              src="https://media.tenor.com/BNcELzaiMDkAAAAi/happy-valentines-day-my-love.gif"
              alt="Happy Valentine's Day"
            />
            <audio ref={audioRef} src={audioFile} autoPlay />
            <h1 className="text-4xl my-4 text-center"> XFIN! :3</h1>
          </div>
        </>
      )...

Answer 1

Looking at the official documentation:

currentTime is a property of HTMLMediaElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

The HTMLMediaElement interface's currentTime property specifies the current playback time in seconds.

Setting currentTime to a new value seeks the media to the given time, if the media is available

And in HTMLMediaElement there is a seekable property
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable

The seekable read-only property of HTMLMediaElement objects returns a new static normalized TimeRanges object that represents the ranges of the media resource, if any, that the user agent is able to seek to at the time seekable property is accessed.

It sounds like not all media allow what you are trying to do