不存在于型別'false|HTMLAudioElement'

在帶有使用 typescript 的鉤子的 React (Next.js) 中，我想創建對音頻的參考。我得到的錯誤是： -

Property 'duration' does not exist on type 'false | HTMLAudioElement'.
  Property 'duration' does not exist on type 'false'.ts(2339)

const audioRef = useRef(typeof Audio !== 'undefined' && new Audio(mp3Src));
  const { duration } = audioRef.current.duration;

我也試過這樣

  const audioRef = useRef(new Audio(mp3Src));
  const { duration } = audioRef.current;

然后在瀏覽器中引發錯誤

Server Error
ReferenceError: Audio is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

完整代碼

import type { NextPage } from 'next';
import React, { useRef, useState } from 'react';
import Image from 'next/image';

interface Props {
  imgSrc: string;
  mp3Src: string;
}

const AudioPlayer: NextPage<Props> = ({ imgSrc, mp3Src }) => {
  // const audioRef = useRef(new Audio(mp3Src));
  const audioRef = useRef(typeof Audio !== 'undefined' && new Audio(mp3Src));

  // const duration = audioRef.current.duration;
  const { duration } = audioRef.current;

  const intervalRef = useRef<any>();
  const [trackProgress, setTrackProgress] = useState<number>(0);
  const [isPlaying, setIsPlaying] = useState<boolean>(false);

  const play = (): void => {
    audioRef.current.play();
    startTimer();
    setIsPlaying(true);
  };

  const pause = (): void => {
    audioRef.current.pause();
    setIsPlaying(false);
  };

  const startTimer = (): void => {
    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setTrackProgress(audioRef.current.currentTime);
    }, 100);
  };

  const onScrub = (value: number): void => {
    // Clear any timers already running
    clearInterval(intervalRef.current);
    audioRef.current.currentTime = value;
    setTrackProgress(audioRef.current.currentTime);
  };

  const onScrubEnd = (): void => {
    if (!isPlaying) {
      setIsPlaying(true);
    }
    startTimer();
  };
  const mute = (): void => {
    audioRef.current.volume = 0;
  };
  return (
    <div className='AudioPlayer'>
      <Image alt='menu' src={imgSrc} width='30' height='20' />
      <div onClick={play}>Play</div>
      <div onClick={pause}>Pause</div>
      <div>{trackProgress}</div>
      <div>{isPlaying}</div>
      <input
        type='range'
        value={trackProgress}
        step='1'
        min='0'
        max={duration ? duration : `${duration}`}
        className='progress'
        onChange={(e): void => onScrub( e.target.value)}
        onm ouseUp={onScrubEnd}
        onKeyUp={onScrubEnd}
      />
      <div onClick={mute}>Mute</div>
    </div>
  );
};

export default AudioPlayer;

uj5u.com熱心網友回復：

NextJS 使用 Node 來渲染服務器中的任何內容，從而允許您構建靜態和服務器端渲染的應用程式。因此，Node.js 中不存在任何瀏覽器的 API，例如window或 在您的情況下。Audio

當 Next 嘗試在節點上運行以下代碼時，并且因為Audio不存在。它將評估為falsesince typeof Audiois undefined。

const audioRef = useRef(typeof Audio !== 'undefined' && new Audio(mp3Src));

為確保代碼僅在瀏覽器（而非 Node）上運行，您可以使用該useEffect鉤子。

例如

const AudioPlayer: NextPage<Props> = ({ imgSrc, mp3Src }) => {
  // const audioRef = useRef(new Audio(mp3Src));
  const [audioElem, setAudioElem] = useState<HTMLAudioElement>();

  useEffect(() => {
    if (typeof Audio !== 'undefined' && mp3Src) {
      const audio = new Audio(mp3Src);
      setAudioElem(audio);
    }
  }, [mp3Src])
  

  // const duration = audioRef.current.duration;
  const { duration } = audioElem || {};

...

一些有用的鏈接；

• https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97
• https://frontend-digest.com/why-is-window-not-defined-in-nextjs-44daf7b4604e

uj5u.com熱心網友回復：

您的代碼中有audioRef.current可能是錯誤的。

在閱讀之前檢查一下duration：

const audioRef = useRef(typeof Audio !== 'undefined' && new Audio(mp3Src));

if (audioRef.current) {
  const { duration } = audioRef.current;
}

標籤：

上一篇：如何在打字稿中獲取字串陣列中最常見的元素

下一篇：動態分配路由Node/Express