728x90
자바스크립트에서 피아노 소리를 생성하거나 재생하는 방법은 여러 가지가 있습니다. 다음은 각 방법에 대한 설명입니다:
- Web Audio API를 사용하여 실시간으로 사운드를 생성
- MIDI 파일을 재생
- WAV 파일을 재생
- Third-party 라이브러리를 사용
1. Web Audio API를 사용하여 실시간으로 피아노 소리 생성하기
Web Audio API를 사용하면 자바스크립트에서 실시간으로 사운드를 생성하고 재생할 수 있습니다. 아래는 피아노 음계 소리를 생성하는 기본적인 예제입니다.
1.1. 피아노 음계 사인파 생성
<!DOCTYPE html>
<html>
<head>
<title>Piano Sound</title>
</head>
<body>
<button onclick="playPianoSound('C4')">Play C4</button>
<button onclick="playPianoSound('D4')">Play D4</button>
<script>
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
function playPianoSound(note) {
const frequencies = {
'C4': 261.63,
'D4': 293.66,
'E4': 329.63,
'F4': 349.23,
'G4': 392.00,
'A4': 440.00,
'B4': 493.88
};
const frequency = frequencies[note];
if (!frequency) {
console.error('Invalid note');
return;
}
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine'; // or 'square', 'triangle', 'sawtooth'
oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 1); // Play for 1 second
}
</script>
</body>
</html>2. MIDI 파일 재생하기
MIDI 파일을 재생하려면 자바스크립트와 함께 사용하는 라이브러리 또는 서비스를 이용해야 합니다. 자바스크립트에서 직접 MIDI 파일을 재생하기는 복잡할 수 있으며, @tonejs/midi와 같은 라이브러리를 사용할 수 있습니다.
2.1. @tonejs/midi 라이브러리 사용
- 라이브러리 설치:
npm install @tonejs/midi- MIDI 파일 재생 코드:
<!DOCTYPE html> <html> <head> <title>MIDI Playback</title> </head> <body> <input type="file" id="fileInput" /> <button onclick="playMidi()">Play MIDI</button> <script src="https://cdn.jsdelivr.net/npm/@tonejs/midi"></script> <script> let midiData; document.getElementById('fileInput').addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { Midi.fromArrayBuffer(e.target.result).then((midi) => { midiData = midi; }); }; reader.readAsArrayBuffer(file); } }); function playMidi() { if (!midiData) { console.error('No MIDI file loaded'); return; } const synth = new Tone.Sampler({ urls: { C4: 'path/to/C4.mp3', D4: 'path/to/D4.mp3', // add other notes as needed }, baseUrl: 'path/to/samples/', }).toDestination(); midiData.tracks.forEach(track => { track.notes.forEach(note => { synth.triggerAttackRelease(note.name, note.duration, note.time); }); }); } </script> </body> </html>
3. WAV 파일 재생하기
WAV 파일을 재생하려면 Audio 객체를 사용할 수 있습니다.
3.1. WAV 파일 재생 코드
<!DOCTYPE html>
<html>
<head>
<title>Play WAV File</title>
</head>
<body>
<button onclick="playWav('path/to/piano.wav')">Play WAV</button>
<script>
function playWav(filePath) {
const audio = new Audio(filePath);
audio.play();
}
</script>
</body>
</html>4. Third-party 라이브러리 사용하기
여러 서드파티 라이브러리가 자바스크립트에서 사운드를 재생하고 생성하는 데 도움을 줄 수 있습니다. 예를 들어:
- Tone.js: 오디오 합성 및 샘플링을 위한 강력한 라이브러리입니다.
- Howler.js: 사운드 효과와 오디오 관리를 위한 라이브러리입니다.
4.1. Tone.js 사용 예제
- Tone.js 설치:
npm install tone- Tone.js로 피아노 소리 생성:
<!DOCTYPE html> <html> <head> <title>Tone.js Example</title> <script src="https://cdn.jsdelivr.net/npm/tone"></script> </head> <body> <button onclick="playPiano()">Play Piano</button> <script> function playPiano() { const synth = new Tone.Synth().toDestination(); synth.triggerAttackRelease('C4', '8n'); } </script> </body> </html>
이 방법들을 통해 자바스크립트에서 피아노 소리를 생성하고 재생할 수 있습니다. 각 방법은 특정 요구 사항이나 환경에 따라 선택하여 사용할 수 있습니다.
728x90
반응형
'Software > JavaScript' 카테고리의 다른 글
| Javascript 시작하기 - 고차함수 (0) | 2024.08.02 |
|---|---|
| Javascript 시작하기 - 순수함수 (0) | 2024.08.02 |
| NodeJS 시작하기 - Google Cloud이미지를 저장 (0) | 2024.07.27 |
| Javascript 시작하기 - 사물 인식 (0) | 2024.07.27 |
| Javascript 시작하기 - 음성인식 (0) | 2024.07.26 |