Sonorous.js는 웹 오디오 작업을 간소화하여 웹 앱 및 게임에 쉽게 오디오를 통합할 수 있는 JavaScript 오디오 라이브러리입니다. WebAudio API에 대한 추상화로서 Sonorous.js는 필요한 사용자에게 세밀한 제어 기능을 제공하는 동시에 브라우저 간 문제를 처리합니다.
팀에서
붐박스
트랙 믹서
스트링 마스터
소스 코드는 저장소의 examples/
디렉터리를 참조하세요.
시작하려면 npm install --save sonorous
실행하세요.
Sonorous.js를 사용하려면 이를 요구하거나 파일로 가져오십시오.
ES6
import Sonorous from 'sonorous';
커먼JS
const Sonorous = require('sonorous');
Sonorous는 Sonor의 추가 및 제거를 처리하는 관리자입니다. Sonor는 하나의 오디오 파일에 대한 래퍼로 생각할 수 있습니다. 각 소너에는 play()
, pause()
, volume
등과 같은 고유한 기능이 있습니다. Sonorous 인스턴스를 통해 모든 소너에 전역 속성( masterVolume
, muteAll
등)을 설정할 수도 있습니다.
예:
let mySonor = Sonorous.addSonor('./test_audio/test_sound_1.mp3');
mySonor.play(); // begins to play test_sound_1.mp3
mySonor.volume = 0.5; // sets the volume of the sonor to 0.5
Sonorous.muteAll = true; // mutes all sonors
mySonor.stop(); // stops the playback of test_sound_1.mp3
자세한 내용은 API 섹션을 참조하세요.
Sonorous는 싱글톤이며 모든 Sonor 객체를 관리합니다.
Sonor[]
(읽기 전용)이 관리자에 추가된 모든 Sonor 객체의 배열입니다.
AudioContext
(읽기 전용)Sonorous에서 사용하는 현재 오디오 컨텍스트를 반환합니다.
number
이는 읽기/쓰기 속성이며 모든 Sonor 개체의 볼륨을 설정하는 masterGain 노드에 연결됩니다. 유효한 값은 0에서 1 사이입니다.
boolean
이는 모든 Sonor 객체를 음소거/음소거 해제하는 읽기/쓰기 속성입니다.
boolean
WebAudio가 지원되면 true를 반환하고 그렇지 않으면 false를 반환합니다.
Sonor
Sonor 객체를 생성하고 성공하면 이를 반환합니다.
파람 | 유형 | 설명 |
---|---|---|
소스 | string , string[] , SonorSrc , SonorSrc[] | 이 사운드와 연결된 미디어입니다. 다양한 형식의 배열을 전달하면 현재 브라우저에서 작동하는 첫 번째 형식이 사용됩니다. 소스 URL에 확장자가 없는 경우 아래 정의된 SonorSrc 개체를 사용하여 수동으로 지정할 수 있습니다. |
옵션 | object | 선택적 구성 개체입니다. 아래 옵션을 참조하세요. |
addSonor()
구성 옵션:
옵션 | 유형 | 기본 | 설명 |
---|---|---|---|
ID | string | 무작위로 생성됨 | 고유 ID입니다. 전달하지 않으면 이 객체에 대해 하나가 생성됩니다. |
예압 | boolean | true | true인 경우 자동으로 URL 로드를 시도합니다. false인 경우 호출 코드는 load() 명시적으로 호출해야 합니다. |
용량 | number | 1.0 | 사운드의 초기 볼륨입니다. |
고리 | boolean | false | 오디오가 영원히 반복되어야 하는지 결정합니다. |
자동재생 | boolean | false | 로드 시 오디오가 즉시 재생되어야 하는지 결정합니다. |
음소거 | boolean | false | 로드되면 음소거합니다. |
풀크기 | number | 1 | 재생할 수 있는 총 오디오 세그먼트 수입니다. 이 숫자를 늘리면 초기 재생이 완료되기 전에 동일한 사운드를 여러 번 동시에 재생할 수 있습니다. |
최적화를 위해 | string | 'time' | 'time' 또는 'memory' 일 수 있습니다. 이는 디코딩된 버퍼가 캐시될지 여부를 결정합니다. 기본적으로는 그렇습니다. 메모리가 문제인 경우 이를 'memory'로 설정하고 재생이 시작되기 전에 버퍼를 디코딩하는 동안 약간의 지연이 예상됩니다. |
재산 | 유형 | 설명 |
---|---|---|
URL | string | 확장자가 없는 오디오의 소스 URL입니다. |
체재 | string | 이 오디오 소스에 대해 수동으로 지정된 형식입니다. |
예:
let mySonor = Sonorous.addSonor('./test_audio/test_sound_1.mp3', {
id: 'myFirstSonor',
preload: false,
volume: 0.5,
poolSize: 3 });
let testSoundSonor = Sonorous.addSonor(
{
url: './test_audio/test_sound_2',
format: 'mp3'
},
{ id: 'test_sound_2'});
관리자에서 Sonor 개체를 제거합니다. 이렇게 하면 사운드가 언로드 및 파괴되고 이 사운드와 관련된 모든 프로세스가 즉시 중지됩니다.
기존 Sonor 개체를 제거하고 오디오 컨텍스트를 재설정합니다.
모든 Sonor 개체를 파괴합니다.
Sonor
Sonor 객체를 반환합니다.
예:
Sonorous.addSonor('./test_audio/test_sound_1.mp3', { id: 'mySonorId'});
let mySonor = Sonorous.get('mySonorId');
boolean
Sonorous에 전달된 ID와 일치하는 Sonor가 있으면 true를 반환합니다.
오디오가 잠금 해제되면(페이지와의 사용자 상호 작용을 통해) 트리거됩니다. 일부 브라우저에서는 사용자가 어떤 방식으로든 페이지와 상호작용하기 전에는 오디오 재생을 허용하지 않습니다. 이 이벤트는 오디오 재생이 가능해지면 트리거됩니다.
이 모듈에는 볼륨 조정, 재생, 일시 중지 등을 포함하여 사운드 제어를 위한 대부분의 기능이 포함되어 있습니다. AudioContext가 잠금 해제되지 않은 경우(사용자 동작 등을 통해) 모든 작업이 대기열로 이동합니다. 이러한 작업은 AudioContext가 잠금 해제되고 버퍼가 로드되자마자 즉시 실행됩니다.
string
(읽기 전용) 이 사운드 객체의 고유 ID를 반환하는 읽기 전용 속성입니다. ID는 초기화 중에 선택적으로 제공됩니다(자세한 내용은 Sonorous의 addSonor() 참조). 초기화 시 ID가 제공되지 않으면 무작위로 생성된 영숫자 문자열이 ID로 할당됩니다. Sonorous는 Sonorous.get(id)
함수를 사용하여 ID별로 Sonor 객체를 검색할 수 있습니다.
string
(읽기 전용)이 객체의 소스 오디오에 대한 URL을 반환합니다.
boolean
(읽기 전용)초기화 중에 초음파 장치가 사전 로드되도록 설정된 경우 true를 반환합니다.
string
(읽기 전용) 소너의 로드된 상태를 반영합니다. 'loading'
, 'loaded'
또는 'unloaded'
일 수 있습니다.
예:
let mySonor = Sonorous.addSonor('./test_audio/test_sound_1.mp3', { preload: false });
console.log(mySonor.state); // prints out 'unloaded'
mySonor.load();
console.log(mySonor.state); // prints out 'loading'
number
(읽기 전용)초음파의 지속 시간을 반환합니다. 이 값은 소너가 로드된 경우에만 사용할 수 있습니다. 소너가 언로드되면 0이 반환됩니다.
boolean
(읽기 전용)사운드가 현재 재생 중이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
number
(읽기 전용)사운드가 얼마나 멀리 재생되었는지를 반환합니다. poolSize > 1인 경우 첫 번째 활성 오디오 세그먼트가 이 값을 반환하는 데 사용됩니다.
number
풀의 총 오디오 세그먼트 수를 제어하는 읽기/쓰기 공용 속성입니다. 동일한 사운드를 동시에 재생하려면 풀 크기를 늘리십시오. 기본값은 1입니다.
풀 크기가 증가하면 setter/getter는 다음과 같이 작동합니다. 모든 setter는 모든 활성 세그먼트에 적용됩니다. 모든 getter는 첫 번째 활성 오디오 세그먼트를 사용하여 요청된 정보를 반환합니다. ("활성 세그먼트"는 이미 풀에서 가져와서 현재 사용 중인 세그먼트입니다.)
예:
let mySonor = Sonorous.addSonor('./test_audio/test_sound_1.mp3');
mySonor.poolSize = 2;
mySonor.play();
setTimeout(() => { mySonor.play(); }, 1000); // will result in the same audio being played twice, with the second playback 1s behind the first one.
number
이 사운드의 재생 속도를 제어하는 읽기/쓰기 공용 속성입니다. poolSize > 1인 경우 첫 번째 활성 오디오 세그먼트가 이 값을 반환하는 데 사용됩니다.
boolean
사운드가 반복되는지 여부를 제어하는 읽기/쓰기 공용 속성입니다. 이 속성을 설정하면 모든 활성 세그먼트에 적용됩니다.
number
이 사운드의 볼륨을 제어하는 읽기/쓰기 공용 속성입니다. 이 속성을 설정하면 모든 활성 세그먼트에 적용됩니다.
boolean
사운드의 음소거 여부를 제어하는 읽기/쓰기 공용 속성입니다. 이 속성을 설정하면 모든 활성 세그먼트에 적용됩니다.
오디오 소스를 재생합니다. 소너가 로드되지 않은 경우 소너를 로드하고 로드된 후 재생합니다. 오디오 세그먼트 풀이 1보다 크면 필요에 따라 풀에서 세그먼트를 가져옵니다. "활성 세그먼트"는 이미 풀에서 가져와서 현재 사용 중인 세그먼트입니다. 플레이의 논리는 다음과 같습니다.
if there are no active segments:
retrieve one from the pool and play it.
if there are active segments:
if none are currently playing:
play all active segments
else:
retrieve/play a segment from the pool
if there are no available segments in the pool:
do nothing and report an error
모든 활성 오디오 세그먼트를 일시 중지하지만 풀로 반환하지는 않습니다.
모든 활성 오디오 세그먼트를 중지하고 풀로 반환합니다.
제공된 페이드 지속 시간 동안 오디오를 현재 볼륨에서 targetVolume으로 페이드합니다. startTime이 제공되고 audioContext의 현재 시간보다 크면 해당 지점에서 페이드가 시작됩니다. 그렇지 않으면 즉시 시작됩니다. 페이드 지속 시간은 초 단위여야 합니다.
재생을 전달된 시간(초 단위)으로 이동합니다.
버퍼를 로드하고 재생할 오디오 세그먼트를 준비합니다.
버퍼를 제거하고 모든 활성 오디오 세그먼트를 풀로 반환합니다.
Sonor 객체는 이벤트 방출자(켜기/끄기/한 번)입니다. 아래에서 사용 가능한 이벤트 목록을 확인하세요.
사운드가 로드되면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
플레이가 시작되면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
소리가 일시중지되면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
사운드 재생이 중지되면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
사운드가 지속 시간의 끝에 도달하면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
currentTime이 수동으로 변경되면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
탐색 위치 | 숫자 | Sonor가 추구한 타임코드 |
사운드 볼륨이 변경되면(볼륨 또는 음소거를 통해) 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
새로운볼륨 | 숫자 | Sonor가 설정된 새 볼륨 |
재생 속도가 변경되면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
새로운재생속도 | 숫자 | Sonor가 설정된 새로운 재생 속도 |
페이드가 끝나면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
Sonor 작업 중에 오류가 발생하면 트리거됩니다.
파람 | 유형 | 설명 |
---|---|---|
sonorObj | 소노르 | 운영된 Sonor의 인스턴스 |
오류 | 끈 | 오류 메시지 |
로컬에 저장소가 있으면 yarn install
실행하여 종속성을 설치합니다.
npm run build
Sonorous의 축소되지 않은 버전을 빌드합니다.npm run build:production
Sonorous의 축소 및 gzip 버전을 빌드합니다.npm run start-dev
축소되지 않은 Sonorous를 빌드하고 오디오 컨트롤이 포함된 간단한 HTML 페이지를 엽니다. 여기를 통해 대부분의 Sonorous 기능을 수동으로 테스트할 수 있습니다.npm run test
모든 단위 테스트를 실행합니다. (단위 테스트는 Jest를 사용하여 작성되었습니다)우리는 끌어오기 요청과 코드 베이스에 대한 변경 제안을 적극적으로 환영합니다. 기여할 때 다음 단계를 따르십시오.
develop
에서 포크 및 분기하고 로컬 개발 가이드를 따라 빌드 가능하게 만드세요.Sonorous는 WebAudio가 있는 모든 곳에서 지원됩니다. 전체 목록을 보려면 여기를 클릭하세요.