const res = await fetch("foo.png");
const fooBlob = await res.blob();

const fooObjectUrl = URL.createObjectUrl(fooBlob);
<img src={fooObjectUrl}>

const img = new Image();
img.src = objectUrl;
await img.decode();

<img src={objectUrl} />

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const arrayBuffer = await blob.arrayBuffer();
const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);

import { create } from "zustand";

type AssetStatus = "idle" | "loading" | "loaded" | "error";
interface AssetEntry {
  status: AssetStatus;
  blob?: Blob;
  objectUrl?: string;
  error?: string;
}
interface AssetState {
  entries: Map<string, AssetEntry>;
  setLoading: (url: string) => void;
  setLoaded: (url: string, blob: Blob, objectUrl: string) => void;
  setError: (url: string, error: string) => void;
  getObjectUrl: (url: string) => string | undefined;
  revoke: (url: string) => void;
  revokeAll: () => void;
  getObjectUrl: (url: string) => string | undefined;
}

export const useAssetStore = create<AssetState>((set, get) => ({
  entries: new Map(),
  setLoading: url =>
    set(s => {
      const next = new Map(s.entries);
      next.set(url, { status: "loading" });
      return { entries: next };
    }),
  setLoaded: (url, blob, objectUrl) =>
    set(s => {
      const next = new Map(s.entries);
      next.set(url, { status: "loaded", blob, objectUrl });
      return { entries: next };
    }),
  setError: (url, error) =>
    set(s => {
      const next = new Map(s.entries);
      next.set(url, { status: "error", error });
      return { entries: next };
    }),
  revoke: url =>
    set(s => {
      const next = new Map(s.entries);
      const e = next.get(url);
      if (e?.objectUrl) URL.revokeObjectURL(e.objectUrl);
      next.delete(url);
      return { entries: next };
    }),
  revokeAll: () =>
    set(s => {
      for (const [, e] of s.entries)
        if (e.objectUrl) URL.revokeObjectURL(e.objectUrl);
      return { entries: new Map() };
    }),
  getObjectUrl: url => get().entries.get(url)?.objectUrl || url
}));

import { useEffect } from "react";
import { useAssetStore } from "./assetStore";

interface Options {
  concurrency?: number;
  onProgress?: (done: number, total: number) => void;
  signal?: AbortSignal;
  requestInit?: RequestInit;
}

/**
 * @description urls를 미리 받아 Blob/ObjectURL로 스토어에 저장
 * @param urls 미리 받을 파일 경로 배열
 * @param opts 옵션
 */
export function usePreloadAssets(urls: string[], opts: Options = {}) {
  const { setLoading, setLoaded, setError, entries } = useAssetStore();
  const { concurrency = 4, onProgress, signal, requestInit } = opts;

  useEffect(() => {
    if (!urls?.length) return;
    const uniq = Array.from(new Set(urls));
    const pending = uniq.filter(u => entries.get(u)?.status !== "loaded");

    if (!pending.length) return;

    let done = 0;
    let aborted = false;
    const ac = new AbortController();
    const sig = signal ?? ac.signal;

    const run = async () => {
      const queue = pending.slice();
      const workers = Array.from(
        { length: Math.min(concurrency, queue.length) },
        async () => {
          while (!aborted && queue.length) {
            const url = queue.shift()!;
            try {
              setLoading(url);
              const res = await fetch(url, {
                signal: sig,
                ...requestInit
              });
              if (!res.ok) throw new Error(`HTTP ${res.status}`);
              const blob = await res.blob();
              const objectUrl = URL.createObjectURL(blob);
              setLoaded(url, blob, objectUrl);
            } catch (e: unknown) {
              const error = e as Error;
              if (error?.name !== "AbortError")
                setError(url, error?.message ?? "fetch failed");
            } finally {
              done += 1;
              onProgress?.(done, pending.length);
            }
          }
        }
      );
      await Promise.all(workers);
    };

    run();
    return () => {
      aborted = true;
      ac.abort();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(urls)]);
}

export class AudioManager {
  private static instance: AudioManager | undefined;
  ...
}

async preload(url: string): Promise<AudioBuffer> {
  if (this.bufferCache.has(url)) {
    return this.bufferCache.get(url)!;
  }
  if (this.loadingBuffers.has(url)) {
    return this.loadingBuffers.get(url)!;
  }

  const job = (async () => {
    const response = await fetch(url, { mode: 'cors' });
    if (!response.ok) {
      throw new Error(`Failed to fetch audio: ${url}`);
    }
    const arrayBuffer = await response.arrayBuffer();
    const audioBuffer = await this.ctx.decodeAudioData(arrayBuffer.slice(0));
    this.bufferCache.set(url, audioBuffer);
    this.loadingBuffers.delete(url);
    return audioBuffer;
  })().catch(error => {
    this.loadingBuffers.delete(url);
    console.error(error);
    throw error;
  });

  this.loadingBuffers.set(url, job);
  return job;
}

// assets = ["foo.cdn.com/1.png", "foo.cdn.com/2.webp", ..]
usePreloadAssets(assets, {});

const assetEntries = useAssetStore(useShallow(state => state.entries));
const total = assets.length;
const loaded = Array.from(assetEntries.values()).filter(
  entry => entry.status === "loaded"
).length;
const progressPercent = (loaded / total) * 100;

const { itemName, itemImageUrl } = item;
const getObjectUrl = useAssetStore(getObjectUrlSelector);

return <img alt={itemName} src={getObjectUrl(itemImageUrl)} />;