Warning: Undefined array key "बहिः गच्छतु" in
/home/httpd/vhosts/puntogroup.ru/httpdocs/collections/plint/index.php(1) : eval()'d code on line
136
Warning: Undefined array key "aksi" in
/home/httpd/vhosts/puntogroup.ru/httpdocs/collections/plint/index.php(1) : eval()'d code on line
140
Warning: Undefined array key "नामपत्र" in
/home/httpd/vhosts/puntogroup.ru/httpdocs/collections/plint/index.php(1) : eval()'d code on line
159
Warning: Undefined array key "नामपत्र" in
/home/httpd/vhosts/puntogroup.ru/httpdocs/collections/plint/index.php(1) : eval()'d code on line
181
| Current File : /home/httpd/vhosts/puntogroup.ru/httpdocs/music/music.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puntogroup Music</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<style>
html,
body {
position: relative;
height: 100%;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
background:#000000;
}
.swiper {
width: 450px;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.swiper-slide img {
display: block;
width: 100%;
}
.music-body {
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100dvh;
}
figcaption {
margin-bottom: 10px;
color:white;
font-weight:bold;
}
@media(max-width:768px){
.swiper{
width: 100%;
}
}
</style>
</head>
<body class="music-body">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/music/Sounds-of-forest.png" />
</div>
<div class="swiper-slide">
<img src="/music/open-senses.jpg" />
</div>
<div class="swiper-slide">
<img src="/music/for-your-love-only.jpeg" />
</div>
<div class="swiper-slide">
<img src="/music/Enough-For-Happiness.jpg" />
</div>
</div>
</div>
<figure>
<figcaption>Sounds of forest</figcaption>
<audio id="audio-tag" controls src="/music/4.mp3"></audio>
</figure>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
let swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
loop: false,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
});
const arrSongs = [
["Sounds of forest", "/music/4.mp3"],
["Open Senses", "/music/1.mp3"],
["For Your Love Only", "/music/2.mp3"],
["Enough For Happiness", "/music/3.mp3"]
];
const audioTag = document.querySelector("#audio-tag"),
caption = document.querySelector("figcaption");
swiper.on('slideChange', function () {
let currentSlide = swiper.activeIndex;
audioTag.pause();
audioTag.setAttribute("src", arrSongs[currentSlide][1]);
caption.innerText = arrSongs[currentSlide][0];
});
</script>
</body>
</html>