如何实时更新DOM Audio的静音属性

Question

我需要一些关于如何实时更新DOM音频的帮助。

我正在尝试根据用户偏好，使音频静音和取消静音

录制内容保存在公用文件夹中。

如果将静音设置为true或false，则音频在第一次加载时运行良好，然后当您尝试更改它时，静音道具不会更新。

这是我的代码的一个简短示例，我使用的是next.js.

import { RECORDING } from '@/constants/media.constant';
import { useEffect, useState } from 'react';
function Sample() {
const [mute, setMute] = useState(false);
useEffect(() => {
(() => playWithAudio())();
}, []);
const playWithAudio = () => {
const tryToPlay = setInterval(() => {
// audio recording, format mp3
const audio = new Audio(RECORDING.HELLO);
audio.loop = true;
audio.muted = mute;
audio
.play()
.then(() => {
clearInterval(tryToPlay);
})
.catch(() => console.info('User has not interacted with DOM yet.'));
}, 1000);
};
return (
<>
<button onClick={() => setMute(!mute)}>Click</button>
</>
);
}
export default Sample;

如有任何帮助，我们将不胜感激。

Answer 1

试试

import { useEffect, useState } from "react";
import { RECORDING } from "@/constants/media.constant";
function Sample() {
const [mute, setMute] = useState(false);
const [audio, setAudio] = useState(null);
useEffect(() => {
setAudio(new Audio(RECORDING.HELLO));
}, []);
useEffect(() => {
if (audio) playWithAudio();
}, [audio]);
const playWithAudio = () => {
const tryToPlay = setInterval(() => {
// audio recording, format mp3
audio.loop = true;
audio.muted = mute;

audio
.play()
.then(() => {
clearInterval(tryToPlay);
})
.catch(() => console.info("User has not interacted with DOM yet."));
}, 1000);
};
return (
<>
<button
onClick={() => {
if (audio) audio.muted = !mute;
setMute(!mute);
}}
>
{mute ? "UnMute" : "Mute"}
</button>
</>
);
}
export default Sample;