• 회원가입
  • 로그인
  • 구글아이디로 로그인

[HTML_Objects] JS - <audio> 객체 ★ - 음성파일재생 (=오디오태그 = audio태그) ※ 음성파일형식별로 브라우저지원 상이 ※ 클릭 오디오파일 재생/멈춤 (Click Audio Play/Stop)

목차

  1. <audio> 객체 정의 - 음성파일 재생
  2. <audio> 객체 구문
  3. <audio> 객체 예제 - 접근
  4. <audio> 객체 예제 - 생성
  5. <audio> 객체 속성
  6. <audio> 객체 메서드
  7. <audio> 객쳬 예제 - (재생/멈춤)을 1개의 토글 버튼으로 제어
  8. <audio> 객쳬 예제 - (재생/멈춤)을 2개의 각각 버튼으로 제어
  9. <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
오디오의 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 이용 방식 보기

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
게시물이 없습니다.
목록
찾아주셔서 감사합니다. Since 2012