처음으로 HTMLAudioElement를 사용해봤다.

HTMLAudioElement

HTMLAudioElement를 통해 <audio>가 가진 속성에 손쉽게 접근하여 음악을 재생, 멈춤, 볼륨 조절 등 다양한 동작을 수행할 수 있다.

HTMLAudioElement는 HTMLMediaElement가 가진 속성과 메소드를 상속받아서 사용한다.

리액트로 간단한 음악 플레이어 앱을 만들어 보면서 <audio>를 처음으로 다루어보게 됐다.

어떻게 오디오를 다루어야하는지 생각이 많았는데, 오디오 생성자를 이용해 아주 간단한 방법으로 처리할 수 있었다.

const track = new Audio(src);
track.play(); // 음악이 재생된다.
track.pause(); // 음악이 멈춘다.

이렇게 오디오를 재생하고 멈출 수 있었지만 일시정지 이후에 다시 재생을 하면 처음부터 재생되는 문제가 발생했었다.

어떤 시점부터 오디오를 재생하고 싶다면,

// 예시
const time = 35; // seconds
track.currentTime = time;
track.play();

위의 코드처럼 특정 시점을 기억하고 있어야 그 시점부터 음악이 재생된다. 이를 위해서 음악 앱에서는 따로 상태로 관리해주었다.

이외에도 볼륨을 조절하거나 음소거인지 아닌지 확인할 수 있는 다양한 속성들이 존재한다.

오디오를 더 세밀하게 다루고 싶다면?

HTMLAudioElement는 정말 단순하고 쉽게 오디오를 다룰 수 있게 해주지만, 오디오에 이펙트를 추가하고 노이즈를 조절하거나 그럴 수는 없다.

만약 더 세밀한 조작을 원한다면 Web Audio API를 사용해야한다.

MDN에서 제공하는 문서를 읽어보았지만 일단 음악과 관련된 용어부터 익숙치 않아서 문서를 이해하는데 어려움이 있었다.

기본적으로 AudioContext를 생성하는 것을 시작으로 작업 흐름을 가져가는데…

설명하는 많은 단어들과 구조가 생소해서 튜토리얼을 경험하면서 이해봐야겠다.

참고자료: MDN: Web Audio API