HTML DOM 오디오 객체

<시간/>

HTML DOM 오디오 개체는 HTML

속성

다음은 HTML DOM 오디오 개체의 속성입니다 -

속성	설명
오디오 트랙	사용 가능한 오디오 트랙이 포함된 audioTrackList 개체를 반환하려면
자동재생	자동으로 재생을 시작하도록 오디오를 반환하거나 설정합니다.
버퍼됨	오디오의 버퍼링된 모든 부분을 포함하는 TimeRanges 객체를 반환합니다.
컨트롤러	오디오의 현재 미디어 컨트롤러를 나타내는 MediaController 개체를 반환합니다.
컨트롤	오디오에 재생/일시 중지 컨트롤이 표시되어야 하는지 여부를 설정하거나 반환하려면
교차 출처	오디오의 CORS 설정을 지정하거나 반환하려면
현재Src	현재 재생 중인 오디오의 URL을 반환합니다.
현재시간	현재 재생 위치(초)를 설정하거나 반환합니다.
기본 음소거	기본적으로 오디오를 음소거할지 여부를 설정하거나 반환합니다.
기본 재생 속도	오디오의 기본 재생 속도를 설정하거나 반환합니다.
기간	오디오 길이를 초 단위로 반환합니다.
종료	재생 종료 여부를 반환합니다.
오류	오디오의 오류 상태를 나타내는 MediaError 유형의 개체를 반환합니다.
루프	오디오가 끝나면 재생을 다시 시작할지 여부를 설정하거나 반환합니다.
미디어그룹	오디오가 속한 미디어 그룹 이름을 설정하거나 반환합니다.
음소거	오디오를 끌지 여부를 설정하거나 반환합니다.
네트워크 상태	오디오의 현재 네트워크 상태를 반환하려면
일시중지됨	오디오 일시 중지 여부를 설정하거나 반환합니다.
재생률	오디오 재생 속도를 설정하거나 반환합니다.
재생됨	오디오의 재생된 부분을 나타내는 TimeRanges 객체 유형의 객체를 반환합니다.
미리 로드	오디오의 사전 로드 속성을 설정하거나 반환합니다.
준비 상태	오디오의 현재 준비 상태를 반환합니다.
검색 가능	오디오의 검색 가능한 부분을 나타내는 TimeRanges 객체를 반환하려면
찾는	사용자가 현재 오디오에서 찾고 있는지 여부를 반환하려면
src	오디오의 src 속성 값을 설정하거나 반환하려면
텍스트 트랙	사용 가능한 모든 텍스트 트랙을 나타내는 TextTrackList 개체를 반환하려면
볼륨	오디오 볼륨을 설정하거나 반환합니다.

방법

다음은 Audio Object의 메소드입니다 -

메소드	설명
addTextTrack()	주어진 오디오에 새 텍스트 트랙을 추가합니다.
canPlayType()	브라우저가 지정된 오디오 유형을 재생할 수 있는지 확인합니다.
fastSeek()	오디오 플레이어에서 지정된 시간을 찾으려면/
getStartDate()	현재 타임라인 오프셋을 나타내는 새 Date 객체를 반환합니다.
로드()	오디오 요소를 다시 로드합니다.
재생()	오디오 재생을 시작합니다.
일시중지()	현재 재생 중인 오디오를 일시 중지합니다.

구문

다음은 −

의 구문입니다.

오디오 요소 만들기

var x= document.createElement("AUDIO")

오디오 요소 액세스

var x = document.getElementById("demoAudio")

예시

Audio Object −

의 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>MUSIC</h1>
<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>
<p>Click the button to get the duration of the audio, in seconds.</p>
<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>
<p id="SAMPLE"></p>
<script>
   function AudioDur() {
      var x = document.getElementById("Audio").duration;
      document.getElementById("SAMPLE").innerHTML = x;
   }
   function CreateAudio() {
      var x = document.createElement("AUDIO");
      x.setAttribute("src","sample1.mp3");
      x.setAttribute("controls", "controls");
      document.body.appendChild(x);
   }
</script>
</body>
</html>

출력

다음 출력을 생성합니다 -

HTML DOM 오디오 객체

"기간" 클릭 시 -

HTML DOM 오디오 객체

CREATE 클릭 시 -

HTML DOM 오디오 객체

위의 예에서 -

먼저 오디오 요소를 만들고 오디오 소스와 유형을 지정했습니다.

<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>

그런 다음 각각 AudioDur() 및 CreateAudio() 기능을 실행하기 위해 두 개의 "Duration" 및 CREATE 버튼을 만들었습니다.

<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>

AudioDur() 함수는 연결된 ID가 "Audio"인 요소를 가져옵니다.

function AudioDur() {
   var x = document.getElementById("Audio").duration;
   document.getElementById("SAMPLE").innerHTML = x;
}

CreateAudio() 함수는 오디오 요소를 생성하고 src와 같은 속성을 "sample1.mp3"로 설정하고 "controls" 속성을 설정하여 해당 컨트롤을 활성화합니다. 그런 다음 요소는 appendChild() 메서드를 사용하여 본문에 추가됩니다.

function CreateAudio() {
   var x = document.createElement("AUDIO");
   x.setAttribute("src","sample1.mp3");
   x.setAttribute("controls", "controls");
   document.body.appendChild(x);
}