feat: add stop music button to stop playing song at anytime

* Added the pause button(visual only)

* Renamed pause to stop

* Added enablejsapi parameter to the youtube links

* Added stop button feature (visual and function)

* Finishing touches for the stop music feature

* Extended stop button feature to individual songs

index.html

@@ -63,7 +63,12 @@ <h1 class="heading">A very Mogul Christmas</h1>
                <i id="random-btn-meta" class="fa fa-random fa-2x"></i>
                <div id="random-text-container">
                   <button class="random" id="random-btn-text" onClick="shuffleSongs();">Play Random Song</button>
-               </div>  
+               </div>
+               <!-- Stop button -->
+               <div id="random-text-container">
+                  <button class="stop-btn-style" id="stop-btn" onClick="stopVideo()">Stop</button>
+               </div>
+               <!-- stop button end -->
             </div>
       </div>
       <iframe id="embed" src="https://www.youtube.com/embed/TtY9eRayseg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

index.js

@@ -33,8 +33,11 @@ const embed = document.getElementById("embed");
 const newTabGithub = document.querySelector(".social");
 const toggle = document.querySelector(".round");
 const slider = document.querySelector(".slider");
+
+
 toggle.addEventListener("click", modeSwitch);
 
+
 // Darkmode/Lightmode + Making songs play when clicked
 
 let isLight = true;
@@ -58,11 +61,15 @@ Object.keys(songs).map((song_title) => {
   const startTime = songs[song_title].start;
   const endTime = songs[song_title].end;
   const outerElem = document.createElement("p");
+
+  //stop button for individual songs
+  outerElem.onclick=()=>revealStopButton();
+
   const link = document.createElement("a");
   link.innerHTML = song_title;
   link.style = "cursor: pointer";
   link.onclick = () => {
-    embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${startTime}&autoplay=1&end=${endTime}`;
+    embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${startTime}&autoplay=1&end=${endTime}&enablejsapi=1`;
     console.log(
       "If you don't know this song, we suggest you go to the lyrics page. You can play the song from that page too :)"
     );
@@ -76,12 +83,13 @@ Object.keys(songs).map((song_title) => {
 
 // randomly shuffle a song from main page's songs
 function shuffleSongs() {
+  revealStopButton();
   var properties = Object.getOwnPropertyNames(songs);
   var ranNum = Math.floor(Math.random() * (properties.length - 1));
   var songName = properties[ranNum];
   var song = songs[songName];
   console.log(songs[songName]);
-  embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${song.start}&autoplay=1&end=${song.end}`;
+  embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${song.start}&autoplay=1&end=${song.end}&enablejsapi=1`;
 }
 
 // Open GitHub repo in a new window if user clicks GitHub icon on project website
@@ -92,3 +100,17 @@ newTabGithub.addEventListener("click", () => {
     "resizable=yes, scroll=yes, location=1, titlebar=yes, width=800, height=900, top=10, left=10"
   );
 });
+
+//stop-button-feature
+const stopButton=document.querySelector("#stop-btn"); //stop button
+
+//make the stop button visible when "play random song button is clicked"
+function revealStopButton(){
+  stopButton.style.display='block';
+}
+
+//stop button function
+function stopVideo(){
+  embed.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}','*');
+  stopButton.style.display='none';
+}

styles.css

@@ -197,6 +197,25 @@ a:active {
   margin-top: 1rem;
 }
 
+.stop-btn-style{
+  display:none;
+  background-image: radial-gradient(
+    circle farthest-corner at 92.3% 71.5%,
+    rgb(255, 85, 0) 0%,
+    rgb(173, 0, 0) 90%
+  );
+  color: white;
+  outline: none;
+  border: none;
+  font-family: "Handlee", cursive;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  transition: all 0.2s ease-in-out;
+  margin-top: 1rem;
+}
+
 .suggest {
   background-color: #f4d03f;
   background-image: linear-gradient(132deg, #f4d03f 0%, #16a085 100%);