jeudi 13 août 2015

display the song name jquery

hello i have a list of songs i play in my website,i want to be able to display the current song name playing ,i have this code which have play ,pause,next,back,which works fine,but i need to edit it to display the song name,thanks for the help

     <body>
                <a class="btn" href="#" id="play" style="background-color:black">Play </a> 

                <a  class="btn"  href="#"  style="background-color:black" id="pause">Pause</a>
                <br>

                <a  class="btn"  href="#" style="background-color:black" id="skip">Next </a> 

                <a  class="btn"  href="#"  style="background-color:black" id="previous">Back</a>

 <audio    preload="metadata" tabindex="0" controls autoplay type="audio/mpeg"   class="audio-player" src="dz.mp3"></audio>

          <audio  class="audio-player" src="song2.mp3"></audio>

        <audio  class="audio-player" src="song3.mp3"></audio>

            <body>

and this is my script

<script>
var x = $(".audio-player").length;
var z = 0;
var songName = $("audio[name]")

$("#play").click(function(){
    $(".audio-player")[z].play();
    $("#song-name").text(songName);
    $("#song-name").show();
})
$("#pause").click(function(){
    $(".audio-player")[z].pause();
    $("#song-name").hide();
})
$("#skip").click(function(){
    $(".audio-player")[z].pause();
    z++;
    if (z >= x) z = 0;
    $(".audio-player")[z].play();
    $(".audio-player")[z].currentTime = 0;
    $("#song-name").text(songName);
})




$("#previous").click(function(){
    $(".audio-player")[z].pause();
    z=z-1;
    if (z >= x) z = 0;
    $(".audio-player")[z].play();
    $(".audio-player")[z].currentTime = 0;
    $("#song-name").text(songName);
})
</Script>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire