jQuery Audio abspielen

  2. How-To's
  3. jQuery-Anleitungen
  4. jQuery Audio abspielen
Sheeraz Gul 15 Februar 2024
jQuery jQuery Audio
jQuery Audio abspielen

Dieses Tutorial zeigt, wie Sie Audio mit jQuery abspielen.

Spielen Sie Audio mit jQuery ab

jQuery bietet keine integrierte Funktionalität zum Abspielen von Audio, aber wir können das HTML-Tag audio mit jQuery verwenden, um ein System zum Abspielen von Audio zu erstellen. Wir können das canplay-Ereignis des audio-Tags manipulieren, um es immer dann zu verwenden, wenn wir Audio mit jQuery abspielen möchten.

Mit jQuery können wir Wiedergabe-, Pausen-, Neustart- und Stoppoptionen für Audio implementieren. Lassen Sie uns ein System erstellen, das Audio mit jQuery abspielen, anhalten, neu starten und stoppen kann.

Siehe die folgenden Schritte:

  • Erstens enthält der HTML-Teil nur Divs und Schaltflächen, nicht das Audioelement.
  • Das Audioelement wird von jQuery erstellt, wenn das Dokument fertig ist.
  • Sobald das Audioelement erstellt ist, legen wir sein Quellattribut fest.
  • Legen Sie den Wert für das Ereignis beendet fest. Wir ließen es erneut abspielen, wenn die Audiowiedergabe beendet war.
  • Wir implementieren Aufgaben für die vier Schaltflächen Play, Pause, Restart und Stop.
  • Für die Play- und Pause-Buttons können wir die eingebauten Methoden play() und pause() verwenden.
  • Für den Restart setzen wir die currentTime für das Audio auf 0. Für den Stop setzen wir die currentTime für das Audio auf 0 und verwenden dann die Methode pause().
  • Dann verwenden wir das Ereignis canplay, um die Dauer, Quelle und den Status des Audios anzuzeigen.
  • Schließlich zeigen wir die Audio-Spielzeit mit dem Ereignis Zeitaktualisierung an.

Versuchen wir, ein Beispiel basierend auf den obigen Schritten mit jQuery zu implementieren:

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

Der obige Code spielt das in der Quelle angegebene Audio ab, und wir können das Audio jederzeit abspielen, anhalten, neu starten und stoppen. Siehe die Ausgabe:

jQuery Audio abspielen

Autor: 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