미디어아트: Processing, 멀티미디어 처리 등
노트 프로그래밍 방식으로 선택 먼저 ABCJS.renderAbc의 옵션 파라미터에서 add_classes가 true여야 합니다. (아래 노트 클릭(선택) 방지하기 단락의 코드 참조) add_classes: true, 추가하였다면 아래 클래스 목록을 참고하여 abcjs-[클래스이름] 의 HTML DOM에 abcjs-highlight 클래스를 추가하면 됩니다. (태그 이름은 <g>) 예를 들어 악보에서 네 번째 노트의 클래스 이름은 abcjs-n3 입니다. 0부터 시작(zero-based)이므로 더보기…
원문 A crash course on the standard MIDI specification 바이트 레벨에서 분석한 표준 미디(Standard MIDI) 사양 및 구조 이 가이드는 (바이트 수준에서) 원시(raw) MIDI 데이터 프로그래밍 및 조작에 대한 집중 매뉴얼입니다. 완전하지는 않지만 MIDI(SMF) 형식의 구조와 일부 주요 명령에 집중하므로 기본 사항을 매우 빠르게 배우는 데 도움이 될 것입니다! 더보기…
출처 바로가기 자바스크립트에서 마이크를 사용하려면 먼저 사용자로부터 마이크 사용 권한을 획득해야 합니다. 여기서 사용자가 허용 버튼을 눌러야 이후 녹음 작업이 진행이 됩니다. 이 부분은 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: ‘ 더보기…
캔버스에 대한 기초 사용법은 모질라 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.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 더보기…
길찾기 알고리즘에는 여러가지가 있는데 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 = 더보기…
혹시 자바스크립트 라이브러리를 사용하지 않고 스프링 부트를 이용해 직접 미디를 mp3로 변환하는 방법을 찾고있다면 이 페이지를 방문해보세요. gist에서 예제 코드 보기 미디 플레이어 실행하기 PHP 기반으로 만든 미디 플레이어입니다. MIDI란 컴퓨터 음악을 위한 규격화된 포맷으로 미디 표준을 지켜 만든 음악 파일들은 미디 플레이어 등에서 실행할 수 있으며 오늘날 음악 제작에서 필수적으로 더보기…
출처: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene 이 섹션의 목적은 three.js에 대한 간략한 소개입니다. 회전 큐브를 사용하여 장면을 설정하는 것으로 시작하겠습니다. 시작하기 전에 three.js를 사용하려면 먼저 어딘가에 표시해야합니다. 다음 HTML을 js/ 디렉토리에 있는 three.js 사본과 함께 컴퓨터의 파일에 저장하고 브라우저에서 엽니다. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; 더보기…