jQuery Play オーディオ

Sheeraz Gul 2024年2月15日
jQuery Play オーディオ

このチュートリアルでは、jQuery を使用してオーディオを再生する方法を示します。

jQuery を使用してオーディオを再生する

jQuery にはオーディオを再生する機能が組み込まれていませんが、jQuery で HTML の audio タグを使用して、オーディオ再生用のシステムを作成できます。 jQueryを使用してオーディオを再生したいときはいつでも、audioタグのcanplayイベントを操作して使用できます。

jQuery を使用して、オーディオの再生、一時停止、再起動、および停止オプションを実装できます。 jQueryを使ってオーディオの再生、一時停止、再開、停止ができるシステムを作ってみましょう。

以下の手順を参照してください。

jQuery を使用して、上記の手順に基づいた例を実装してみましょう。

HTML
 htmlCopy<!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>

上記のコードは、ソースで指定されたオーディオを再生し、いつでもオーディオを再生、一時停止、再開、停止できます。 出力を参照してください。

jQuery Play Audio

著者: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

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