목차
<audio> 객체 정의 - 음성파일 재생 <audio> 객체 구문 <audio> 객체 예제 - 접근 <audio> 객체 예제 - 생성 <audio> 객체 속성 <audio> 객체 메서드 <audio> 객쳬 예제 - (재생/멈춤)을 1개의 토글 버튼으로 제어 <audio> 객쳬 예제 - (재생/멈춤)을 2개의 각각 버튼으로 제어 <audio> 객체 예제 - 2개 오디오를 1개의 토글 버튼으로 제어
<audio> 객체 정의 - 음성파일 재생
HTML <audio> 태그(요소) 의미. (IE9 이상 지원)
<audio> 객체 구문
[접근]
var x = document.getElementById ("요소ID");
[생성]
var x = document.createElement ("AUDIO");
<audio> 객체 예제 - 접근
<audio id="hz" controls>
<source src="hz.ogg " type="audio/ogg">
<source src="hz.mp3 " type="audio/mpeg">
사용중인 브라우저가 audio 태그 지원 X.
</audio>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").duration;
document.getElementById("demo").innerHTML = x;
}
</script>
※ src 속성 부분에 음성파일 주소 입력.
<audio> 객체 예제 - 생성
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("AUDIO");
if (x.canPlayType("audio/mpeg")) {
x.setAttribute("src","hz.mp3 ");
} else {
x.setAttribute("src","hz.ogg ");
}
x.setAttribute("controls", "controls");
document.body.appendChild(x);
}
</script>
※ src 속성 부분에 음성파일 주소 입력.
<audio> 객체 속성
audioTracks
사용 가능한 오디오 트랙을 나타내는 AudioTrackList 객체 반환.
autoplay
오디오가 준비 되자마자 재생 시작할지 여부 설정/반환.
buffered
오디오의 버퍼 된 부분 나타내는 TimeRanges 객체 반환.
controller
오디오의 현재 미디어 컨트롤러를 나타내는 MediaController 객체 반환.
controls
오디오에 컨트롤 표시 여부 설정/반환. (재생 / 일시정지 등).
crossOrigin
오디오의 CORS 설정을 설정/반환
currentSrc
현재 오디오의 URL 반환
currentTime
오디오의 현재 재생 위치를 설정/반환. (초).
defaultMuted
오디오 기본적으로 음소거해야하는지 여부 설정/반환.
defaultPlaybackRate
오디오의 기본 재생속도 설정/반환.
duration
오디오 길이를 초 단위로 반환.
ended
오디오 재생 종료 여부 반환
error
오디오의 오류 상태를 나타내는 MediaError 객체 반환.
loop
오디오가 끝날 때마다 다시 재생을 시작할지 여부를 설정/반환.
mediaGroup
오디오가 속한 미디어 그룹의 이름 설정/반환.
muted
사운드를 끌지 여부를 설정/반환.
networkState
오디오의 현재 네트워크 상태 반환.
paused
오디오 일시 중지 여부 설정/반환.
playbackRate
오디오 재생속도 설정/반환.
played
오디오의 재생된 부분을 나타내는 TimeRanges 객체 반환.
preload
오디오의 preload 속성값 설정/반환.
readyState
오디오의 현재 준비상태 반환.
seekable
오디오의 탐색 가능한 부분을 나타내는 TimeRanges 객체 반환.
seeking
사용자가 현재 오디오를 찾고 있는지 여부를 반환.
src
textTracks
사용 가능한 텍스트트랙 나타내는 TextTrackList 객체 반환.
volume
오디오의 오디오 볼륨 설정/반환.
<audio> 객체 메서드
addTextTrack()
오디오에 새 텍스트 트랙 추가.
canPlayType()
브라우저가 지정된 오디오 유형을 재생할 수 있는지 확인.
fastSeek()
오디오 플레이어에서 지정된 시간 찾기.
getStartDate()
현재의 타임 라인 오프셋을 나타내는 새로운 Date 객체 반환.
load()
오디오 요소를 다시 로드.
play()
오디오 재생 시작.
pause()
현재 재생중인 오디오를 일시 중지.
※ <audio> 객체는 표준 속성/메서드 /이벤트 지원.
<audio> 객쳬 예제 - (재생/멈춤)을 1개의 토글 버튼으로 제어
<audio id="hz">
<source src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" type="audio/mpeg">
당신 브라우저는 AUDIO 태그 지원 X
</audio>
<button type="button" onclick="togglePlayPause()">재생/정지</button>
<script>
var hz = document.getElementById("hz");
function togglePlayPause() {
if (hz.paused) {
hz.play();
} else {
hz.pause();
}
}
</script>
결과보기
<audio> 객쳬 예제 - (재생/멈춤)을 2개의 각각 버튼으로 제어
<audio id="hz">
<source src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" type="audio/mpeg">
당신 브라우저는 AUDIO 태그 지원 X
</audio>
<button type="button" onclick="play()" >재생</button>
<button type="button" onclick="pause()" >정지</button>
<script>
var hz = document.getElementById("hz");
function play() {
hz.play();
}
function pause() {
hz.pause();
}
</script>
결과보기
<audio> 객체 예제 - 2개 오디오를 1개의 토글 버튼으로 제어
<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls id="hz1"></audio>
<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls id="hz2"></audio>
<button type="button" id="btn">재생 토글</button>
<script>
function toggle_play() {
var hz1 = document.getElementById('hz1');
var hz2 = document.getElementById('hz2');
if (hz1.paused == true) {
hz2.pause();
hz2.currentTime = 0;
hz1.play();
} else {
hz1.pause();
hz1.currentTime = 0;
hz2.play();
}
}
document.addEventListener("DOMContentLoaded ", function() {
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
toggle_play();
});
});
</script>
결과보기
PS. jQuery 이용 방식 보기
