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.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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