HTML5-Audio-tag mit JQuery audio

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#play-bt").click(function(){
                    $(".audio-player")[0].play();
                    $(".message").text("Music started");
                })

                $("#pause-bt").click(function(){
                    $("#audio-player")[0].pause();
                    $(".message").text("Music paused");
                })

                $("#stop-bt").click(function(){
                    $(".audio-player")[0].pause();
                    $(".audio-player")[0].currentTime = 0;
                    $(".message").text("Music Stopped");
                })
            })
        </script>
    </head>
    <body>

        <audio class ="audio-player" name="" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio>
        <audio class ="audio-player" name="" src="04-zedd-stars_come_out_(terravita_remix)" ></audio>

                <div class ="message"></div>
            <a id = "play-bt" href="#">Play music</a> | <a id ="pause-bt" href="#">Pause music</a> | <a id ="stop-bt" href="#">Stop music</a> 

    </body>
</html>

Dieser code spielt nur die erste audio-tag, wie werde ich in der Lage zu spielen das nächste Lied/track/audio-tag?

  • Sie sind mit $(".audio-player")[0], dass wird der 1. tag. Was für Probleme hatten Sie mit bekommen, die anderen?
  • Oh ich sehe das ist, was Ihr für btw darf ich Fragen, Woher Jquery habe diese Methode? .play(); ?
  • Das ist keine jQuery-Methode. Es ist eine native DOM-Methode. Die [0] bekommt das native DOM-element aus dem jQuery-Objekt.
  • wo kann ich die Bibliothek der DOM für audio-Elemente?
  • developer.mozilla.org/en/Using_HTML5_audio_and_video und developer.mozilla.org/en/DOM/HTMLMediaElement
InformationsquelleAutor user962206 | 2012-07-26
  1. 3

    Alle audio-Elemente geladen sind, in einem array, die Sie zugreifen können, mithilfe der Methoden, die Sie haben. Wenn Sie eine neue next track-Funktion können Sie durch alle Elemente, etwa so:

    $(document).ready(function(){

    var x = $(".audio-player").length; //Count total audio players
    var z = 0; //Start at first audio player

    $("#play-bt").click(function(){
        $(".audio-player")[z].play();
        $(".message").text("Music started");
    })
    $("#pause-bt").click(function(){
        $("#audio-player")[z].pause();
        $(".message").text("Music paused");
    })
    $("#stop-bt").click(function(){
        $(".audio-player")[z].pause();
        $(".audio-player")[z].currentTime = 0;
        $(".message").text("Music Stopped");
    })
    $("#next-bt").click(function(){
        $(".audio-player")[z].pause();
        z++;
        if (z >= x) z = 0;
        $(".audio-player")[z].play();
        $(".message").text("Track: "+z);
    })
})​

    Es findet den Betrag des audio-Elemente mit jquery .Länge, und nach erreichen des letzten Titels beginnt es von der ersten. Hier ist ein Beispiel -> http://jsfiddle.net/8GycB/46/

    • Die audio-Elemente tatsächlich in ein jQuery-Objekt (die vorgibt, ein array).
    • Ja sorry, ein Objekt
    InformationsquelleAutor reekogi
Schreibe einen Kommentar