HOWTO · jQuery
jQuery를 재생 오디오
이 튜토리얼은 jQuery를 사용하여 오디오를 재생하는 방법을 보여줍니다.
이 페이지의 내용
이 튜토리얼은 jQuery를 사용하여 오디오를 재생하는 방법을 보여줍니다.
jQuery를 사용하여 오디오 재생
jQuery는 오디오 재생을 위한 내장 기능을 제공하지 않지만 jQuery와 함께 HTML audio 태그를 사용하여 오디오 재생 시스템을 만들 수 있습니다. audio 태그의 canplay 이벤트를 조작하여 jQuery를 사용하여 오디오를 재생하고 싶을 때마다 사용할 수 있습니다.
jQuery를 사용하여 오디오에 대한 재생, 일시 중지, 다시 시작 및 중지 옵션을 구현할 수 있습니다. jQuery를 사용하여 오디오를 재생, 일시 중지, 다시 시작 및 중지할 수 있는 시스템을 만들어 봅시다.
아래 단계를 참조하십시오.
-
첫째, HTML 부분에는 오디오 요소가 아닌 div와 버튼만 포함됩니다.
-
오디오 요소는 문서가 준비되면 jQuery에 의해 생성됩니다.
-
오디오 요소가 생성되면 소스 속성을 설정합니다.
-
종료이벤트의 값을 설정합니다. 오디오 재생이 끝나면 다시 재생되도록 했습니다. -
Play, Pause, Restart 및 Stop 네 개의 버튼에 대한 작업을 구현합니다.
-
Play 및 Pause 버튼의 경우 내장된
play()및pause()메서드를 사용할 수 있습니다. -
Restart의 경우 오디오에 대한
currentTime을 0으로 설정합니다. Stop의 경우 오디오에 대한currentTime을 0으로 설정한 다음pause()메서드를 사용합니다. -
그런 다음
canplay이벤트를 사용하여 오디오의 지속 시간, 소스 및 상태를 표시합니다. -
마지막으로
time update이벤트를 사용하여 오디오 재생 시간을 표시합니다.
jQuery를 사용하여 위의 단계를 기반으로 예제를 구현해 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Play Audio</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#Demo {
background-color : lightgreen;
height: 50%;
width: 100%;
}
#Main {
border: 5px solid green;
background-color : lightgreen;
height: 10%;
width: 20%;
}
.DemoButton {
font-size: 14px;
font-weight: 500;
line-height: 20px;
list-style: none;
cursor: pointer;
display: inline-block;
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 10px 12px;
text-align: center;
background-color: rgba(51, 51, 51, 0.05);
border-radius: 8px;
border-width: 0;
color: #333333;
transition: all 200ms;
vertical-align: baseline;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<div id = "Main">
<h2>Click to Play, Pause, Restart, Stop...</h2>
<button class="DemoButton" id="ClickPlay">Play</button>
<button class="DemoButton" id="ClickPause">Pause</button>
<button class="DemoButton" id="ClickRestart">Restart</button>
<button class="DemoButton" id="ClickStop">Stop</button>
<hr>
<h2>Audio Playing Time</h2>
<div id="AudioRunningTime">0</div>
<hr>
<h2>Audio File Info</h2>
<div id="AudioLength">Duration of Audio:</div>
<div id="AudioSource">Source of the Audio:</div>
<div id="AudioStatus" style="color:red;">Status: Click Play</div>
</div>
</body>
<script>
$(document).ready(function() {
var DemoAudio = document.createElement('audio');
DemoAudio.setAttribute('src', 'demo.mp3');
DemoAudio.addEventListener('ended', function() {
this.play();
}, false);
DemoAudio.addEventListener("canplay",function(){
$("#AudioLength").text("Duration of Audio:" + DemoAudio.duration + " seconds");
$("#AudioSource").text("Source of the Audio:" + DemoAudio.src);
$("#AudioStatus").text("Status of Audio: Click Play").css("color","darkgreen");
});
DemoAudio.addEventListener("timeupdate",function(){
$("#AudioRunningTime").text("Current second:" + DemoAudio.currentTime);
});
$('#ClickPlay').click(function() {
DemoAudio.play();
$("#AudioStatus").text("Status: Playing the Audio");
});
$('#ClickPause').click(function() {
DemoAudio.pause();
$("#AudioStatus").text("Status: Paused the Audio");
});
$('#ClickRestart').click(function() {
DemoAudio.currentTime = 0;
});
$('#ClickStop').click(function() {
DemoAudio.currentTime = 0;
DemoAudio.pause();
$("#AudioStatus").text("Status: Stop the Audio");
});
});
</script>
</body>
</html>
위의 코드는 소스에 제공된 오디오를 재생하며 언제든지 오디오를 재생, 일시 중지, 다시 시작 및 중지할 수 있습니다. 출력을 참조하십시오.
