Function createMultiTrack

src/hooks/useMultiTrackContext.tsx:44–78

(audio: TrackMeta[])

  const [activeId, setActiveId] = useState<number>(0);

  const createMultiTrack = (audio: TrackMeta[]) => {
    if (!containerRef.current) return;
    cleanUpResource();

    const newTracks = audio.map((track) => ({
      id: track.id,
      url: track.url,
      startPosition: track.position,
      ...TRACK_OPTIONS
    }));

    multiTrackRef.current = MultiTrack.create(newTracks, {
      container: containerRef.current,
      cursorColor: "#0a9528",
      cursorWidth: 1.5,
      dragBounds: true,
      timelineOptions: {
        insertPosition: "beforebegin"
      }
    });

    multiTrackRef.current.on("start-position-change", ({ id, startPosition }) => {
      const numericId = id as number;
      setTracks((prev) =>
        prev.map((track) => (track.id === numericId ? { ...track, position: startPosition } : track))
      );
    });

    const parentDiv = containerRef.current?.querySelector("#multitrack > div > div");
    if (parentDiv) {
      const children = Array.from(parentDiv.children) as HTMLElement[];
      // 第 0 个是 timeline，第 1 个是 cursor
      children[1].classList.add("active");
    }
  };

  const addTracks = (audio: { url: string; name: string }[]) => {
    const newTracks = [