jQuery Play オーディオ
Sheeraz Gul
2024年2月15日
このチュートリアルでは、jQuery を使用してオーディオを再生する方法を示します。
jQuery を使用してオーディオを再生する
jQuery にはオーディオを再生する機能が組み込まれていませんが、jQuery で HTML の audio タグを使用して、オーディオ再生用のシステムを作成できます。 jQueryを使用してオーディオを再生したいときはいつでも、audioタグのcanplayイベントを操作して使用できます。
jQuery を使用して、オーディオの再生、一時停止、再起動、および停止オプションを実装できます。 jQueryを使ってオーディオの再生、一時停止、再開、停止ができるシステムを作ってみましょう。
以下の手順を参照してください。
-
まず、HTML パーツには、オーディオ要素ではなく、div とボタンのみが含まれます。
-
ドキュメントの準備が整うと、オーディオ要素が jQuery によって作成されます。
-
audio 要素が作成されたら、その source 属性を設定します。
-
endedイベントの値を設定します。 オーディオの再生が終了したら、もう一度再生するようにしました。 -
Play、Pause、Restart、Stop の 4つのボタンのタスクを実装します。
-
再生ボタンと一時停止ボタンには、組み込みの
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