diff --git a/AR_Meditate/meditation.js b/AR_Meditate/meditation.js index 6e33d955..a17b4394 100644 --- a/AR_Meditate/meditation.js +++ b/AR_Meditate/meditation.js @@ -1,92 +1,105 @@ -const audioContainer=document.querySelector(".audio-container"); +document.addEventListener("DOMContentLoaded", function() { + const audioContainer = document.querySelector(".audio-container"); -const audios=[ - { - title: "Deep meditation Music", - path:"../Images/deep-music.mp3", - thumbnail:"./Images/Deep_meditation.jpg" - }, - { - title: "Krishna Flute meditation music", - path:"../Images/krishna.mp3", - thumbnail:"./Images/Krishna.jpg" - }, - { - title: "River meditation music", - path:"../Images/river-music.mp3", - thumbnail:"./Images/River.jpg" - }, - { - title: "Piano meditation music", - path:"../Images/piano-music.mp3", - thumbnail:"./Images/Piano.jpg" - }, - { - title: "Himalayas meditation music", - path:"../Images/himalaya-music.mp3", - thumbnail:"./Images/Himalayas.jpg" - } -] + const audios = [ + { + title: "Deep meditation Music", + path: "../Images/deep-music.mp3", + thumbnail: "./Images/Deep_meditation.jpg" + }, + { + title: "Krishna Flute meditation music", + path: "../Images/krishna.mp3", + thumbnail: "./Images/Krishna.jpg" + }, + { + title: "River meditation music", + path: "../Images/river-music.mp3", + thumbnail: "./Images/River.jpg" + }, + { + title: "Piano meditation music", + path: "../Images/piano-music.mp3", + thumbnail: "./Images/Piano.jpg" + }, + { + title: "Himalayas meditation music", + path: "../Images/himalaya-music.mp3", + thumbnail: "./Images/Himalayas.jpg" + } + ]; + const audioToInsert = audios.map((item, index) => { + return `
+
+ +

${item.title}

+ +
+
`; + }).join(""); + audioContainer.innerHTML = audioToInsert; -const audioToInsert = audios.map((item,index)=>{ - return `
-
- -

${item.title}

- -
-
` -}).join(""); -audioContainer.innerHTML=audioToInsert; + let currentAudio = { + isPlaying: false, + audioId: "", + audioPath: "" + }; -let currentAudio={ - isPlaying:false, - audioId:"", - audioPath:"" -}; -const playPauseBtns=document.querySelectorAll(".play-pause-btn"); -playPauseBtns.forEach(playPauseBtn=>{ - playPauseBtn.addEventListener("click",(e)=>{ - if(currentAudio.isPlaying && currentAudio.audioId === playPauseBtn.dataset.id){ // pause btn pressed - playPauseBtns.forEach((btn,index)=>{ - btn.innerHTML=``; - }); - currentAudio.audio.pause(); - currentAudio={ - isPlaying:false, - audioId:"", - audioPath:"" - }; - console.log("Hi.."); - return; - } - else if(currentAudio.isPlaying){ // new audio needs to be played, pause the current audio - playPauseBtns.forEach((btn,index)=>{ - btn.innerHTML=``; - }); - currentAudio.audio.pause(); - currentAudio={ - isPlaying:false, - audioId:"", - audioPath:"" - }; - } - // play the audio - playPauseBtn.innerHTML=''; - currentAudio.audioId = playPauseBtn.dataset.id; - currentAudio.isPlaying=true; - currentAudio.audio = new Audio(audios[playPauseBtn.dataset.id].path); - currentAudio.audio.play(); + const playPauseBtns = document.querySelectorAll(".play-pause-btn"); + playPauseBtns.forEach(playPauseBtn => { + playPauseBtn.addEventListener("click", (e) => { + if (currentAudio.isPlaying && currentAudio.audioId === playPauseBtn.dataset.id) { + playPauseBtns.forEach((btn, index) => { + btn.innerHTML = ``; + }); + currentAudio.audio.pause(); + currentAudio = { + isPlaying: false, + audioId: "", + audioPath: "" + }; + return; + } else if (currentAudio.isPlaying) { + playPauseBtns.forEach((btn, index) => { + btn.innerHTML = ``; + }); + currentAudio.audio.pause(); + currentAudio = { + isPlaying: false, + audioId: "", + audioPath: "" + }; + } + + playPauseBtn.innerHTML = ''; + currentAudio.audioId = playPauseBtn.dataset.id; + currentAudio.isPlaying = true; + currentAudio.audio = new Audio(audios[playPauseBtn.dataset.id].path); + currentAudio.audio.play(); + }); + }); + // Scroll to top functionality + const scbtn = document.querySelector("#bttbutton"); + const contentWrapper = document.querySelector(".contentWrapper"); + function scrollUp() { + if (contentWrapper.scrollTop > 100) { + scbtn.style.display = "block"; + } else { + scbtn.style.display = "none"; + } + } + + scbtn.addEventListener("click", () => { + contentWrapper.scrollTo({ + top: 0, + behavior: "smooth", + }); }); -}) + + contentWrapper.addEventListener("scroll", scrollUp); +});