반응형 분류 전체보기47 브라우저에서 마이크 입력 파형 보기 재미삼아 브라우저에서 마이크 입력을 받아서 파형을 그려주는 페이지를 만들어보았다. 마이크 접근을 허용하였다면 아래에 내 마이크 소리의 파형이 보인다. 코드 분석 1. 마이크 입력 스트림 획득 async function getMedia() { try { stream = await navigator.mediaDevices.getUserMedia({audio: true}) createAudio() draw() } catch (err) { alert('UserMedia 접근 실패') } } getUserMedia() 를 호출하여 마이크 접근 권한을 획득하고 마이크 입력 스트림을 가져온다. 2. AudioContext 및 AnalyzerNode 생성 function createAudio() { audioCtx =.. 2023. 4. 8. Web Worker - 브라우저에서도 백그라운드 작업이 가능 자바스크립트는 단일 쓰레드로 동작한다. 그래서 브라우저에서 자바스크립트로 시간이 오래걸리는 코드를 만나게 되면 UI는 멈추게 된다. 브라우저에서 자바스크립트로 시간이 오래 걸리는 작업을 하고 싶은 경우에 Web Worker를 사용하면 된다. Web Worker는 별도의 쓰레드에서 동작하여 메인쓰레드에 영향을 주지 않게 작업을 할 수 있다. 시간이 오래걸리는 작업 코드 예제 아래 코드에서 0부터 1000000000까지 더하는 코드가 시간을 많이 걸리는 코드이다. 브라우저에서 페이지를 열면 한동안 페이지가 로딩중으로 멈춰있다가 덧셈 연산이 모두 끝나면 결과가 출력되면서 페이지가 동작을 하게 된다. 0 자바스크립트는 단일쓰레드이므로 덧셈연산이 끝나기 전까지 쓰레드를 독점하고 있으므로 UI도 출력이 될수가 없게.. 2023. 4. 8. Phaser 로 자바스크립트 게임 만들기 (지속 업데이트) Phaser를 이용하여 자바스크립트로 간단한 게임을 만들고 블로그에서 플레이 가능하도록 하였다. Phaser를 이용하여 어떻게 게임을 개발하는지를 설명하고, 이 포스팅에 개발과정과 결과물을 지속적으로 업데이트 해나갈 예정이다. 개발중인 게임은 아래에서 동작한다. Zoombie Shooter 게임 HTML 삽입 미리보기할 수 없는 소스 Phaser Phaser는 HTML5 Game Framework이다. Javascript를 이용하여 웹에서 구동되는 게임을 만들 수 있다. Canvas와 WebGL 모두 지원한다. Phaser와 Pixi.js 중에 고민하다가 Phaser가 아무래도 Framework을 표방해서 그런건지 Scene Manager 기능이 포함되어 있어서 Phaser를 선택하였다. 프로젝트 생성 .. 2023. 4. 2. 자바스크립트 숫자 카운팅 애니메이션 웹페이지에서 숫자가 그냥 나오는게 아니라 0부터 증가하면서 카운팅되는 효과를 본 적이 있을것이다. 이것은 어떻게 구현될까? HTML, CSS 만 사용해서는 할 수 없을까란 고민을 해봤지만 불가능해보였다. 자바스크립트를 활용할 수 밖에 없는것이다. 단순 자바스크립트 단순하게 자바스크립트를 활용한다면 setTimeout 함수를 이용하여 값을 증가시키면서 엘리먼트의 innerHTML 값만 바꾸어주면 된다. var counter = 0 function startCounter() { const e = document.querySelector('.text_box') counter ++ e.innerHTML = counter if (counter < 1000) { setTimeout(startCounter, 0) }.. 2023. 3. 30. 이전 1 ··· 5 6 7 8 9 10 11 12 다음 반응형
