从 chrome 录制时，音频录制不会在 safari 中播放

Question

问题是，当我从 Safari 中录制音频时，它在 Safari 中播放得很好，而当在 chrome 中录制音频时，它在 chrome 中播放得很好 但是当我在 chrome 中录制音频并在 safari 中播放时，它会播放整个音频，一旦进度条立即播放整个音频，但听不到任何声音。 当我在 Safari 中录制音频时，它在 chrome 中播放得很好

我正在使用react-media-recorder-2来录制

这是录音机的代码

sexport const AudioBarPlayer = forwardRef<IAudioBarRef, AudioBarProps>((props: AudioBarProps, ref) =>
{
  const src = props.src;
  const scrollable = props.scrollable;
  const onChangeDuration = props.onChangeDuration;
  const onStopPlaying = props.onStopPlaying;
  const onStartPlaying = props.onStartPlaying;
  const cursorColor = props.cursorColor;
  const progressColor = props.progressColor;
  const waveColor = props.waveColor;
  const audioElementRef = useRef(new Audio());
  const containerRef = useRef<HTMLDivElement>(null);
  const waveSurferRef = useRef<WaveSurfer>();
  audioElementRef.current.controls = true;

  useEffect(() =>
  {
    waveSurferRef.current = WaveSurfer.create({
      cursorColor: cursorColor,
      progressColor: progressColor,
      // @ts-ignore
      container: containerRef.current,
      barWidth: 2,
      barRadius: 1,
      barGap: 3,
      waveColor: waveColor,
      cursorWidth: 2,
      height: 30,
      barHeight: scrollable ? 3 : 1,
      hideScrollbar: true,
      media: audioElementRef.current,
      duration: props.durationMs && (props.durationMs / 1000)
    });

    return () =>
    {
      waveSurferRef.current?.destroy();
    };
  }, []);

  useEffect(() =>
  {
    if(src)
    {
      waveSurferRef.current?.load(src).then(() =>
      {
        if(waveSurferRef.current)
        {
          onChangeDuration(props.durationMs
            ? (props.durationMs / 1000)
            : parseInt(waveSurferRef.current.getDuration().toString()));
        }
        waveSurferRef.current?.on("seeking", (args) =>
        {
          onChangeDuration(parseInt(args.toString()));
        });
        waveSurferRef.current?.on("finish", () =>
        {
          waveSurferRef.current?.seekTo(0);
          onStopPlaying();
          onChangeDuration(undefined);
        });
        waveSurferRef.current?.on("audioprocess", (args) =>
        {
          onChangeDuration(parseInt(args.toString()));
        });
        waveSurferRef.current?.on("play", () => onStartPlaying(waveSurferRef.current?.getCurrentTime() || 0));
        waveSurferRef.current?.on("pause", onStopPlaying);
        waveSurferRef.current?.on("destroy", onStopPlaying);
      });
    }
  }, [src]);

  useImperativeHandle(ref, () =>
  {
    return {
      play: () => waveSurferRef.current?.play().catch(() =>
      {
        if(src)
        {
          axios.get(src, {
              responseType: "blob"
            }
          ).then((response) =>
          {
            const blob = new Blob([response.data], {type: "audio/mp3; codecs=opus"});
            console.log("===response.data", response.data);
            waveSurferRef.current?.loadBlob(blob).then(() => waveSurferRef.current?.play());
          });
        }
      }),
      pause: () => waveSurferRef.current?.pause()
    };
  }, [waveSurferRef.current]);

  return (
    <div
      id="AudioBar"
      style={{
        width: "100%"
      }}
      ref={containerRef}
    />
  );
});

我希望当我在 chrome 中录制它时，它也应该在 safari 中播放`

Answer 1

您无法从不同的浏览器捕获音频，因为在 MacOS 上，如果不进行一些“黑客攻击”，您就无法捕获系统音频（基本上实现您自己的音频驱动程序，这就是我们在 Electron 应用程序中所做的）。

Electron 文档提到它：https://www.electronjs.org/docs/latest/api/desktop-capturer#caveats