diff --git a/assets/css/audiobook.css b/assets/css/audiobook.css
index 5c863bf2..0aed52b2 100644
--- a/assets/css/audiobook.css
+++ b/assets/css/audiobook.css
@@ -60,5 +60,21 @@
height: 70px;
}
+#nyan-btn2{
+ width: 70px;
+ height: 70px;
+
+}
+#nyan-btn3{
+ width: 70px;
+ height: 70px;
+
+}
+#nyan-btn4{
+ width: 70px;
+ height: 70px;
+
+}
+
-
\ No newline at end of file
+
diff --git a/assets/css/style.css b/assets/css/style.css
index 0420bb90..594b70f0 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1386,7 +1386,52 @@ background-image: linear-gradient(190deg,rgb(95,79,57),rgb(127,106,77), rgb(191,
box-shadow: 0 0 30px #fff;
cursor: pointer;
transform: scale(1.1);
+
+}
+#nyan-btn2{
+ border-radius: 200px;
+ background-color: #fff;
+ border: 1px solid #ffffff;
+}
+#nyan-btn2:hover{
+ border-radius: 200px;
+ background-color: #fff;
+ border: 1px solid #fff;
+ box-shadow: 0 0 30px #fff;
+ cursor: pointer;
+ transform: scale(1.1);
+
+}
+#nyan-btn3{
+ border-radius: 200px;
+ background-color: #fff;
+ border: 1px solid #ffffff;
+}
+#nyan-btn3:hover{
+ border-radius: 200px;
+ background-color: #fff;
+ border: 1px solid #fff;
+ box-shadow: 0 0 30px #fff;
+ cursor: pointer;
+ transform: scale(1.1);
+
+}
+#nyan-btn4{
+ border-radius: 200px;
+ background-color: #fff;
+ border: 1px solid #ffffff;
+}
+#nyan-btn4:hover{
+ border-radius: 200px;
+ background-color: #fff;
+ border: 1px solid #fff;
+ box-shadow: 0 0 30px #fff;
+ cursor: pointer;
+ transform: scale(1.1);
+
}
+
+
.books-audios{
display: flex;
flex-direction: column;
@@ -3076,4 +3121,4 @@ select {
background: #a56902;
border-color: #ffc96b;
text-decoration: none;
- }
\ No newline at end of file
+ }
diff --git a/assets/js/audiobook.js b/assets/js/audiobook.js
index 21b0dade..6cbc1800 100644
--- a/assets/js/audiobook.js
+++ b/assets/js/audiobook.js
@@ -41,4 +41,143 @@ if(nyanBtn){
playPause(nyan);
progress(nyanBtn, nyan);
});
-}
\ No newline at end of file
+}
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//for book2
+var nyan2 = document.getElementById("nyan2");
+var nyanBtn2 = document.getElementById("nyan-btn2");
+
+nyanBtn2.onclick = function(){
+ if (nyan2.paused && nyan2.currentTime >= 0 && !nyan2.ended) {
+ nyan2.play();
+ nyanBtn2.src = "media/pause.webp";
+}else {
+ nyan2.pause();
+ nyanBtn2.src ="media/play.webp"
+}
+}
+
+function reset(btn, song) {
+ if (btn.classList.contains('playing')) {
+ btn.classList.toggle('playing');
+ }
+ song.pause();
+ song.currentTime = 0;
+}
+
+function progress(btn, song) {
+ setTimeout(function () {
+ var end = song.duration;
+ var current = song.currentTime;
+ var percent = current / (end / 100);
+ //check if song is at the end
+ if (current == end) {
+ reset(btn, song);
+ }
+ //set inset box shadow
+ btn.style.boxShadow = "inset " + btn.offsetWidth * (percent / 100) + "px 0px 0px 0px rgba(0,0,0,0.125)"
+ //call function again
+ progress(btn, song);
+ }, 133.7);
+}
+
+if(nyanBtn2){
+ nyanBtn2.addEventListener('click', function () {
+ nyanBtn2.classList.toggle('playing');
+ playPause(nyan2);
+ progress(nyanBtn2, nyan2);
+ });
+}
+//////////////////////////////////////////////////////////////////////////////////////
+//for book 3
+var nyan3 = document.getElementById("nyan3");
+var nyanBtn3 = document.getElementById("nyan-btn3");
+
+nyanBtn3.onclick = function(){
+ if (nyan3.paused && nyan3.currentTime >= 0 && !nyan3.ended) {
+ nyan3.play();
+ nyanBtn3.src = "media/pause.webp";
+}else {
+ nyan3.pause();
+ nyanBtn3.src ="media/play.webp"
+}
+}
+
+function reset(btn, song) {
+ if (btn.classList.contains('playing')) {
+ btn.classList.toggle('playing');
+ }
+ song.pause();
+ song.currentTime = 0;
+}
+
+function progress(btn, song) {
+ setTimeout(function () {
+ var end = song.duration;
+ var current = song.currentTime;
+ var percent = current / (end / 100);
+ //check if song is at the end
+ if (current == end) {
+ reset(btn, song);
+ }
+ //set inset box shadow
+ btn.style.boxShadow = "inset " + btn.offsetWidth * (percent / 100) + "px 0px 0px 0px rgba(0,0,0,0.125)"
+ //call function again
+ progress(btn, song);
+ }, 133.7);
+}
+
+if(nyanBtn3){
+ nyanBtn3.addEventListener('click', function () {
+ nyanBtn3.classList.toggle('playing');
+ playPause(nyan3);
+ progress(nyanBtn3, nyan3);
+ });
+}
+//////////////////////////////////////////////////////////////
+//for book4
+var nyan4 = document.getElementById("nyan4");
+var nyanBtn4 = document.getElementById("nyan-btn4");
+
+nyanBtn4.onclick = function(){
+ if (nyan4.paused && nyan4.currentTime >= 0 && !nyan4.ended) {
+ nyan4.play();
+ nyanBtn4.src = "media/pause.webp";
+}else {
+ nyan4.pause();
+ nyanBtn4.src ="media/play.webp"
+}
+}
+
+function reset(btn, song) {
+ if (btn.classList.contains('playing')) {
+ btn.classList.toggle('playing');
+ }
+ song.pause();
+ song.currentTime = 0;
+}
+
+function progress(btn, song) {
+ setTimeout(function () {
+ var end = song.duration;
+ var current = song.currentTime;
+ var percent = current / (end / 100);
+ //check if song is at the end
+ if (current == end) {
+ reset(btn, song);
+ }
+ //set inset box shadow
+ btn.style.boxShadow = "inset " + btn.offsetWidth * (percent / 100) + "px 0px 0px 0px rgba(0,0,0,0.125)"
+ //call function again
+ progress(btn, song);
+ }, 133.7);
+}
+
+if(nyanBtn4){
+ nyanBtn4.addEventListener('click', function () {
+ nyanBtn4.classList.toggle('playing');
+ playPause(nyan4);
+ progress(nyanBtn4, nyan4);
+ });
+}
+
diff --git a/index.html b/index.html
index c258eedd..fc2b7c7f 100644
--- a/index.html
+++ b/index.html
@@ -547,9 +547,9 @@ Listen to Audiobooks
-
+