Euphony
Windows 웹브라우저에서 발생하는 글리치 사운드 제거 (euphony.js) #90
Replies: 12 comments 20 replies
-
|
기한이 갑자기 절반이나 줄었네요 ㅠ js에서도 Charset 관련 기여를 하는 게 맞을 것 같습니다 ㅠㅠ |
Beta Was this translation helpful? Give feedback.
-
|
정말 아쉽습니다ㅠㅠ 자료 감사합니다!! |
Beta Was this translation helpful? Give feedback.
-
|
오 저도 이슈를 하나 더 해결해보고 싶었는데, 한 번 같이 해결해 봅시다! |
Beta Was this translation helpful? Give feedback.
-
|
감사합니다 아래 샘플 코드도 올려두었습니다! 같이 정보 공유해봐요 😄 |
Beta Was this translation helpful? Give feedback.
-
|
😃👍 |
Beta Was this translation helpful? Give feedback.
-
|
주파수 출력 샘플 코드 공유합니다 오실레이터로 만드는 주파수는 정상적으로 출력되는 것 같습니다. euphony.js에서도 아래 코드와 마찬가지로 AudioContext를 사용하는 것으로 보이는데 어떤 부분에서 문제가 발생하는지는 더 살펴봐야할 것 같네요 ㅠ test.html <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title> demo </title>
<script src="test.js"></script>
</head>
<body>
<center>
<button class="play">시작</button>
<button class="mute" data-muted="false">mute</button>
<div class="freq">0</div>
</center>
</body>
</html>test.js window.onload = function () {
document.querySelector('.play')
.addEventListener('click', init);
}
let isAppInit = false;
const init = function () {
if (isAppInit) {
return;
}
// create web audio api context
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
// create Oscillator and gain node
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
// connect oscillator to gain node to speakers
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
// create initial theremin frequency and volume values
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
const maxFreq = 20000;
const initialVol = 0.015;
// set options for the oscillator
oscillator.detune.value = 100; // value in cents
oscillator.start(0);
oscillator.onended = function () {
console.log('Your tone has now stopped playing!');
};
gainNode.gain.value = initialVol;
gainNode.gain.minValue = initialVol;
gainNode.gain.maxValue = initialVol;
const mute = document.querySelector('.mute');
mute.onclick = function () {
if (mute.getAttribute('data-muted') === 'false') {
gainNode.disconnect(audioCtx.destination);
mute.setAttribute('data-muted', 'true');
mute.innerHTML = "Unmute";
} else {
gainNode.connect(audioCtx.destination);
mute.setAttribute('data-muted', 'false');
mute.innerHTML = "Mute";
};
}
document.onmousemove = updatePage;
const freq = document.querySelector('.freq');
function updatePage(e) {
KeyFlag = false;
CurX = e.pageX;
CurY = e.pageY;
oscillator.frequency.value = (CurX / WIDTH) * maxFreq;
freq.textContent = Math.round(oscillator.frequency.value);
}
isAppInit = true;
} |
Beta Was this translation helpful? Give feedback.
-
|
코드 해석해봐야겠네요!! 수고하셨습니다 ㅎㅎ |
Beta Was this translation helpful? Give feedback.
-
|
@kuro11pow2 |
Beta Was this translation helpful? Give feedback.
-
|
참고로 주로 사용되는 Samplerate는 44100과 48000이 있습니다 :) 혹시 샘플레이트에 대해서 한번 정리해서 discussion 올려주실 분 있나요? |
Beta Was this translation helpful? Give feedback.
-
|
페이지 새로고침하고 다시 시도해도 |
Beta Was this translation helpful? Give feedback.
-
|
아하 알아냈습니다!! 아래처럼 사용자 환경의 samplerate를 가져오면 됩니다! function euphony() {
...
this.context = new (window.AudioContext || window.webkitAudioContext)();
this.SAMPLERATE = this.context.sampleRate;
...
};추가적으로 알아낸 부분이 몇 가지 있습니다.
제 경우에는 가상 오디오 인터페이스를 사용중이었는데 이 친구가 자기 마음대로 샘플레이트를 바꿔버리고 있더라구요 |
Beta Was this translation helpful? Give feedback.
-
제 경우에는 가상 오디오 인터페이스가 문제였던 것 같습니다 |
Beta Was this translation helpful? Give feedback.
-
|
+1 |
Beta Was this translation helpful? Give feedback.
-
|
엄청나네요.. 대단하십니다👍👍 |
Beta Was this translation helpful? Give feedback.
-
|
스피커 속성에서 Sample rate(샘플 속도)를 44100Hz, 48000Hz로 설정했을때 스피커 Sample rate 설정법
|
Beta Was this translation helpful? Give feedback.
-
|
이번에는 반대로 48000Hz에서는 글리치 사운드가 나지 않고, 44100Hz에서는 발생하는 현상을 확인했습니다!
|
Beta Was this translation helpful? Give feedback.
-
|
와우 정리 감사합니다!! |
Beta Was this translation helpful? Give feedback.
-
|
매일매일 새로운게 업데이트 되네요...다들 정말 대단하십니다 👍 |
Beta Was this translation helpful? Give feedback.
-
|
:) |
Beta Was this translation helpful? Give feedback.
-
|
코멘트들만 쭉 읽어봐도 큰 공부가 될 것 같아요. 감사합니다!! :) |
Beta Was this translation helpful? Give feedback.
-
|
어제 알아보다가 오늘 아침부터 수업이 있어서 일찍 잤는데 일어나 보니 하루도 안되서 진도가 엄청 나가있네요 ㅋㅋㅋㅋㅋㅋㅋㅋ |
Beta Was this translation helpful? Give feedback.
-
|
저는 맥북과 윈도우로 모든 인터넷 브라우저에서 "123123"을 갖고 http://localhost:8080/demo/ 와 Euphony Listener 으로 확인을 해봤습니다.
맥북의 사파리를 제외하고는 다 정상적으로 작동 했지만 삐리리- 소리는 계속해서 들렸고 윈도우의 경우는 추가적으로 지지직하는 잡음도 들렸습니다. 무시할만한 잡음이긴 했지만 맥북하고 바로 비교했을 때는 잡음이 들린다는 것을 확실히 알 수 있을 정도였습니다.
@ycs1m1yk @kuro11pow2 준규님, 혜성님 말씀대로 euphony.js에서 SAMPLERATE을 변경한 뒤에 시도 해봤을 때는 잡음이 확실히 잡히고 소리도 더 커졌습니다! 두 분 정말 고생하셨습니다. 감사합니다! |
Beta Was this translation helpful? Give feedback.
-
|
다양한 브라우저 환경에서 테스트 감사합니다! |
Beta Was this translation helpful? Give feedback.
-
|
@YoungSeokHong |
Beta Was this translation helpful? Give feedback.
-
|
와우 수고많으셨습니다~! |
Beta Was this translation helpful? Give feedback.
-
|
고생 많으셨습니다!!!🎉🎉 |
Beta Was this translation helpful? Give feedback.
-
|
저도 계속 방법 찾아볼게요 !!! 도움이 많이 되었습니다!😀😀😀👍👍👍 |
Beta Was this translation helpful? Give feedback.
-
|
감사합니다ㅎㅎ 😄 |
Beta Was this translation helpful? Give feedback.
-
|
매우매우 잘하고 계십니당 ^^ 정리하셔서 PR로 기여해주시지요 |
Beta Was this translation helpful? Give feedback.
-
|
넵 정리해서 PR 올리겠습니다! 👍 |
Beta Was this translation helpful? Give feedback.
-
euphony.js
문제: Windows 환경의 웹브라우저에서 발생하는 글리치 사운드 = 삐리리리 소리 (원래 안 들림)
재현: 소개 사이트에서 demo > broadcast 로 확인하실 수 있습니다.
맥북에서는 발생하지 않는 현상이라고 합니다. 왜 윈도우즈에서만 생길까요?
테스트 결과 출력 장치의 종류와 무관하게 발생하는 것으로 보입니다.
(내장 스피커, 유선 스피커, 블루투스 스피커, 블루투스 이어폰에서 모두 발생)
https://github.com/euphony-io/euphony.js/blob/master/euphony.js#L23-L30
주파수가 BASE_FREQUENCY + n * SPAN 꼴로 설정되는 것으로 보입니다.
18000이면 확실히 거의 들리지 않아야 할 대역인데 너무 잘 들리네요
Beta Was this translation helpful? Give feedback.
All reactions