(기초)그래서 뭘 배운거야?/JavaScript
JS-110-Media Play/Pause : 시작, 중지 설정
Soheny.P
2021. 10. 6. 00:30
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<p><button id="play">Play👀</button></p>
<p><button id="pause">Pause👏</button></p>
<p><button id="ispause">is pause?</button></p>
<p><button id="isended">is ended?</button></p>
<p id="printpause"></p>
<p id="printended"></p>
<script>
window.addEventListener("load", function () {
if (!window.Audio) return;
// Audio() 기본 내장함수
const audio = new Audio();
// 재생가능한 오디오 판별해 src에 저장하기
if (audio.canPlayType("audio/mpeg")) {
audio.src = "media/audio.mp3";
}
else if (audio.canPlayType("audio/ogg")) {
audio.src = "media/audio.ogg";
}
// mp3도 ogg도 아니면 종료
else {
return;
}
// play버튼 누르면 재생
const button1 = document.getElementById("play");
button1.addEventListener("click", function () { audio.play(); });
// pause누르면 멈춤
const button2 = document.getElementById("pause");
button2.addEventListener("click", function () { audio.pause(); });
// ispause누르면 멈췄는지 체크
const button3 = document.getElementById("ispause");
// 음악이 멈췄으면 T/F
button3.addEventListener("click", function () {
const print1 = document.getElementById("printpause");
print1.innerText = audio.paused;
});
// isended누르면 끝났는지 체크
const button4 = document.getElementById("isended");
// 음악이 끝났으면 T/F
button4.addEventListener("click", function () {
const print2 = document.getElementById("printended");
print2.innerText = audio.ended;
});
});
</script>
</body>
</html>
728x90