[JS] audio 태그 제어하기

728x90

audio 태그

<audio> 태그는 음악이나 오디오 스트림과 같은 사운드를 정의할 때 사용합니다.

<audio> 요소는 현재 MP3 , WAV, Ogg 세 가지 포맷의 파일을 지원하고 있습니다.

audio 태그 속성

속성명	속성값	설명
autoplay	autoplay	오디오가 실행될 준비가 끝나는 대로 자동으로 실행됨을 명시함.
controls	controls	플레이 버튼이나 정지 버튼과 같이 오디오의 실행을 제어할 수 있는 제어기가 표시됨을 명시함.
loop	loop	오디오의 재생이 끝나면 자동으로 또다시 재생됨을 명시함.
muted	muted	오디오의 음성 출력이 음소거됨을 명시함.
preload	auto metadata none	페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 명시함.
src	URL	오디오 파일의 위치(URL)를 명시함.

오디오 파일 포맷 지정

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

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

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

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

자바스크립트로 오디오 요소 제어하기

Audio 객체 속성

속성	설정 내용
src	음원파일 경로 : "경로/파일명.확장자"
volume	볼륨 : 0~1 *1에 가까울수록 소리가 큽니다.
loop	반복 여부: true \| false
autoplay	자동재생 여부: true \| false
muted	음소거 여부: true \| false
paused	일시정지 여부: true \| false
ended	재생완료 여부: true \| false
duration	음원의 전체 길이(초 단위)
currentTime	음원의 현재 재생 위치(초 단위)

// src 속성 설정
const audio = new Audio("./audio.mp3");
audio.src = "./audio.wav";

// volume 속성 설정
audio.volume = 0.5;

// loop 속성 설정
audio.loop = true;

// autoplay 속성 설정
audio.autoplay = true;

// muted 속성 설정
audio.muted = true;

// paused 속성 설정
audio.paused = true;

// ended 속성 설정
audio.ended = true;

// duration 속성 설정
audio.duration = 10;

// currentTime 속성 설정
audio.currentTime = 5;

Audio 객체 메서드

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

const audio = new Audio("./audio.mp3");

// 재생 위치를 2초로 설정
// 오디오 재생
audio.currentTime = 2;
audio.play();

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

// 오디오 유형 확인
// canPlay가 true이면 오디오를 재생할 수 있습니다.
const canPlay = audio.canPlayType("audio/mp3");

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

Audio 객체 이벤트

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

const audio = new Audio("./audio.mp3");

// 오디오가 재생 가능한 상태가 되었을 때
audio.addEventListener("canplaythrough", function() {
  audio.play();
});

// 재생을 시작했을 때
audio.addEventListener("play", function() {
  alert("오디오 시작 했습니다.");
});

// 오디오가 재생 중일 때
audio.addEventListener("playing", function() {
  alert("오디오 재생 중입니다.");
});

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

// 오디오 재생 완료됨
audio.addEventListener("ended", function() {
  alert("오디오 재생 완료됨.");
});

//오디오의 볼륨이 변경되었을 때
audio.volume = 0.5;
audio.addEventListener("volumechange", function() {
  alert(audio.volume);
});

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

크롬이나 사파리, 파이어폭스 같은 대부분 브라우저의 경우 보안 정책 상

사용자의 명시적인 액션(클릭 ..등)이 없는 상태에서의 자동 음원 재생과 같은 기능은 작동하지 않는다.

이전에는, Chrome 브라우저에서 자바스크립트를 이용하여 음원을 자동으로 재생하는 것이 가능했지만,

이는 악성코드의 유포나 사용자의 개인정보를 탈취하는 등의 보안 위협이 될 수 있었기 때문이다.

+ + +

여러개의 오디오 요소 제어하기( jQuery )

여러개중 하나의 오디오 요소만 선택해서 제어하기

먼저 오디오 태그 선택합니다. 코드는 문서 내의 첫 번째 오디오 요소를 선택합니다.

만약 여러 개의 오디오 요소가 있다면 인덱스를 변경하면 됩니다.()

var audio = $('audio')[0];

재생하기 코드는 오디오를 재생합니다.

audio.play();

일시정지하기이 코드는 오디오를 일시정지합니다.

audio.pause();

재생 상태 확인하기이 코드는 오디오가 재생 중인지 아니면 일시정지된 상태인지 확인합니다.

if (audio.paused) { 
// 일시정지된 상태 } 
else { 
// 재생 중인 상태 }

재생 위치 설정하기이 코드는 오디오 재생 위치를 10초로 설정합니다. 이 값을 변경하여 재생 위치를 설정할 수 있습니다.

audio.currentTime = 10;

다수의 audio태그 전부 한번에 제어하기

여러 개의 오디오 태그를 모두 한 번에 멈추려면,

jQuery의 each() 메소드를 사용하여 모든 오디오 요소를 선택하고 pause() 메소드를 호출하면 됩니다.

$('audio').each(function()
{ this.pause();}
);

위의 코드는 $('audio')를 사용하여 모든 오디오 요소를 선택하고, each() 메소드를 사용하여 각 요소에 대해 함수를 실행합니다. 그리고 선택한 오디오 요소의 pause() 메소드를 호출하여 모든 오디오 요소를 일시 중지합니다.

재생하는 방법도 동일하게 진행하면 됩니다.

$('audio').each(function()
{ this.play();}
);

참고 출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%8C%EC%95%85-%EA%B0%9D%EC%B2%B4Audio-%EB%8B%A4%EB%A3%A8%EA%B8%B0