js22 [자바스크립트] AudioBuffer, AudioBufferSourceNode 사용 방법 & 예제 코드 자바스크립트 Web Audio API는 "짧은 오디오 데이터"를 다룰 때 AudioBufferSourceNode 객체를 이용한다. 이 글에서는 AudioBufferSourceNode를 통해 1) 개발자가 생성한 오디오 데이터, 2) mp4, wav 등의 파일로 된 짧은 음원 등을 다루는 방법을 정리한다. 글의 가장 하단에는 각각에 대한 예제 코드를 정리해두었다. Web Audio API의 기초에 대해서는 아래 글을 참고하자. [자바스크립트] Web Audio API 기본 원리와 예제 코드 # AudioBufferSourceNode 란? AudioBufferSourceNode는 AudioBuffer를 음원으로 입력받는 소스Node 객체이다. 주로 45초 이내의 짧은 오디오를 단 1회 재생하는 용도로 사용된.. 2022. 1. 19. [자바스크립트] Oscillator Node 사용 방법 & 예제코드 자바스크립트 Web Audio API를 이용하면 다양한 소스의 음원을 다룰 수 있다. 이번 글에서는 개발자가 직접 소리를 만들 수 있는 Oscillator Node에 대한 기초 사용 방법을 정리한다. 구체적으로 아래와 같이 특정 파형/주파수의 소리를 만들어 낼 수 있다. (실제로 작동한다. 재생 버튼을 눌러보자. 코드 전문은 글 하단에 작성해두었다.) 2022. 1. 18. [자바스크립트] Web Audio API 기본 원리와 예제 코드 # Web Audio API란? Web Audio API란 오디오 데이터를 입력받아, 각종 처리 및 분석을 수행할 수 있게 해주는 API이다. Web Audio API에서 다룰 수 있는 소리 데이터는 아래의 4가지가 있다. 1) Oscillator: 주파수, 볼륨, 파형을 계산해 만들어내는 소리 2) AudioBuffer: 짧은 오디오 데이터 3) MediaElement: mp3, wav 등의 오디오 파일 4) MediaStream: 마이크 등을 통해 들어오는 스트림 객체 # Web Audio API가 필요한 이유? HTML에서 태그를 이용하면, 오디오를 재생/정지하고 볼륨을 조정할 수 있다. 물론 오디오의 재생위치를 조정하고, 재생완료 등의 이벤트 처리도 가능하다. 하지만 딱 거기까지다. 이게 끝이다... 2022. 1. 10. [자바스크립트] 캔버스(canvas) 화면 캡처/녹화 방법(+파일 저장 다운로드 구현) 자바스크립트는 태그의 화면을 캡처/녹화하는 방법을 제공한다. 예를 들어 캔버스에서 동작 중인 애니메이션을 녹화하여 동영상 등으로 저장할 수 있다. 작업 순서는 아래와 같다. # canvas 태그 화면 캡처/녹화 방법 1. canvas태그 화면 스트림 취득 : HTMLCanvasElement.captureStream()=>MediaStream 2. 취득한 스트림을 저장 : MediaRecorder, Blob 3. 저장한 스트림을 재생 OR 동영상 파일로 저장(다운로드) : BlobURL(ObjectURL) 먼저 canvas화면을 캡처하는 예제 코드 전문을 보고, 상세 설명을 정리한다. # canvas 캡처/녹화 방법 - 코드 전문 - 태그의 화면을 녹화하여 태그에서 재생하고, 동영상 파일로 다운로드 받는다.. 2021. 12. 12. [자바스크립트] audio/video 태그에서 재생 중인 소리/영상 녹음 방법 자바스크립트는 , 태그나 Audio, Video객체를 통해 재생 중인 오디오/비디오를 녹음/녹화하는 방법을 제공한다. audio나 video의 차이는 audio객체를 사용하느냐, video객체를 사용하느냐의 차이밖에 없다. # audio/video 녹음 방법 1. Audio/Video에서 재생 중인 스트림 취득: MediaStream 2. 재생 중인 스트림 녹음: MediaRecorder 3. 녹음된 스트림 재생: BlobURL(ObjectURL) MediaStream, MediaRecorder, Blob객체의 원리를 알고 있다면 아주 간단한 일이다. 자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack 자바스트립트 Media Strea.. 2021. 12. 11. [자바스크립트] 카메라 영상 녹화 방법 (+무음 비디오 촬영) 웹 브라우저 상에서 노트북이나 스마트폰의 전면/후면 카메라로 촬영하는 동영상을 녹음해야 하는 경우가 있다. 이 글은 별도 라이브러리 없이! 순수 자바스크립트만으로 카메라로 입력 받는 영상(비디오)를 녹화하는 방법을 정리한다. * 참고로 별도 라이브러리 없이 순수 자바스크립트만 사용하는 방식을 바닐라 자바스크립트(Vanilla Javascript)라고 한다. # 카메라 영상 녹화 순서 1. 카메라 영상 취득: MediaStream 2. 취득한 영상 저장: MediaRecorder 3. 녹화된 영상 재생: Blob, Video 옵션 설정에 따라 오디오 없이 비디오만 녹화하면 무음 영상 녹화도 가능하다. ▼이를 위해 사용되는 MediaStream, MediaRecorder, Blob 객체에 대해서는 아래글을 .. 2021. 12. 10. [자바스크립트] MediaStream 예제 코드: 마이크, 카메라, audio, video, canvas 이번 글은 자바스크립트의 Media Capture and Streams API이용해 아래의 MediaStream을 취득해서 동시 재생하는 예제 코드를 정리한다. 1. 마이크 소리 2. 카메라 영상 3. 태그에서 재생 중인 소리 4. 태그에서 재생 중인 영상 5. 화면 ▼MediaStream, MediaStreamTrack의 원리는 아래 글 참고▼ 자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack 1. 마이크 소리 - 마이크 MediaStream 취득 방법: navigator.mediaDevices.getUserMedia({audio: true}); 마이크로 입력되는 소리를 MediaStream으로 취득하고, 태그로 재생하는 예제 코드.. 2021. 12. 8. 자바스트립트 Media Stream Recording API: MediaRecorder Media Stream Recording API란 소리나 영상 등의 미디어 스트림을 녹음, 녹화하는 API이다. 이 글은 Media Stream Recording API에 대한 개념과 예제 코드를 정리한다. # Media Stream Recording API란? - Media Stream을 Recording 하는 API로 MediaRecorder객체 하나로 구성되어 있다. - 즉, MediaStream객체를 통해 입력 받는 소리, 영상, 화면 등을 MediaRecorder객체로 녹음 및 녹화하는 API이다. * 주의사항 - MediaRecorder 객체는 브라우저별 지원 여부 확인 필요(2021년 기준, Safari는 지원 안 되는 것으로 확인된다.) # MediaRecorder로 녹음 및 녹화할 수 있.. 2021. 12. 6. 자바스크립트 로드 script 태그: async/defer 비동기 속성 HTML에서 자바스크립트를 사용할 때 1. script태그 내부에 JS코드를 작성하거나, 2. script태그의 src속성을 통해 외부 JS파일을 불러온다. # 기존 JS 로드의 문제점 그런데 브라우저는 HTML, Javascript를 위에서 부터 순차적으로 파싱하는 관계로, HTML이 파싱되지 않은 상태에서 Javascript를 사용할 경우, HTML 엘리먼트를 참조하지 못하는 문제가 발생한다. HTML 입니다. # 기존의 JS 로드 문제 해결 방법 그래서 보통 2가지 방법을 사용했다. 1. body의 최하단에서 javascript 사용 : HTML이 모두 파싱된 다음 Javascript가 HTML태그를 사용한다. HTML 입니다. 2. window.onload 이벤트 리스너 등록 : window 로드.. 2021. 6. 30. 이전 1 2 3 다음
