jQuery를 재생 오디오
Sheeraz Gul
2023년6월21일
이 튜토리얼은 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>
위의 코드는 소스에 제공된 오디오를 재생하며 언제든지 오디오를 재생, 일시 중지, 다시 시작 및 중지할 수 있습니다. 출력을 참조하십시오.
작가: Sheeraz Gul
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook