Skip to content

Instantly share code, notes, and snippets.

@landolabrum

landolabrum/index.html

Created August 5, 2023 13:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save landolabrum/a85ccbed05b8b0f3188e983f493ea6b8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save landolabrum/a85ccbed05b8b0f3188e983f493ea6b8 to your computer and use it in GitHub Desktop.
Download ZIP
React + styled-components starter template
Raw
index.html
<div id="app"></div>
Raw
react-styled-components-starter-template.markdown
Raw
script.babel
const { createRoot } = ReactDOM;
const { useState, useEffect } = React;
const { createGlobalStyle } = styled;
const GlobalStyle = createGlobalStyle`
html, body, #app {
height: 100%;
min-height: 100%;
background-color:#1818f8;
}
#app {
display: flex;
justify-content: center;
align-items: center;
}
`;
const App = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const StyledLabel = styled.p`
font-family: "Roboto Mono", monospace;
font-size: 20px;
`;
const Container = () => (
<App>
<GlobalStyle />
<StyledLabel>
</StyledLabel>
<KeyboardComponent/>
</App>
);
const root = createRoot(document.getElementById("app"));
root.render(<Container />);
const backgroundColor = '#181818';
const colorOne = '#0f0';
const colorTwo = '#e0e0e0';
const KeyboardComponent = () => {
const [pitch, setPitch] = useState(0);
const [audioContext, setAudioContext] = useState(null);
const [oscillator, setOscillator] = useState(null);
useEffect(() => {
const newAudioContext = new (window.AudioContext || window.webkitAudioContext)();
setAudioContext(newAudioContext);
const newOscillator = newAudioContext.createOscillator();
setOscillator(newOscillator);
return () => {
if (newOscillator.state === 'started') {
newOscillator.stop();
}
newOscillator.disconnect();
newAudioContext.close();
};
}, []);
const handlePitchChange = (event) => {
setPitch(event.target.value);
};
const handleKeyPress = (key) => {
console.log(`Key ${key} pressed, pitch: ${pitch}`);
// Play the tone based on the pitch using the Web Audio API
playTone(pitch);
};
const playTone = (frequency) => {
if (!oscillator) return;
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.1);
};
const keyboardKeys = ['A', 'S', 'D', 'F', 'G'];
return (
<div
style={{
backgroundColor,
color: colorTwo,
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
{keyboardKeys.map((key) => (
<button
key={key}
onMouseDown={() => handleKeyPress(key)}
onMouseUp={() => oscillator?.stop()} // Stop the tone when mouse is released
style={{ margin: '5px', padding: '10px 20px', backgroundColor, color: colorTwo, border: `2px solid ${colorOne}` }}
>
{key}
</button>
))}
</div>
<input
type="range"
min="0"
max="100"
value={pitch}
onChange={handlePitchChange}
style={{ width: '80%', backgroundColor, color: colorTwo }}
/>
<input
type="number"
min="0"
max="100"
value={pitch}
onChange={handlePitchChange}
style={{ width: '80%', backgroundColor, color: colorTwo }}
/>
</div>
);
};
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.0.0/umd/react-is.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.3.5/styled-components.min.js"></script>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment