Skip to content

Commit

Permalink
[Refactor] Launchpad
Browse files Browse the repository at this point in the history
  • Loading branch information
@eelkom
eelkom committed Aug 30, 2024
1 parent 55379cc commit 4ff3a96
Show file tree
Hide file tree
Showing 11 changed files with 44 additions and 94 deletions.
6 changes: 3 additions & 3 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,11 @@ <h1>Launch Pad</h1>
<div class="key" data-note="A">A(X)</div>
<div class="key" data-note="Gs">G#(C)</div>

<audio id="upE" src="audio/E.mp3"></audio>
<audio id="upE" src="audio/upE.mp3"></audio>
<audio id="E" src="audio/E.mp3"></audio>
<audio id="upDs" src="audio/Ds.mp3"></audio>
<audio id="upDs" src="audio/upDs.mp3"></audio>
<audio id="Ds" src="audio/Ds.mp3"></audio>
<audio id="upCs" src="audio/Cs.mp3"></audio>
<audio id="upCs" src="audio/upCs.mp3"></audio>
<audio id="Cs" src="audio/Cs.mp3"></audio>
<audio id="A" src="audio/A.mp3"></audio>
<audio id="Gs" src="audio/Gs.mp3"></audio>
Expand Down
Binary file modified audio/A.mp3
View file
Binary file not shown.
Binary file modified audio/Cs.mp3
View file
Binary file not shown.
Binary file modified audio/Ds.mp3
View file
Binary file not shown.
Binary file modified audio/E.mp3
View file
Binary file not shown.
Binary file modified audio/Gs.mp3
View file
Binary file not shown.
Binary file added audio/upCs.mp3
View file
Binary file not shown.
Binary file added audio/upDs.mp3
View file
Binary file not shown.
Binary file added audio/upE.mp3
View file
Binary file not shown.
20 changes: 10 additions & 10 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
yOffset = window.pageYOffset;
checkNav();
});
window.addEventListener('resize', adjustCoverflowWidth);
// window.addEventListener('resize', adjustCoverflowWidth);

function checkNav() {
if (yOffset > 0) {
Expand All @@ -29,18 +29,18 @@
}
}

function adjustCoverflowWidth() {
const mypageContainer = document.querySelector('.mypage-container');
const coverflowContainer = document.querySelector('.coverflow-container');
// function adjustCoverflowWidth() {
// const mypageContainer = document.querySelector('.mypage-container');
// const coverflowContainer = document.querySelector('.coverflow-container');

// mypage-container의 너비를 coverflow-container에 적용
const newWidth = mypageContainer.clientWidth;
coverflowContainer.style.width = `${newWidth}px`;
// initCoverFlow(container);
}
// // mypage-container의 너비를 coverflow-container에 적용
// const newWidth = mypageContainer.clientWidth;
// coverflowContainer.style.width = `${newWidth}px`;
// // initCoverFlow(container);
// }

window.onload = () => {
setFooter();
adjustCoverflowWidth();
// adjustCoverflowWidth();
};
})();
112 changes: 31 additions & 81 deletions js/webAudio.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
(() => {
/*
웹 오디오 API에서 발생하는 보안 정책 중 하나로, 사용자의 제스처에 의해 생성되거나 재개된 이후에만 AudioContext를 시작할 수 있도록 요구합니다.
보통 사용자 제스처는 사용자의 명시적인 동작(클릭, 터치 등)을 의미합니다.
이러한 보안 정책은 사용자 경험 및 개인 정보 보호를 위해 적용되고 있습니다.
따라서, AudioContext를 시작하기 전에 사용자의 명시적인 동작을 요구해야 합니다.
*/
let audioContextInitialized = false; // 오디오 컨텍스트 초기화 상태

function initAudioContext() {
document.removeEventListener('click', initAudioContext);
document.removeEventListener('touchstart', initAudioContext);
if (audioContextInitialized) return; // 이미 초기화되었으면 종료

// 1. 오디오 컨텍스트 생성
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
audioContextInitialized = true; // 초기화 상태 설정

// 피아노 키 요소 선택
const keys = Array.from(document.querySelectorAll('.key'));
Expand All @@ -21,108 +16,63 @@
key.addEventListener('mousedown', handleKeyEvent);
key.addEventListener('mouseup', handleKeyEvent);
key.addEventListener('mouseleave', handleKeyEvent);
key.addEventListener('touchstart', handleKeyEvent); // 터치 시작 이벤트 추가
key.addEventListener('touchend', handleKeyEvent); // 터치 끝 이벤트 추가
key.addEventListener('touchstart', handleKeyEvent);
key.addEventListener('touchend', handleKeyEvent);
key.addEventListener('touchmove', handleKeyEvent); // 터치 이동 이벤트 추가

// 키보드와 피아노 매핑을 위한 데이터 속성 추가
const keyMapping = getKeyMapping(index)
const keyMapping = getKeyMapping(index);
key.setAttribute('data-key', keyMapping);
});

window.addEventListener('keydown', handleKeyEvent);
window.addEventListener('keyup', handleKeyEvent);

// 키보드와 피아노 매핑을 위한 헬퍼 함수
function getKeyMapping(index) {
const keyMapping = ['q', 'w', 'a', 's', 'd', 'z', 'x', 'c']; // 예시: a부터 j까지의 키를 매핑
const keyMapping = ['q', 'w', 'a', 's', 'd', 'z', 'x', 'c']; // 예시 키보드 매핑
return keyMapping[index];
}

// 키보드 이벤트 및 마우스 이벤트 핸들러
function handleKeyEvent(event) {
const isKeyboardEvent = event.type === 'keydown' || event.type === 'keyup';
const key = isKeyboardEvent ? event.key.toLowerCase() : this.dataset.note;
const pianoKey = isKeyboardEvent ? document.querySelector(`[data-key="${key}"]`) : document.querySelector(`[data-note="${key}"]`);
// const pianoKey = document.getElementById(note);
const soundId = pianoKey ? pianoKey.dataset.note : null;
const sound = document.getElementById(soundId);

if (sound) {
const isPlaying = event.type === 'keydown' || event.type === 'mousedown' || event.type === 'touchstart';

if (isPlaying) {
playNoteByKey(sound);
}
// else {
// releaseNoteByKey(sound);
// }

if (pianoKey) {
if (isKeyboardEvent) {
if (event.type === 'keydown') {
// playNoteByKey(pianoKey.dataset.note);
playNoteByKey(pianoKey);
} else {
// releaseNoteByKey(pianoKey.dataset.note);
releaseNoteByKey(pianoKey);
}
} else {
if (event.type === 'mousedown') {
// playNoteByKey(this.dataset.note);
playNoteByKey(this);
} else {
// releaseNoteByKey(this.dataset.note);
releaseNoteByKey(this);
}
if (pianoKey) {
pianoKey.classList.toggle('active', isPlaying);
}
pianoKey.classList.toggle('active', event.type === 'keydown' || event.type === 'mousedown' || event.type === 'touchstart');
}
}

// 키에 해당하는 음 재생
function playNoteByKey(audioElement) {
audioElement.currentTime = 0; // 재생 시작 위치를 0으로 설정
audioElement.currentTime = 0.13; // 오디오를 처음부터 시작s
audioElement.play();

const stopDelay = 3000; // 소리를 정지할 시간 (밀리초 단위, 예: 2000ms = 2초)
setTimeout(() => {
releaseNoteByKey(audioElement);
}, stopDelay);
}

function releaseNoteByKey(audioElement) {
audioElement.pause(); // 오디오 재생 중지
audioElement.currentTime = 0; // 다음 재생을 위해 시작 위치로 초기화
audioElement.currentTime = 0.13; // 다음 재생을 위해 시작 위치로 초기화
}

// 키에 해당하는 음 재생
// function playNoteByKey(note) {
// const oscillator = audioContext.createOscillator();
// const gainNode = audioContext.createGain();

// oscillator.connect(gainNode);
// gainNode.connect(audioContext.destination);
// oscillator.frequency.value = getFrequency(note);
// oscillator.type = 'triangle';
// oscillator.start();

// gainNode.gain.setValueAtTime(1, audioContext.currentTime);

// // 끝 소리를 부드럽게 만들기 위해 볼륨을 서서히 줄입니다.
// const duration = 0.9; // 끝 소리를 재생할 시간 (초)
// const endTime = audioContext.currentTime + duration;
// const releaseTime = endTime - 0.1; // 끝 소리를 서서히 줄이기 시작할 시간 (0.1초 전)
// gainNode.gain.linearRampToValueAtTime(0, releaseTime);

// // 일정 시간 후에 오실레이터를 멈춥니다.
// oscillator.stop(endTime);
// }
// function releaseNoteByKey(note) {
// const activeKey = document.querySelector(`[data-note=${note}]`);
// if (activeKey) {
// activeKey.classList.remove('active');
// }
// }

// 음에 해당하는 주파수 가져오기
// function getFrequency(note) {
// const frequencies = {
// upE: 329.63 * 2,
// E: 329.63,
// upDs: 311.13 * 2,
// Ds: 311.13,
// upCs: 277.18 * 2,
// Cs: 277.18,
// Gs : 415.30,
// A: 440.00,
// };
// return frequencies[note];
// }
}

// 사용자 제스처에 의해 오디오 컨텍스트를 초기화
document.addEventListener('click', initAudioContext);
document.addEventListener('touchstart', initAudioContext); // 터치 이벤트 추가
})();
})();

0 comments on commit 4ff3a96

Please sign in to comment.