improved audio opener

src/components/AudioOpener.tsx

@@ -5,35 +5,23 @@ import { FileOpenerProps } from "../types/FileOpenerProps"
 
 const AudioOpener: React.FC<FileOpenerProps> = (props) => {
 
-	let audio: HTMLAudioElement
+	const audio = React.createRef<HTMLAudioElement>()
 
 	useEffect(()=>{
-		if (audio){
+		if(audio.current){
-			audio.pause()
+			audio.current.volume = 0.1
-			audio.remove()
 		}
-
+	},[audio])
-		audio = new Audio(genDownloadLink(props.file.id))
-		audio.volume = 0.1
-	},[props.file])
 
 	useEffect(()=>{
-		if(!props.active){
+		if (!props.active && audio.current){
-			audio.pause
+			audio.current.pause()
-			console.debug("Pause")
 		}
-		console.debug("active",props.active)
 	},[props.active])
 
 	return (
 		<div>
-			<button onClick={()=>{
+			<audio src={genDownloadLink(props.file.id)} controls ref={audio}></audio>
-				if (audio){
-					(audio.paused && audio.play()) || audio.pause()
-				}
-			}}>
-				Play/Pause
-			</button>
 		</div>
 	)
 }