[JavaScript] 자바스크립트에서 Web Audio API 사용하기
2022. 7. 24. 20:11ㆍProgram/JavaScript
193_자바스크립트에서 Web Audio API 사용하기
[적용]
- 모바일 웹 사이트에서 사운드를 동시에 재생하고 싶을 때
- 오디오 파형으로 사운드 비주얼라이저를 만들고 싶을 때
- 오디오 데이터를 서버에 전송하고 싶을 때
[내용]
Web Audio API는 사운드를 다루는 고급 기능이다.
audio 요소에 비해 기능이 많고 제양이 적다.
예를 들면 사운드 파형의 데이터를 가져와 비주얼라이저를 만들거나,
모바일 브라우저에서 여러 BGM과 효과음을 동시에 재생할 수 있다.
다만 고급 기능이므로 난이도가 있고 코드가 길어진다.
사운드 파일을 로딩하여 재생하는 예시를 확인해 보자.
loadAndPlay() 함수를 사용해 사운드를 재생한다.
HTML index.html
<body>
<button onclick="loadAndPlay()">재생</button>
<button onclick="stop()">정지</button>
</body>JavaScript main.js
loadAndPlay();
let source;
// 재생 처리
async function loadAndPlay() {
const context = new AudioContext();
// 사운드 파일 로딩
const data = await fetch('assets/music.mp3');
// ArrayBuffer로 사용
const buffer = await data.arrayBuffer();
// 오디오 데이터로 변환
const decodedBuffer = await context.decodeAudioData(buffer);
// 소스 작성
source = context.createBufferSource();
// 소스에 오디오 데이터 할당
source.buffer = decodedBuffer;
// 스피커 연결
source.connect(context.destination);
// 재생 시작
source.start(0);
}
// 정지 기능
function stop() {
// 재생 정지
source.stop();
}
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 스크립트로 영상 제어하기 (0) | 2022.07.25 |
|---|---|
| [JavaScript] 자바스크립트에서 영상 로딩하기 (0) | 2022.07.24 |
| [JavaScript] 자바스크립트에서 사운드 볼륨 조절하기 (0) | 2022.07.24 |
| [JavaScript] 자바스크립트에서 사운드 재생 조절하기 (0) | 2022.07.24 |
| [JavaScript] 자바스크립트에서 스크립트로 사운드 제어하기 (0) | 2022.07.24 |