HOWTO · jQuery
jQuery Play オーディオ
このチュートリアルでは、jQuery を使用してオーディオを再生する方法を示します。
このチュートリアルでは、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>
上記のコードは、ソースで指定されたオーディオを再生し、いつでもオーディオを再生、一時停止、再開、停止できます。 出力を参照してください。
