[JS] Web Audio API
·
STUDY/JavaScript
원본 출처 : https://curryyou.tistory.com/451 [자바스크립트] Web Audio API 기본 원리와 예제 코드 # Web Audio API란? Web Audio API란 오디오 데이터를 입력받아, 각종 처리 및 분석을 수행할 수 있게 해주는 API이다. Web Audio API에서 다룰 수 있는 소리 데이터는 아래의 4가지가 있다. 1) Oscillator: 주파수, curryyou.tistory.com 자바스크립트에서 미디어를 다루는 주요 API 4가지 1. Media Capture and Streams API (=Meida Stream API) - 마이크, 카메라 등을 이용해 들어오는 (Media Stream: 오디오, 비디오, 화면 등) 데이터를 다룬다. 2. MediaS..
[JS] Media Stream API
·
STUDY/JavaScript
원본 출처: https://curryyou.tistory.com/443 자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack # 자바스크립트에서 미디어를 다루는 방법 자바스크립트에서 미디어를 다루는 주요 API는 4가지가 있다. 1. Media Capture and Streams API (=Meida Stream API) - 마이크, 카메라 등을 이용해 들어오는 (Media Strea curryyou.tistory.com 자바스크립트에서 미디어를 다루는 주요 API 4가지 1. Media Capture and Streams API (=Meida Stream API) - 마이크, 카메라 등을 이용해 들어오는 (Media Stream: 오디..
[JS] audio 태그 제어하기
·
STUDY/JavaScript
audio 태그 태그는 음악이나 오디오 스트림과 같은 사운드를 정의할 때 사용합니다. 요소는 현재 MP3 , WAV, Ogg 세 가지 포맷의 파일을 지원하고 있습니다. audio 태그 속성 속성명 속성값 설명 autoplay autoplay 오디오가 실행될 준비가 끝나는 대로 자동으로 실행됨을 명시함. controls controls 플레이 버튼이나 정지 버튼과 같이 오디오의 실행을 제어할 수 있는 제어기가 표시됨을 명시함. loop loop 오디오의 재생이 끝나면 자동으로 또다시 재생됨을 명시함. muted muted 오디오의 음성 출력이 음소거됨을 명시함. preload auto metadata none 페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 명시함. src URL..
[JS] 정규표현식 공백 체크하기
·
STUDY/JavaScript
정규표현식 \s 를 이용하면 된다. 아래와 같이 체크가 가능하고, 응용하면 여러가지 다양한 방법으로 처리가 가능하다. 탭, 스페이스 엔터값을 체크할수 있다. var pattern = /\s/g; // 공백 체크 정규표현식 - 탭, 스페이스 // 공백 넣고 테스트 var str = 'space space'; // 공백없이 테스트 // var str = 'space'; if( str.match(pattern) ) { alert("공백이 존재합니다."); } else { alert("공백이 존재하지 않습니다."); } 출처 : https://youngram2.tistory.com/74
[JS] entries()메서드로 FormData 객체 데이터 조회하기
·
STUDY/JavaScript
Array.prototype.entries() entries() 메서드는 배열의 각 인덱스에 대한 key-value 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다. arr.entries(); FormData 객체에는 직접 데이터를 읽어들이는 기능이 없기 때문에, 이를 위해서는 FormData 객체에 포함된 entries() 메서드를 사용해야 합니다. const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] entries() 메서드를 사용해 FormData 조회하기 entries() 메서드는 FormData 객체에 저장된 키/값 쌍을 나타내..
[JS] FormData 설명 정리
·
STUDY/JavaScript
FormData FormData는 웹 브라우저에서 제공하는 JavaScript API로, HTML form을 통해 사용자로부터 입력받은 데이터를 쉽게 처리하고 전송할 수 있도록 도와줍니다. 이 API를 사용하면, JavaScript를 사용하여 새로운 form 데이터를 생성하거나, 이미 존재하는 form 데이터를 가져와서 수정할 수 있습니다. 이러한 form 데이터는 HTTP 요청을 통해 서버로 전송될 때 사용됩니다. FormData 객체는 append() 메서드를 사용하여 form 데이터의 각 항목을 추가할 수 있습니다. 이 메서드를 사용하면, key-value 쌍으로 이루어진 데이터를 form 데이터에 추가할 수 있습니다. 이때 key는 form 요소의 name 속성 값이 되며, value는 해당 fo..
[JS] 음악 및 오디오 플레이어 Javascript 라이브러리
·
STUDY/JavaScript
Amplitudejs https://github.com/serversideup/amplitudejs GitHub - serversideup/amplitudejs: AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you w AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required. - GitHub - serversideup/amplitudejs: AmplitudeJS: Open Source HTML5 Web A... github.com A..
[JS] Promise에 대해 알아보자
·
STUDY/JavaScript
보고 와야 할 이전글: 콜백 정리 포스팅 [JS] 동기비동기 · 콜백 이해하기 동기와 비동기차이 ⦁ 동기적(Synchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식 ⦁ 비동기적(Asynchronous) 어떤 작업을 요청했을 때 그 작업이 종 rebornbb.tistory.com Promise 개념 Promise란? 자바스크립트에서 제공하는 비동기를 간편하게 표현할수있는 object 비동기적인것을 수행할 때 콜백함수 대신에 유용하게 쓸 수 있는 object입니다. Promise는 정해진 장시간의 기능을 수행하고 나서, 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과값을 전달해줍니다. 만약 수행 중 예상치 못한 문제가 발생했다면 에러..