audio 태그를 아래처럼작성하면 음악파일이 반복하여 자동 재생된다.(크롬은 사용자가 직접 play버튼을 눌러야 재생됨)
<audio src="sound.mp3" autoplay loop controls id="myAudio"></audio>
속성 | 값 | 설정 내용 |
---|---|---|
src | 음원파일 경로 | 재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등) |
autoplay | autoplay | 자동 재생 여부 설정(브라우저에 html파일이 로드되자마자 음악파일이 재생됨) |
loop | loop | 반복 재생 여부 설정 |
controls | controls | 컨트롤 패널(재생/정지 버튼 등) 노출 여부 설정 |
muted | muted | 음소거 설정 |
audio 태그 내부에 source 태그를 통해 다양한 타입의 오디오 포맷을 입력해주면, 브라우저가 알아서 지원하는 포맷으로 재생한다.
<audio autoplay loop controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
</audio>
자바스크립트 상에서 Audio 객체를 생성하여 재생/일시 정지 등을 컨트롤할 수 있다.
단, 크롬브라우저의 경우 사용자의 명시적인 액션(클릭 등)이 없는 상태에서의 음원 재생은 작동하지 않는다.
const myAudio = new Audio(); // Aduio 객체 생성
myAudio.src = "sound.mp3"; // 음원 파일 설정
myAudio.play(); // 음원 재생
myAudio.pause(); // 일시 정지
const myAudio = document.getElementById("myAudio") // Audio객체 취득
myAudio.play(); // 음원 재생
myAudio.pause(); // 일시 정지
메서드 | 작동 내용 |
---|---|
play() | 재생 |
pause() | 일시정지 |
addTextTrack() | 새로운 트랙을 추가 |
canPlayType() | 브라우저가 해당 오디오 타입을 재생할 수 있는지 체크 |
load() | 오디오 객체를 리로드 |
프로퍼티 | 설정 내용 |
---|---|
src | 음원파일 경로 : "경로/파일명.확장자" |
volume | 볼륨 : 0~1 |
loop | 반복 여부: true |
autoplay | 자동재생 여부: true |
muted | 음소거 여부: true |
paused | 일시정지 여부: true |
ended | 재생완료 여부: true |
duration | 음원의 전체 길이(초 단위) |
currentTime | 음원의 현재 재생 위치(초 단위) |
이벤트 | 상황 |
---|---|
canplaythrough | 음원 파일이 모드 로드되어 재생 가능할 때 |
play | 재생이 시작될 때 |
playing | 재생 중일 때 |
puase | 일시 정지되었을 때 |
ended | 재생이 완료되었을 때 |
volumechange | 볼륨이 변경될 때 |
크롬 브라우저는 사용자의 명시적인 액션이 없는 상태에서의 음원 재생을 허용하지 않는다.
따라서 아래와 같이 코드를 작성하면, 크롬에서 audio.play() 코드는 작동하지 않는다.(다른 브라우저는 작동함)