无法从特定时间 HTML/React 重现 <audio>

Question

所以，我有这个页面，当我的 yesChecker 为 true 时，我想在其中重现 00:13（第 13 秒）的音频，但它不断从第 0 秒开始重现音频。我知道我可以简单地剪切音频，但我想通过代码完成此操作。

我尝试过使用“#t=” fromat 到 mp3 文件，但它仍然不起作用。

代码如下： // 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

查看官方文档：

currentTime

 是 

HTMLMediaElement 的属性
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

HTMLMediaElement 接口的 currentTime 属性指定当前播放时间（以秒为单位）。

将 currentTime 设置为新值可在给定时间查找媒体（如果媒体可用）

在

HTMLMediaElement

 中有一个 

seekable

 属性

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable

HTMLMediaElement 对象的可查找只读属性返回一个新的静态规范化 TimeRanges 对象，该对象表示用户代理在访问可查找属性时能够查找的媒体资源范围（如果有）。

听起来并非所有媒体都允许您尝试做的事情