Hello I want to create a music stream website (mp3) by using google drive as a database . I embed mp3 from google drive and It’s work OK. but I want to make auto play when 1st song is complete 2nd song is auto start. first two song is ok one complete and then another one start but there is an error when 2nd song is complete and 3rd song not start which is shown (failed to reload source:403 Forbidden error) how can i solve it? I am just beginner level in web-development and i only know front-end. you can show my code in here.
https://jerrym2channel.infinityfreeapp.com/min.html
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>