내배캠 71일차

·2023년 1월 23일
0

내일배움캠프

목록 보기
77/142
post-thumbnail

홈페이지에 배경음악 넣기

1. HTML Audio 태그 사용법

audio 태그를 아래처럼작성하면 음악파일이 반복하여 자동 재생된다.(크롬은 사용자가 직접 play버튼을 눌러야 재생됨)

<audio src="sound.mp3" autoplay loop controls id="myAudio"></audio>

audio 태그의 속성(Attributes)

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

브라우저별 오디오 포맷 미지원 대응 처리

audio 태그 내부에 source 태그를 통해 다양한 타입의 오디오 포맷을 입력해주면, 브라우저가 알아서 지원하는 포맷으로 재생한다.

<audio autoplay loop controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
</audio>

2. Javascript 사용법

자바스크립트 상에서 Audio 객체를 생성하여 재생/일시 정지 등을 컨트롤할 수 있다.
단, 크롬브라우저의 경우 사용자의 명시적인 액션(클릭 등)이 없는 상태에서의 음원 재생은 작동하지 않는다.

객체 생성 및 리소스 로드

  1. 자바스크립트 상에서 Audio 객체를 생성하고 음원파일 경로를 설정할 수 있다.
const myAudio = new Audio(); // Aduio 객체 생성
myAudio.src = "sound.mp3"; // 음원 파일 설정

myAudio.play(); // 음원 재생
myAudio.pause(); // 일시 정지
  1. 만약 HTML 상에 audio태그를 선언해둔 상태라면, 엘리먼트 취득 방식으로 audio객체를 확보할 수 있다.
const myAudio = document.getElementById("myAudio") // Audio객체 취득

myAudio.play(); // 음원 재생
myAudio.pause(); // 일시 정지

Audio 객체의 메서드

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

Audio 객체의 프로퍼티

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

Audio 객체의 이벤트

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

주의 사항

크롬 브라우저는 사용자의 명시적인 액션이 없는 상태에서의 음원 재생을 허용하지 않는다.

따라서 아래와 같이 코드를 작성하면, 크롬에서 audio.play() 코드는 작동하지 않는다.(다른 브라우저는 작동함)

참고

profile
개발자 꿈나무

0개의 댓글