
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();}
);
'STUDY > JavaScript' 카테고리의 다른 글
[JS] Web Audio API (0) | 2023.04.03 |
---|---|
[JS] Media Stream API (0) | 2023.04.03 |
[JS] 정규표현식 공백 체크하기 (0) | 2023.03.24 |
[JS] entries()메서드로 FormData 객체 데이터 조회하기 (0) | 2023.03.22 |
[JS] FormData 설명 정리 (0) | 2023.03.14 |