[英]Player NextJS Typescript
我在构建时遇到问题,audioRef.current.play() 中的错误,它说没有播放,我试图放置一个接口但它不接受 boolean 值是否存在Ref有问题,有人可以帮我吗?
import { useEffect, useRef, useState } from "react";
import styles from "./styles.module.scss";
import { IoPauseCircleSharp, IoPlayCircleSharp } from "react-icons/io5";
export default function Player() {
const audioRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
function setPlayingState(state: boolean | ((prevState: boolean) => boolean)) {
setIsPlaying(state);
}
function toggleIsPlaying() {
setIsPlaying(!isPlaying);
}
useEffect(() => {
if (!audioRef.current) {
return;
}
if (isPlaying) {
audioRef.current.play();
} else {
audioRef.current.pause();
}
}, [isPlaying]);
return (
<div>
<div>
{isPlaying ? (
<button className={styles.pause} onClick={toggleIsPlaying}>
<IoPauseCircleSharp className={styles.hero} />
</button>
) : (
<button className={styles.player} onClick={toggleIsPlaying}>
<IoPlayCircleSharp className={styles.hero} />
</button>
)}
</div>
<audio
src="https://player-ssl.kshost.com.br:12462/live"
autoPlay={true}
ref={audioRef}
onPlay={() => setPlayingState(true)}
onPause={() => setPlayingState(false)}
/>
</div>
);
}
尝试使用
const audioRef = React.useRef<HTMLAudioElement>(null);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.