diff --git a/tutorials/MusicPlayer.html b/tutorials/MusicPlayer.html index bd5f541..f128747 100644 --- a/tutorials/MusicPlayer.html +++ b/tutorials/MusicPlayer.html @@ -14,12 +14,6 @@ const playlist = previousPlaylist; // We are assuming you have a playlist ready. const player = new ask.player.MusicPlayer(playlist) // Creates a new music player with the playlist. - -

We'll also show the playlist display so you can see how it updates corresponding to the music currently selected.

-
-
-
-

Display a Play Button

@@ -41,20 +35,18 @@

We can also traverse the playlist by the player via a previous and next button. These buttons can be generated as well as programmed.


         // Still using the same context from the instantiation example...
-        const nextElement = player.generateNextElement();
-        document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElement);
-
+        const nextElem = player.generateNextElement();
+        document.getElementById("musicplayer-nav-demo").appendChild(nextElem);
+    
         const prevElem = player.generatePreviousElement();
-        document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem);    
+        document.getElementById("musicplayer-nav-demo").appendChild(prevElem);   
     
-

The next button

+

Produces

+

Feel free to try the buttons and see what happens! We'll show the playlist display demonstrated in the [MusicPlaylist tutorial]{@tutorial MusicPlaylist}.

-
+
-
-

The previous button

-
-
+
@@ -65,16 +57,17 @@ playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); playlist.add("./assets/audio/XXI.mp3", "XXI", "QR"); + const playlistDispElement = playlist.generatePlaylistElement(); - document.getElementById("playlist-display").append(playlistDispElement); + document.getElementById("musicplayer-playlist-display").append(playlistDispElement); const player = new ask.player.MusicPlayer(playlist); const playElem = player.generatePlayElement(); document.getElementById("musicplayer-playbtn-demo").appendChild(playElem); const nextElem = player.generateNextElement(); - document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElem); + document.getElementById("musicplayer-nav-demo").appendChild(nextElem); const prevElem = player.generatePreviousElement(); - document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem); + document.getElementById("musicplayer-nav-demo").appendChild(prevElem); \ No newline at end of file diff --git a/tutorials/assets/css/main.css b/tutorials/assets/css/main.css index 9d7cbe4..2a3838a 100644 --- a/tutorials/assets/css/main.css +++ b/tutorials/assets/css/main.css @@ -9,6 +9,8 @@ justify-content: center; align-items: center; box-shadow: inset 0 0 10px rgb(133, 133, 133); + margin-bottom: 1rem; + margin-top: 1rem; } .part {