diff --git a/src/components/AudioOpener.tsx b/src/components/AudioOpener.tsx
index d6fc436..3557d3a 100644
--- a/src/components/AudioOpener.tsx
+++ b/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){
-			audio.pause()
-			audio.remove()
+		if(audio.current){
+			audio.current.volume = 0.1
 		}
-
-		audio = new Audio(genDownloadLink(props.file.id))
-		audio.volume = 0.1
-	},[props.file])
+	},[audio])
 
 	useEffect(()=>{
-		if(!props.active){
-			audio.pause
-			console.debug("Pause")
+		if (!props.active && audio.current){
+			audio.current.pause()
 		}
-		console.debug("active",props.active)
 	},[props.active])
 
 	return (
 		<div>
-			<button onClick={()=>{
-				if (audio){
-					(audio.paused && audio.play()) || audio.pause()
-				}
-			}}>
-				Play/Pause
-			</button>
+			<audio src={genDownloadLink(props.file.id)} controls ref={audio}></audio>
 		</div>
 	)
 }