자바스크립트 예제: 마이크 테스트

출처 바로가기 자바스크립트에서 마이크를 사용하려면 먼저 사용자로부터 마이크 사용 권한을 획득해야 합니다. 여기서 사용자가 허용 버튼을 눌러야 이후 녹음 작업이 진행이 됩니다. 이 부분은 navigator.mediaDevices.getUserMedia(constraints).then(…)을 사용합니다. if (navigator.mediaDevices) { const constraints = { audio: true } navigator.mediaDevices.getUserMedia(constraints) .then(stream => { …………….. }) .catch(err => { console.log(‘The following error occurred: ‘ 더보기…

자바스크립트: 캔버스로 원 그리기 + 원을 n등분하기

캔버스에 대한 기초 사용법은 모질라 web docs에서 볼 수 있습니다.   원 그리기 호(arc) 명령을 이용해서 원을 그릴 수 있습니다. arc(x, y, radius, startAngle, endAngle, anticlockwise) (x, y) 위치에 원점을 두면서, 반지름 r을 가지고,  startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값 false은 시계방향 회전) 호를 그리게 됩니다. 예제 코드를 살펴보겠습니다. HTML 기본 토대는 다음과 같습니다. <!DOCTYPE 더보기…

웹 사이트 예제: 음악 스케일 목록

웹사이트 바로가기 이 웹사이트의 기능은 다음과 같습니다. 스케일 목록을 데이터베이스에서 읽어서 테이블 형태로 나열 (PHP) 각 목록을 클릭하면 스케일의 정보와 악보, 소리듣기 기능을 제공 (abcjs 이용) 스케일의 정보는 이름, 별칭(Alias), 설명(Description), 중요도(Priority), 패턴이 있음 악보 및 사운드 생성은 스케일의 Pattern 정보를 이용하여 생성 (PHP 음악 스케일 구하기) 조옮김(Transpose), 이명동음 표시기능 더보기…

자바스크립트 + abcjs: 악보 출력, Synth 플레이어 삽입

abcjs.net 은 인터넷 브라우저에 악보를 출력하는 자바스크립트 라이브러리입니다. https://www.abcjs.net/abcjs_basic_5.9.1-min.js [다운로드] https://www.abcjs.net/abcjs-audio.css [다운로드] <!DOCTYPE HTML> <html> <head> <link href=”abcjs-audio.css” media=”all” rel=”stylesheet” type=”text/css” /> <script src=”abcjs_basic_5.9.1-min.js” type=”text/javascript”></script> </head> <body> <div id=”notation”></div> <div id=”audio”></div> <script type=”text/javascript”> ……… </script> </body> </html> var cooleys = ‘X:1\nT: Cooley\’s\nM: 4/4\nL: 1/8\nR: reel\nK: Emin\nD2|:”Em”EB{c}BA B2 EB|~B2 AB dBAG|”D”FDAD 더보기…

자바 예제: 특정 주파수의 소리 재생

특정 주파수의 음을 사인파(Sine Wave)로 재생하고 싶다면, javax.sound.sampled.* 라이브러리를 사용합니다. javax 시리즈는 자바에서 기본 제공됩니다.   1) new AudioFormat으로 새로운 오디오 형식 생성 public AudioFormat(float sampleRate:샘플수, int sampleSizeInBits:비트당샘플사이즈, int channels:채널수, boolean signed:부호여부, boolean bigEndian:빅엔디안여부)   2) 생성한 AudioFormat에서 소스 데이터 라인(Source Data Line)을 추출 후 SourceDataLine 자료형 변수에 저장 AudioFormat 더보기…

자바스크립트: 길찾기 1 (라이브러리 이용 – EasyStar.js)

길찾기 알고리즘에는 여러가지가 있는데 A* (A Star)라는 알고리즘이 많이 사용된다고 합니다. 라이브러리중에 EasyStar.js (https://www.easystarjs.com/) 라는게 있는데 이걸로 길찾기 알고리즘을 직접 구현하지 않고도 사용할 수 있습니다. window.onload = function() { var startPoint = {x:0, y:0} var endPoint = {x:4, y:0} // EasyStar.js 선언 var es = new EasyStar.js(); var map = 더보기…

자바스크립트: 인터넷에서 미디(MIDI) 파일을 바로 재생하는 라이브러리(http://www.midijs.net/) + 예제: 미디 플레이어

혹시 자바스크립트 라이브러리를 사용하지 않고 스프링 부트를 이용해 직접 미디를 mp3로 변환하는 방법을 찾고있다면 이 페이지를 방문해보세요. gist에서 예제 코드 보기 미디 플레이어 실행하기 PHP 기반으로 만든 미디 플레이어입니다. MIDI란 컴퓨터 음악을 위한 규격화된 포맷으로 미디 표준을 지켜 만든 음악 파일들은 미디 플레이어 등에서 실행할 수 있으며 오늘날 음악 제작에서 필수적으로 더보기…

MusicXML: 기초 악보 만들기

출처: https://www.musicxml.com/tutorial/hello-world/ MusicXML에서 가사가 “hello, world”인 노래는 실제로 간단한 MusicXML 파일보다는 복잡합니다. 우리는 (조건을) 더 단순하게 유지합시다. 중간 C의 전체 음을 포함하는 한 마디의 음악, 4/4 박자 기준 <?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?> <!DOCTYPE score-partwise PUBLIC “-//Recordare//DTD MusicXML 3.1 Partwise//EN” “http://www.musicxml.org/dtds/partwise.dtd”> <score-partwise version=”3.1″> <part-list> <score-part id=”P1″> <part-name>Music</part-name> </score-part> </part-list> <part id=”P1″> <measure 더보기…

OpenGL 기초 8: 텍스처(비트맵, 픽셀맵), 폴리곤 스티플, 텍스처 매핑, 축소된 서브셋(ES)

출처: http://soen.kr/lecture/library/opengl/opengl-10.htm 34. 텍스처: 비트맵 비트맵은 미리 만들어진 이미지를 의미하며 다양한 크기와 색상을 가질 수 있다. 그러나 OpenGL에서는 흑백 이미지만을 비트맵이라고 칭하며 컬러 이미지는 픽셀맵(Pixelmap)이라는 별도의 용어를 사용한다. bit가 용어가 원래 0과 1만을 의미하는 흑백적인 뜻이기 때문이라고 한다. OpenGL은 파일 입출력 기능을 제공하지 않으므로 파일이나 리소스로부터 비트맵을 생성하기 어렵다. 간단한 이미지라면 더보기…

OpenGL 기초 7: 조명, 재질, 법선

출처: http://soen.kr/lecture/library/opengl/opengl-9.htm 31. 조명 개요 OpenGL은 조명을 성격에 따라 다음 세가지로 분류한다. 주변광(Ambient) : 도처에 존재하는 빛이다. 광원에서 나온 빛이 여러 경로로 반사 및 재반사되어 방향성을 잃어버린 빛이다. 사방에서 물체의 모든 면에 골고루 비쳐지며 밝기도 일정하다. 분산광(Diffuse) : 한 방향으로 들어와서 물체의 표면에 반사되어 여러 방향으로 흩어지는 빛이다. 빛을 받는 부분이 더보기…