var song_westlife = {
"01": {
title: "အဆင်ပြေဖို့ခက်တယ်",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "3:32",
track: "http://docs.google.com/uc?export=open&id=1C37RidYgEeuPG2EJKwCuWffjN_XTAunB"
},
"02": {
title: "ခွင့်လွှတ်ပေးပါ",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "3:00",
track: "http://docs.google.com/uc?export=open&id=1Bb8CEl-lu4ufKEYXeYdxElrbG6fti3U7"
},
"03": {
title: "ရှိပါစေတော့",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "3:17",
track: "http://docs.google.com/uc?export=open&id=10IJYpMyrrI_nQMH5fMdhClNbZ0ra-T7R",
},
"04": {
title: "ပြန်ဆုံခွင့်လေး",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "3:29",
track: "http://docs.google.com/uc?export=open&id=1twJbIPnYwz3cWJvzvGPVTVJBwOzQ99DF",
},
"05": {
title: "နင်ပျော်နေပါစေ",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "4:28",
track: "http://docs.google.com/uc?export=open&id=1MKyyZoyafrNCZuJjOumpDJJYJpm8KtgG",
},
"06": {
title: "ပြန်လိုချင်တယ်",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "3:03",
track: "http://docs.google.com/uc?export=open&id=16Ow-wqkr1i1X9TqhHtu5VLG8YiSPUSxG",
},
"07": {
title: "နင့်ဘေးနားအရိပ်လိုငါ",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "5:17",
track: "http://docs.google.com/uc?export=open&id=1C0ziMtRrP_3KG7P48iQQ-tX8S6Sh-hD_",
},
"08": {
title: "မခေါ်ရက်ဘူး",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "3:38",
track: "http://docs.google.com/uc?export=open&id=1OZ1sw5snOXSUvEnmbTYGWV9ApCGql9fd",
},
"09": {
title: "တန်ဖိုးထားပြီးချစ်မှာ",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "2:52",
track: "http://docs.google.com/uc?export=open&id=1dJkIeHFvuGYs7lTkiGH8owGguRubkknR",
},
"010": {
title: "နင်ထွက်သွားခဲ့ဟိုးအဝေး",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "3:54",
track: "http://docs.google.com/uc?export=open&id=1hNlZuMUnhaea5g5IcXd6-KsJjwBlv0XF",
},
"011": {
title: "for you",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "3:18",
track: "http://docs.google.com/uc?export=open&id=143I45iZ4nBAGdSnmf6D5mg43oDpjIgHH",
},
"012": {
title: "အချစ်တွေအပြည့်ရှိတယ်",
artist: "Min Khant",
genre: "Myanmar songs",
duration: "4:05",
track: "http://docs.google.com/uc?export=open&id=15rMTg8IuO2COyEez-0RX5RNE4Tps7K8m",
},
"013": {
title: "ပြန်ချစ်ကြမယ်",
artist: "Min Khant & Ko Htet",
genre: "Myanmar songs",
duration: "3:32",
track: "http://docs.google.com/uc?export=open&id=1XHQYW1UGRqYYscjgo1aKmpMjTxpFV-gw",
},
"014": {
title: "မင်းစိတ်ကြိုက် ",
artist: "Min Khant & Ko Htet",
genre: "Myanmar songs",
duration: "3:57",
track: "http://docs.google.com/uc?export=open&id=1JlSAPzZQpJ0I7CMcvVv1maBjQQB2uvCA",
}
}
<!DOCTYPE html>
<html>
<head>
<title>Westlife</title>
<link href="img/M2.png" rel="icon" type="image/png" >
<link href="css/westlife.css" rel="stylesheet" type="text/css" >
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark " id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">JerryM2</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-expanded="false" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto ">
<li class="nav-item">
<a class="nav-link" href="index.html#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#songs">songs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#contact">Contact</a>
</li>
</ul>
<button class="btn p-2 my-lg-0 my-2">Sign in</button>
</div>
</nav>
<div class="body_content">
<div class="title">
<span></span>
<span>TiTle</span>
<span>Artists</span>
<span>Genre</span>
<span>Duration</span>
<span>
<li class="autoplay_btn">
<label>
<h5>AutoPlay</h5>
<!-- <input type="checkbox" > -->
<input type="checkbox" name="changemode" id="toggle" class="form-check-input"/>
<span style="width: 65px;"></span>
</label>
</li>
</span>
<span></span>
</div>
<div class="list">
</div>
</div>
</div>
</div>
<!-- jQuery CDN link -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>
<script src="js/minkhant.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var list = $(".list");
var list_block;
for (var key in song_westlife){
list_block = $('<div class="list_block"></div>');
list.append(list_block);
list_block.append('<span class="play_btn"><img src="img/play.svg" class="play_icon"><img src="img/pause.svg" class="pause_icon"></span>');
list_block.append('<span class="song_title">'+ song_westlife[key].title+'</span>');
list_block.append('<span class="song_artist">'+ song_westlife[key].artist+'</span>');
list_block.append('<span class="song_genre">'+ song_westlife[key].genre+'</span>');
list_block.append('<span class="song_duration">'+ song_westlife[key].duration+'</span>');
list_block.append('<span class="beat_animation"><ul><li></li><li></li><li></li><li></li><li></li></ul></span>');
list_block.append('<span class="track"><audio id="audio" controls><source src="'+song_westlife[key].track+'" type="audio/mp3"></audio></span>');
list_block.append('<span class="download_btn"><a target="_blank" href="'+song_westlife[key].track+'"><img src="img/download.svg"></a></span>');
}
// Play functionalily
$(".list_block .play_btn .play_icon").on('click',function(current){
$(this).parent().find(".play_icon").css("display","none");
$(this).parent().find(".pause_icon").css("display","inline-block");
$(".play_icon").not(this).parent().find(".pause_icon").css("display","none");
$(".play_icon").not(this).parent().find(".play_icon").css("display","inline-block");
// ADD/Remove class
$(this).parent().parent().addClass("isPlaying");
$(".play_icon").not(this).parent().parent().removeClass("isPlaying");
// Beat animation Play
$(this).parent().parent().find(".beat_animation li").css("animation-play-state","running").css("opacity","1");
$(".play_icon").not(this).parent().parent().find(".beat_animation li").css("animation-play-state","paused")
.css("opacity",".1");
// pause current audio track when play next/prev audio tack
$("audio").each(function(e){
if(e !== current.currentTarget){
$(this)[0].pause();
}
});
// play current audio track
$(this).parent().parent().find(".track audio")[0].play();
});
// pause functionalily
$(".list_block .play_btn .pause_icon").on('click',function(){
// hide pause icon
$(this).parent().find(".pause_icon").css("display","none");
// show play icon
$(this).parent().find(".play_icon").css("display","inline-block");
// beat animation pause
$(this).parent().parent().find(".beat_animation li").css("animation-play-state","paused");
// pause currnt audio track
$(this).parent().parent().find(".track audio")[0].pause();
});
// auto play functionalily
$(".autoplay_btn label input").on('change',function(){
if ($(this).is(":checked")){
$("audio").on('ended',function(){
$(this).parent().parent().next().find("audio")[0].play();
$(".list_block").removeClass("isPlaying");
$(this).parent().parent().next().addClass("isPlaying");
$(this).parent().parent().next().find(".beat_animation li").css("animation-play-state","running").css("opacity","1");
$(this).parent().parent().next().find(".pause_icon").css("display","none");
$(this).parent().parent().next().find(".play_icon").css("display","inline-block");
});
} else {
$("audio").on('ended',function(){
$(".beat_animation li").css("animation-play-state","paused").css("opacity",".1");
$(".pause_icon").css("display","none");
$(".play_icon").css("display","inline-block");
});
}
}).change();
});
</script>
</body>
</html>