🔊 웹에서 음악 객체(Audio) 다루기

HTML Audio 태그

HTML <audio> 태그는 웹 페이지에서 오디오를 재생하기 위해 사용되는 요소이다. MP3, WAV, OGG 등 다양한 오디오 포맷 파일을 웹에서 재생할 수 있다.

 

audio 태그 속성

속성	값	설정 내용
src	파일 경로	재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등)
autoplay	autoplay	자동 재생 여부 설정(브라우저에 html파일이 로드되자마자 음악파일이 재생됨)
loop	loop	반복 재생 여부 설정
controls	controls	컨트롤 패널(재생/정지 버튼 등) 노출 여부 설정
muted	muted	음소거 설정

<!-- src 속성을 통해 오디오 파일의 경로를 지정 -->
<!-- controls 속성을 추가하면 오디오 재생 컨트롤러가 표시 -->
<!-- autoplay 속성을 추가하면 페이지가 로드될 때 자동으로 오디오가 재생 -->
<!-- loop 속성을 추가하면 오디오가 끝나면 자동으로 반복 재생 -->
<audio src="sound.mp3" autoplay loop controls id="myAudio"></audio>

 

오디오 파일 포맷 지정

<audio> 태그 내부에 <source> 태그를 통해 다양한 타입의 오디오 포맷을 입력해주면, 브라우저가 알아서 지원하는 포맷으로 재생한다. 그리고 type 속성에는 해당 오디오 파일의 MIME 타입을 지정한다.

아래와 같이 여러 개의 <source> 태그를 사용하면 브라우저에서 지원하는 오디오 파일 타입을 우선적으로 재생하게 된다.

<audio autoplay loop controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  오디오가 지원되지 않는 브라우저입니다. <!-- <audio> 요소 내에 위치하는 텍스트는 사용자의 브라우저가 <audio> 요소를 지원하지 않을 경우 화면에 표시 -->
</audio>

브라우저	지원 포맷
Internet Explorer	MP3, WAV
Chrome	MP3, WAV, Ogg Vorbis
Firefox	MP3, WAV, Ogg Vorbis
Safari	MP3, WAV, AAC

---

Javascript로 Audio 다루기

위의 오디오 요소를 자바스크립트 상에서 재생/일시 정지 등의 세밀한 컨트롤을 할 수가 있다.

자바스크립트 상에서 Audio 객체를 생성하거나, 혹은 HTML 상에 <audio> 태그를 선언해둔 상태라면, 엘리먼트 취득 방식으로 audio 객체를 확보할 수도 있다.

const audio = new Audio('audio.mp3'); // `audio.mp3` 파일을 로딩
audio.play(); // 오디오 재생

<!-- HTML audio 태그 -->
<audio src="sound.mp3" id="myAudio"></audio>

<script>
    const myAudio = document.getElementById("myAudio") // Audio객체 취득
    myAudio.play(); // 음원 재생
    myAudio.pause(); // 일시 정지
</script>

이러한  Audio 객체는 다양한 메서드와 이벤트를 제공하므로, 다양한 오디오 제어 기능을 구현할 수 있다.

See the Pen MP3 Playback via HTML5 Audio Elements by Anson Kao (@ansonkao) on CodePen.

---

Audio 객체

 

Audio 객체 프로퍼티

프로퍼티	설정 내용
src	음원파일 경로 : "경로/파일명.확장자"
volume	볼륨 : 0~1
loop	반복 여부: true | false
autoplay	자동재생 여부: true | false
muted	음소거 여부: true | false
paused	일시정지 여부: true | false
ended	재생완료 여부: true | false
duration	음원의 전체 길이(초 단위)
currentTime	음원의 현재 재생 위치(초 단위)

const audio = new Audio('audio.mp3');

// audio가 load 될 때 자동재생 됨
audio.autoplay = true;

// audio의 재생시점을 5초로 설정함
audio.currentTime = 5;

// audio의 길이를 초(seconds) 단위로 반환
audio.duration;

// audio를 반복 재생함
audio.loop = true;

// audio 음소거
audio.muted = true;

// audio의 경로를 지정함(URL)
audio.src = "my_audio.mp3";

// audio의 음량을 0.2로 지정함
// 음량은 0.0 ~ 1.0 사이 값으로 지정할 수 있고, 1.0이 가장 큰 음량
audio.volume = 0.2;

 

Audio 객체 메서드

메서드	작동 내용
play()	재생
pause()	일시정지
addTextTrack()	새로운 트랙을 추가
canPlayType()	브라우저가 해당 오디오 타입을 재생할 수 있는지 체크
load()	오디오 객체를 리로드

const audio = new Audio('audio.mp3');

audio2.loop = true; // 반복재생하지 않음
audio2.volume = 0.5; // 음량 설정

audio2.play(); // sound2.mp3 재생

setTimeout(function () { // 5초 후 sound2.mp3 일시정지
	audio2.pause();
}, 5000);

// audio를 다시 load함. 주로 audio의 src나 설정이 바뀌었을 경우에 사용
audio.src = "sound2.mp3";
audio.load();

/* 오디오 처음부터 재생 */
audio.currentTime = 0; // 재생 위치를 처음으로 설정
audio.play(); // 처음부터 다시 재생됨

 

Audio 객체 이벤트

오디오가 재생되거나 일시정지될 때 발생하는 이벤트 등을 처리할 수 있다. 

이벤트	상황
canplaythrough	음원 파일이 모드 로드되어 재생 가능할 때
play	재생이 시작될 때
playing	재생 중일 때
puase	일시 정지되었을 때
ended	재생이 완료되었을 때
volumechange	볼륨이 변경될 때

// 오디오 재생 시
audio.addEventListener('play', function() {
  console.log('오디오가 재생되었습니다.');
});

// 오디오 일시정지 시
audio.addEventListener('pause', function() {
  console.log('오디오가 일시정지되었습니다.');
});

---

음원 자동 재생 브라우저 정책

크롬이나 사파리, 파이어폭스 같은 대부분 브라우저의 경우 보안 정책 상 사용자의 명시적인 액션(클릭 ..등)이 없는 상태에서의 자동 음원 재생과 같은 기능은 작동하지 않는다.

예를들어 아래와 같이 자바스크립트로 오디오 객체를 로드하고 자동으로 play() 메서드를 통해 음원을 재생하도록 설정하였지만 브라우저 상에서 이를 차단한다는 것이다.

const audio = new Audio('audio.mp3');
audio.play();

즉, 사용자가 버튼 클릭과 같은 작업을 통해 play() 메서드를 호출해야만 음원을 재생할 수 있다는 것이다. 따라서 아래와 같이 코드를 구성해야 한다.

<button id="play-button">음악 재생</button>

<script>
    const audio = new Audio('audio.mp3');
    const playButton = document.getElementById('play-button');

    playButton.addEventListener('click', function() {
      audio.play();
    });
</script>

이전에는, Chrome 브라우저에서 자바스크립트를 이용하여 음원을 자동으로 재생하는 것이 가능했지만, 이는 악성코드의 유포나 사용자의 개인정보를 탈취하는 등의 보안 위협이 될 수 있었기 때문이다.

---

Audio Player 라이브러리

만일 웹페이지에 멋진 mp3 기능을 추가하고 싶다면 미리 만들어진 자바스크립트 라이브러리를 사용하는 것도 방법이다. 자체적으로 CSS 스타일링이 되어 있어서 느낌 좋은 미디어 플레이어를 자신의 홈페이지에 추가할 수 있다.

Calamansi.js - HTML5 & JS Audio Player by Voerro | Voerro Tutorials

---

OnAirCode

35+ JavaScript Music Players - Free Code + Demos

26 HTML Audio Player For Websites In Codepen

---

Web Audio API

이처럼 HTML에서 audio 객체를 이용하면, 오디오를 재생/정지하고 볼륨을 조정하거나 이벤트 처리를 할 수 있다. 그러나 딱 이 정도의 기능이 끝이다. 그 이상은 없다.

Web Audio API는 웹 브라우저에서 오디오 처리와 재생을 위한 강력한 신생 API 이다. 오디오 데이터를 샘플링하고, 필터링하고, 조작하여 오디오 음원 자체를 컨트롤하고 분석할 수 있는 방법을 제공해주어 일반 Audio 객체보다 더 높은 수준의 오디오 제어가 가능하다는 점 등이 있다. 예를들어 음원에 다양한 이펙트 효과를 줄 수 있으며, 음원의 주파수 데이터 취득을 통한 Pitch(높낮이), Gain(볼륨) 등의 계산도 가능하고 마이크를 통해 스트림으로 들어오는 소리에 대한 분석도 가능하다.

Web Audio API - Web API | MDN

<audio src="audio.mp3"></audio>
<label for="playback-rate">Playback Rate</label>
<input type="range" id="playback-rate" min="0.5" max="2" step="0.1" value="1">

<script>
    // 오디오 파일 로드
    const audioContext = new AudioContext(); // 오디오 컨텍스트를 생성
    const audioElement = document.querySelector('audio'); // HTML audio 요소 가져오기
    const audioSource = audioContext.createMediaElementSource(audioElement); // 오디오 소스를 생성

    // 재생 속도 변경을 위한 슬라이더 생성
    const playbackRateSlider = document.querySelector('#playback-rate');
    playbackRateSlider.addEventListener('input', () => {
      // 사용자가 슬라이더를 조작하면 playbackRate 속성(오디오 재생 속도)가 변경
      audioElement.playbackRate = playbackRateSlider.value;
    });

    // 오디오 재생
    audioSource.connect(audioContext.destination); // 오디오 소스를 오디오 컨텍스트의 출력에 연결
    audioElement.play();
</script>

그러나 Web Audio API는 강력한 만큼 일반 Audio 객체보다 복잡해 높은 학습률을 요구한다. 따라서 단순한 오디오 재생 기능만을 필요로 하는 경우에는 일반 Audio 객체를 사용하는 것이 적합할 수 있고, 다양한 사운드 작업 및 분석이 필요하다면 Web Audio API를 사용하는 것이 좋다.

---

# 참고자료

http://www.tcpschool.com/html-tags/audio 

https://stackoverflow.com/questions/9419263/how-to-play-audio

https://curryyou.tistory.com/337