Audio player with playlist

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Audio Player with Playlist</title>

.AudioPlayerLayout {
    background-color: #fff;
    width: 90%;
    margin: 30px ;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 7px #ccc;
}

.AudioPlayer audio {
    width: 100%;
}

.AudioList ul {
    text-align: right;
    list-style: none;
    display: block;
    padding: 0px 10px;
    direction: rtl;
}

.AudioList ul li {
    background: #f2f2f2a6;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0px;
    cursor: pointer;
}

span.ListTime {
    float: left;
    width: 52px;
    text-align: left;
    transition-duration: 0.5s;
    padding: 0 0 0 10px;

}

a.ListItemDl {
    float: left;
    color: cadetblue;
}

a.ListItemDl :hover {
    cursor: pointer;
    color: #000;
    transition-duration: 0.5s;

}

.AudioPlayerBoard p {
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    margin: 10px;
}

.arrow {
    text-align: center;
    color: #999;
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 10px;
}

.arrow i {
    background: #f7f7f77d;
    padding: 5px 10px;
    border-radius: 10px;
}

.arrow i:hover{
    background: #ccc;
    padding: 5px 10px;
    transition-duration: 0.5s;
    color: #fff;
    cursor: pointer;
}

.AudioList ul :hover {
    background: #dbf9ee;
}

span.ListTime i {
    font-size: 11px;
    color: #7d7d7d;
    padding-right: 3px;
}
  </style>

</head>
<body>

<div class="AudioPlayerLayout">
    <div class="AudioPlayerBoard">
        <p>عنوان فایل صوتی</p>
        <div class="arrow">
            <i class="fa fa-long-arrow-left"></i>

<div class="AudioPlayer">
    <audio id='AudioDiv' controls controlsList='nodownload'><source src=''type='audio/mpeg'>Your browser does not support the audio element.</audio>

</div>

<div class="AudioList">
    <ul>
    </ul>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  
  <script>
  // Yashar Bahadjrooy

var PlayListTemp = '';
var PlayerEpisodeTemp = '0';

//Time per Secend
var PlaylistTest =
    [
        {
            Url: "http://dl.nex1music.ir/1397/10/03/Mohsen%20Ebrahimzadeh%20-%20Gole%20Poone%20[128].mp3?time=1546196521&filename=/1397/10/03/Mohsen%20Ebrahimzadeh%20-%20Gole%20Poone%20[128].mp3",
            Title: "محسن ابراهیم زاده گل پونه",
            Time: "1800",
            Episode: "1",
            Download: "true"
        },
        {
            Url: "http://dl.nex1music.ir/1397/10/01/Hojat%20Ashrafzadeh%20-%20Asheghe%20Toam%20[128].mp3?time=1546198607&filename=/1397/10/01/Hojat%20Ashrafzadeh%20-%20Asheghe%20Toam%20[128].mp3",
            Title: "حجت اشرف زاده عاشق توام",
            Time: "4214",
            Episode: "2",
            Download: "false"
        },
        {
            Url: "http://dl.nex1music.ir/1397/10/01/Reza%20Shiri%20-%20Age%20Bazam%20Biay%20(Ft%20Saeed%20Sam)%20[128].mp3?time=1546198598&filename=/1397/10/01/Reza%20Shiri%20-%20Age%20Bazam%20Biay%20(Ft%20Saeed%20Sam)%20[128].mp3",
            Title: "رضا شیری اگه بازم بیای",
            Time: "7130",
            Episode: "3",
            Download: "true"
        },
    ]
PlayListTemp = PlaylistTest;

$(document).ready(function () {
    ChekArrow();
    AudioPlayerList(1);

$('.AudioList ul li').click(function () {
        PlaySound($(this).attr('id'));

});

$('.arrow .fa-long-arrow-left').click(function () {
        PlaySound(PlayerEpisodeTemp - 1);

});

$('.arrow .fa-long-arrow-right').click(function () {
        PlaySound(PlayerEpisodeTemp*1 + 1);
    });

});

function log(x) {
    console.log("--> " + x)
}

function AudioPlayerList(x) {
    var ListCash='';
    if (x == 1) {
        PlayListTemp = PlaylistTest;
    }

if (PlayListTemp.length == 0) {
        $('.arrow .fa-long-arrow-left').hide();
        $('.arrow .fa-long-arrow-right').hide();

}

for (var z = 0; z < PlayListTemp.length; z++) {

ListCash+="<li id='"+z+"'><span class='ListTitle'>"+PlaylistTest[z].Episode+" "+PlaylistTest[z].Title+"</span><span class='ListTime'>"+Math.floor(PlaylistTest[z].Time/60)+"<i class='fa fa-clock-o'></i>"+"</span>"+DlCheck(z)+"<i class='fa fa-download'></i></a></li>";
    }
    $('.AudioList ul').html(ListCash);
    ChekArrow();
}

function PlaySound(x) {
    PlayerEpisodeTemp=x;
    ChekArrow()
    $(".AudioPlayerBoard p").html($("#"+x).find('.ListTitle').html());

$(".AudioPlayer").slideUp();
    $(".AudioPlayer").html();
    $(".AudioPlayer ").html("<audio id='AudioDiv' controls controlsList='nodownload'><source src='"+PlayListTemp[x].Url+"'type='audio/mpeg'>Your browser does not support the audio element.</audio>")
    $(".AudioPlayer").slideDown();

}

function ChekArrow() {
    var Len= PlayListTemp.length;
    if (PlayerEpisodeTemp >= Len-1) {
        $('.arrow .fa-long-arrow-right').hide();
        $('.arrow .fa-long-arrow-left').show();

} else if (PlayerEpisodeTemp == "0") {
        $('.arrow .fa-long-arrow-left').hide();
        $('.arrow .fa-long-arrow-right').show();

} else {
        $('.arrow .fa-long-arrow-left').show();
        $('.arrow .fa-long-arrow-right').show();
    }
}
  
  
  </script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Audio player with playlist