Gameboy: add audio control, but it doesn't work correctly

This commit is contained in:
Alex Gleason 2023-11-24 21:58:04 -06:00
parent 2696364710
commit 48db472af5
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7

View file

@ -19,6 +19,7 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
const canvas = useRef<HTMLCanvasElement>(null);
const [paused, setPaused] = useState(false);
const [muted, setMuted] = useState(true);
async function init() {
await WasmBoy.config(WasmBoyOptions, canvas.current!);
@ -52,6 +53,11 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
const togglePaused = () => paused ? play() : pause();
const unmute = async () => {
await WasmBoy.resumeAudioContext();
setMuted(false);
};
useEffect(() => {
init();
@ -75,12 +81,17 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
{...rest}
/>
<div className='absolute inset-x-0 bottom-0 w-full bg-gradient-to-t from-black/50 to-transparent px-4 py-2'>
<div className='absolute inset-x-0 bottom-0 flex w-full bg-gradient-to-t from-black/50 to-transparent p-2'>
<IconButton
className='text-white'
onClick={togglePaused}
src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')}
/>
<IconButton
className='text-white'
onClick={unmute}
src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')}
/>
</div>
</div>
);
@ -89,7 +100,7 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
const WasmBoyOptions = {
headless: false,
useGbcWhenOptional: true,
isAudioEnabled: false,
isAudioEnabled: true,
frameSkip: 1,
audioBatchProcessing: true,
timersBatchProcessing: false,