import { ChakraProvider, Button, Center, HStack, Stack, Box, VStack } from "@chakra-ui/react"; import React, { FC, PropsWithChildren, useEffect, useRef, useState } from "react"; const SoundReady: FC> = ({ children }) => { const [ready, setReady] = useState(false); const playReadySound = (onPlayEnd: () => void) => { const audioCtx = new window.AudioContext(); const oscillator = audioCtx.createOscillator(); oscillator.type = "triangle"; oscillator.frequency.setValueAtTime(0, audioCtx.currentTime); oscillator.connect(audioCtx.destination); oscillator.onended = () => { onPlayEnd(); }; oscillator.start(0); oscillator.stop(0); }; const onSetup = () => { playReadySound(() => { setReady(true); }); }; if (!ready) { return ; } return <>{children}; }; const SoundButton1 = () => { // pi po const onPress = () => { const audioCtx = new window.AudioContext(); const oscillator = audioCtx.createOscillator(); oscillator.type = "sine"; oscillator.frequency.setValueAtTime(1200, audioCtx.currentTime); oscillator.frequency.setValueAtTime(800, audioCtx.currentTime + 0.1); oscillator.connect(audioCtx.destination); oscillator.start(audioCtx.currentTime); oscillator.stop(audioCtx.currentTime + 0.2); }; return ( ); }; const SoundButton2 = () => { // pi pi const onPress = () => { const audioCtx = new window.AudioContext(); const nodes = [audioCtx.createOscillator(), audioCtx.createOscillator()]; const hz = 1700; nodes.map((node) => { node.type = "sine"; node.frequency.setValueAtTime(hz, audioCtx.currentTime); node.connect(audioCtx.destination); }); const length = 0.1; const rest = 0.025; nodes[0].start(audioCtx.currentTime); nodes[0].stop(audioCtx.currentTime + length); nodes[1].start(audioCtx.currentTime + length + rest); nodes[1].stop(audioCtx.currentTime + length * 2 + rest); }; return ( ); }; const SoundBoo = () => { const audioCtxRef = useRef(); const oscillatorRef = useRef(); useEffect(() => { audioCtxRef.current = new AudioContext(); }, []); const start = () => { if (!audioCtxRef.current || oscillatorRef.current) { return; } const audioCtx = audioCtxRef.current; const oscillator = audioCtx.createOscillator(); oscillator.type = "sawtooth"; oscillator.frequency.setValueAtTime(100, audioCtx.currentTime); oscillator.connect(audioCtx.destination); oscillatorRef.current = oscillator; oscillator.start(audioCtx.currentTime); }; const stop = () => { if (!audioCtxRef.current) { return; } oscillatorRef.current?.stop(audioCtxRef.current.currentTime); oscillatorRef.current?.disconnect(); oscillatorRef.current = undefined; }; return ( ); }; export default function App() { return ( 音量にご注意ください ); }