Audio
이거 진짜 그 오디오 제어하는 태그임!
오오 이거 좀 신기함
시간 날 때 좀 더 가지고 놀면 재미.... 있을 까 ...??
오디오 태그를 이용해서 브라우저에서 음악 재생시켜보자
[기본태그 사용해서 실행]
<body>
<h2>기본 audio(src 속성과 controls만 사용) 태그</h2>
<audio src="Media/audio.mp3" controls>
<!--이건 그냥 바로 재생됨
<audio src="Media/audio.mp3" controls autoplay loop>
-->
</body>
이것도 기본속성으로 재생하는 건데
브라우저마다 audio 태그를 지원하지 않을 수 도 있다고 함.
그래서 소스태그를 이용해서 재생시키는 방법 도있다!
근데 소스태그를 이용해도 지원하는 미디어들이 또 다 다르다보니
여러 종류의 파일을 넣어 놓고 지원하는 한 파일만 재생할 수 있도록 만든다!
겉보기에는 위와 별 다를게 없지만 실제로는 여러 종류의 파일소스들이 내장되어 있다 !
<h2>기본 audio 하위태그인 <source>태그사용</h2>
<audio controls> <!--여러 개를 넣어도 지원하는미디어 하나만 재생 함 -->
<source src="Media/audio.ogg" type="audio/ogg"/>
<source src="Media/audio.mp3" type="audio/mp3"/>
</audio>
기본 audio 하위태그인 <source>태그사용
[오디오 직접 만들기]
기본사용 말고 직접 이벤트 만들어서 재생시켜 보자!!
자바스크립트 위주로 큰 흐름부터 보자
1. 객체 생성 : 당연히 음악 파일을 준비 해놔야 합니다.
2. span 객체 얻기
3.progress객체 얻기 : timeupdate 이벤트 처리를 위한 리스너 부착 .addEventLister()함수 사용!
4. 오디오의 총 재생시간 얻고 설정
5. 오디오 현재 재생시간 얻고 설정
6. 타입업데이트에 따른 프로그레스 진행정도 표시(최대값 설정)
7. 진짜 진행정도 표시
<body>
<h2>커스텀 오디오</h2>
<div>
<progress value="0" ></progress>
</div>
<div>
<input type="button" value="PLAY" onclick="play();"/>
<input type="button" value="PAUSE" onclick="pause();"/>
<input type="button" value="STOP" onclick="stop();"/>
<input type="range" value="volume" onclick="volume();"/>
<span id="current"></span><span id="total"></span>
</div>
<script>
//객체생성
//var audio = new Audio();
//audio.currentSrc = "Media/audio.mp3"; 이렇게 선언 후 나중에 파일 넣어도 되고
var audio = new Audio("Media/audio.mp3"); // 선언과 동시에 파일 넣어도 됨!
//span객체 얻기
var currentSpan = document.getElementById("current");
var totalSpan = document.getElementById("total");
//progress객체 얻기
var progress = document.querySelector("progress");
//오디오객체에 이벤트처리 (이 밑으로 함수 식이 기니 잘 따라와랏)
audio.addEventListener('timeupdate',function(){
//오디오 총 재생시간
totalSpan.textContent = audio.duration;
//현재재생
currentSpan.textContent= audio.currentTime;
//프로그레스의 진행정도 표시(최댓값 설정)
progress.max = audio.duration;
//진행정도 표시
progress.value= audio.currentTime;
});
//우리가 직접 누르는 버튼들 함수로 이벤트 처리
var play = function(){
audio.play();
};
var pause = function(){
audio.pause();
};
//stop()함수 지원 안해서 stop효과 기능 구현해야 함
var stop = function(){
if(audio.played){ //재생중일 때
audio.currentTime=0;
audio.pause();
}
};
var volume = function(){
audio.volume=0.3;
}
</script>
</body>커스텀 오디오
'학원 > HTML5' 카테고리의 다른 글
| 10/31 32-6 [HTML] Convas (0) | 2022.10.31 |
|---|---|
| 10/31 32-5 [HTML] video (0) | 2022.10.31 |
| 10/31 32-3 [HTML] fieldSet & address (0) | 2022.10.31 |
| 10/31 32-2 [HTML] SPAN (0) | 2022.10.31 |
| 10/31 32-1 [HTML] IFRAME (0) | 2022.10.31 |