title
Build a Music Player | Vanilla JavaScript

description
Let's create a music player with HTML, CSS, JavaScript, and the HTML5 Audio API Code: https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player 20 Vanilla Projects Course: https://www.udemy.com/course/web-projects-with-vanilla-javascript/?referralCode=F9B7C7FED834F91ADE75 $11.99 Promo(5 Days Only): APR5DAY Timestamps: Intro - 0:00 HTML - 1:51 CSS - 5:27 JavaScript - 23:10

detail
{'title': 'Build a Music Player | Vanilla JavaScript', 'heatmap': [{'end': 159.387, 'start': 130.041, 'weight': 0.903}, {'end': 291.787, 'start': 261.692, 'weight': 0.837}, {'end': 346.989, 'start': 310.364, 'weight': 0.924}, {'end': 849.971, 'start': 792.331, 'weight': 0.889}, {'end': 1140.015, 'start': 1110.486, 'weight': 0.743}, {'end': 1402.644, 'start': 1376.138, 'weight': 0.762}, {'end': 1670.488, 'start': 1639.782, 'weight': 0.859}, {'end': 1776.594, 'start': 1716.888, 'weight': 0.806}, {'end': 2196.753, 'start': 2167.238, 'weight': 0.817}], 'summary': 'Tutorial series on udemy offers 20 web projects with vanilla javascript, including developing a music player using html, css, and javascript, and creating functionalities such as play, pause, previous, and next, as well as styling web page components using flexbox and css.', 'chapters': [{'end': 40.303, 'segs': [{'end': 40.303, 'src': 'embed', 'start': 7.13, 'weight': 0, 'content': [{'end': 9.251, 'text': "What's going on, guys? So it's Saturday morning.", 'start': 7.13, 'duration': 2.121}, {'end': 14.272, 'text': 'I wanted to do a small project using HTML, CSS and JavaScript.', 'start': 9.291, 'duration': 4.981}, {'end': 18.213, 'text': "So we're going to be creating this music player, which I'll demo for you in a second.", 'start': 14.312, 'duration': 3.901}, {'end': 22.654, 'text': 'But this is actually from my 20 Web projects with Vanilla JavaScript course on Udemy.', 'start': 18.253, 'duration': 4.401}, {'end': 30.077, 'text': "So if you're interested in doing 19 more of these projects, I'll have a link with a promo code that is much less than this.", 'start': 23.035, 'duration': 7.042}, {'end': 34.358, 'text': 'I also have the GitHub repo in the description as well.', 'start': 30.797, 'duration': 3.561}, {'end': 36.459, 'text': "So we're going to build it from scratch.", 'start': 35.018, 'duration': 1.441}, {'end': 40.303, 'text': "We're actually going to be doing quite a bit of CSS to give it this styling.", 'start': 36.68, 'duration': 3.623}], 'summary': 'Creating a music player using html, css, and javascript from a course with 20 projects on udemy.', 'duration': 33.173, 'max_score': 7.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw7130.jpg'}], 'start': 7.13, 'title': 'Creating a music player', 'summary': 'Covers the development of a music player using html, css, and javascript, offering 20 web projects with vanilla javascript on udemy, with a promo code available for a discounted price.', 'chapters': [{'end': 40.303, 'start': 7.13, 'title': 'Music player project demo', 'summary': 'Discusses building a music player using html, css, and javascript, as part of a course offering 20 web projects with vanilla javascript on udemy, with a promo code available for a discounted price.', 'duration': 33.173, 'highlights': ['The chapter focuses on creating a music player using HTML, CSS, and JavaScript.', 'Promo code available for a discounted price for a course offering 20 web projects with Vanilla JavaScript on Udemy.', 'GitHub repository link provided in the description for further reference.']}], 'duration': 33.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw7130.jpg', 'highlights': ['Promo code available for a discounted price for a course offering 20 web projects with Vanilla JavaScript on Udemy.', 'The chapter focuses on creating a music player using HTML, CSS, and JavaScript.', 'GitHub repository link provided in the description for further reference.']}, {'end': 261.672, 'segs': [{'end': 94.42, 'src': 'embed', 'start': 40.703, 'weight': 0, 'content': [{'end': 47.069, 'text': "And then we'll go ahead and add the JavaScript so that we can play certain songs that are in the music folder.", 'start': 40.703, 'duration': 6.366}, {'end': 49.771, 'text': "We'll also be able to switch the songs back and forth.", 'start': 47.469, 'duration': 2.302}, {'end': 53.394, 'text': 'The little title will pop up with a progress bar when I play it.', 'start': 50.232, 'duration': 3.162}, {'end': 54.635, 'text': "I'll show you that in a second.", 'start': 53.595, 'duration': 1.04}, {'end': 58.959, 'text': "And we'll be able to click on the progress bar to go to that spot in the song.", 'start': 54.936, 'duration': 4.023}, {'end': 60.701, 'text': 'So let me just give you a little demo.', 'start': 59.36, 'duration': 1.341}, {'end': 76.264, 'text': 'All right.', 'start': 76.004, 'duration': 0.26}, {'end': 77.526, 'text': 'So pretty simple.', 'start': 76.385, 'duration': 1.141}, {'end': 82.774, 'text': 'I mean, you can just you can put your own music, obviously, in your own images for the little record thing here.', 'start': 77.667, 'duration': 5.107}, {'end': 84.356, 'text': "But that's what we'll be building.", 'start': 82.794, 'duration': 1.562}, {'end': 86.56, 'text': "Hopefully you guys enjoy it and let's get into it.", 'start': 84.416, 'duration': 2.144}, {'end': 94.42, 'text': "All right so I'm going to leave the final project open over here in case we need it for reference and you will need to create some initial files.", 'start': 87.657, 'duration': 6.763}], 'summary': 'Javascript code added to play music, switch songs, and display progress bar for user interaction.', 'duration': 53.717, 'max_score': 40.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw40703.jpg'}, {'end': 166.333, 'src': 'heatmap', 'start': 113.752, 'weight': 1, 'content': [{'end': 118.8, 'text': "So we'll just close that up and let's create a boilerplate here with Emmett with exclamation enter.", 'start': 113.752, 'duration': 5.048}, {'end': 121.624, 'text': "And in the title, let's say music player.", 'start': 119.16, 'duration': 2.464}, {'end': 124.569, 'text': "And then we're going to link in our style sheet.", 'start': 121.644, 'duration': 2.925}, {'end': 127.879, 'text': "Let's link in our script down here.", 'start': 125.697, 'duration': 2.182}, {'end': 129.06, 'text': 'So script source.', 'start': 127.979, 'duration': 1.081}, {'end': 132.543, 'text': "And that's going to be script.js.", 'start': 130.041, 'duration': 2.502}, {'end': 136.787, 'text': 'And we are going to be using font awesome for these buttons, these icons.', 'start': 133.604, 'duration': 3.183}, {'end': 145.295, 'text': "So I'm just going to open up and go to cdnjs.com and grab that real quick.", 'start': 137.047, 'duration': 8.248}, {'end': 146.376, 'text': 'So font awesome.', 'start': 145.395, 'duration': 0.981}, {'end': 147.917, 'text': "I'm going to just copy the link tag.", 'start': 146.416, 'duration': 1.501}, {'end': 150.459, 'text': "And then we're going to put that right in the head.", 'start': 148.578, 'duration': 1.881}, {'end': 152.221, 'text': 'All right.', 'start': 151.961, 'duration': 0.26}, {'end': 159.387, 'text': "So for the body here, we're going to have a actually let's do an H1 here, say music player.", 'start': 152.281, 'duration': 7.106}, {'end': 166.333, 'text': "And then we're going to have a music container class, which is basically just going to wrap around everything.", 'start': 160.007, 'duration': 6.326}], 'summary': 'Creating a boilerplate for a music player with font awesome icons and script.js linked.', 'duration': 52.581, 'max_score': 113.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw113752.jpg'}, {'end': 219.877, 'src': 'embed', 'start': 189.655, 'weight': 3, 'content': [{'end': 192.016, 'text': "So we'll say ukulele.", 'start': 189.655, 'duration': 2.361}, {'end': 203.204, 'text': 'And then we want a progress dash container class and then inside that a progress class and that will get filled dynamically.', 'start': 193.758, 'duration': 9.446}, {'end': 209.149, 'text': "So underneath the music info class, which ends right here, let's put the audio tag.", 'start': 204.085, 'duration': 5.064}, {'end': 211.15, 'text': 'So HTML5 audio tag.', 'start': 209.509, 'duration': 1.641}, {'end': 215.554, 'text': 'And the source is going to be music slash ukulele.', 'start': 211.951, 'duration': 3.603}, {'end': 219.877, 'text': "And let's also give this an ID so we can grab it in the JavaScript.", 'start': 216.434, 'duration': 3.443}], 'summary': 'Create a progress bar for ukulele music using html5 audio tag and dynamic filling, with an id for javascript access.', 'duration': 30.222, 'max_score': 189.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw189655.jpg'}], 'start': 40.703, 'title': 'Creating a javascript music player', 'summary': 'Introduces a javascript music player demo allowing users to play songs, switch between them, display a progress bar, and navigate the song using the progress bar. it also covers creating a music player using html and javascript, including linking style sheet and script, defining music and image containers, and adding audio and image elements.', 'chapters': [{'end': 94.42, 'start': 40.703, 'title': 'Javascript music player demo', 'summary': 'Introduces a javascript music player that allows users to play songs, switch between them, display a progress bar, and navigate the song using the progress bar.', 'duration': 53.717, 'highlights': ['The chapter demonstrates adding JavaScript to create a music player that can play songs and switch between them, with the ability to display a progress bar and navigate to specific points in the song.', 'The demo showcases a simple implementation of the music player, encouraging users to customize it with their own music and images.', 'The presenter mentions leaving the final project open for reference and the need to create initial files for the music player.']}, {'end': 261.672, 'start': 94.46, 'title': 'Creating a music player with html and javascript', 'summary': 'Covers creating a music player using html and javascript, including linking style sheet and script, defining music and image containers, and adding audio and image elements.', 'duration': 167.212, 'highlights': ["We start off by creating a boilerplate HTML with a title of 'music player' and linking a script.js file for functionality and font awesome for icons.", "The music container class wraps around everything, including the song title and progress bar, while the audio tag is used to play the music with a source of 'music/ukulele' and an ID of 'audio'.", "The chapter also discusses creating an image container for the music cover and the initial image loaded is for the first song, 'ukulele', with an alt tag of 'music-cover' and an ID of 'cover'."]}], 'duration': 220.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw40703.jpg', 'highlights': ['The chapter demonstrates adding JavaScript to create a music player that can play songs and switch between them, with the ability to display a progress bar and navigate to specific points in the song.', "We start off by creating a boilerplate HTML with a title of 'music player' and linking a script.js file for functionality and font awesome for icons.", 'The demo showcases a simple implementation of the music player, encouraging users to customize it with their own music and images.', "The music container class wraps around everything, including the song title and progress bar, while the audio tag is used to play the music with a source of 'music/ukulele' and an ID of 'audio'.", 'The presenter mentions leaving the final project open for reference and the need to create initial files for the music player.']}, {'end': 667.473, 'segs': [{'end': 290.065, 'src': 'embed', 'start': 261.692, 'weight': 0, 'content': [{'end': 267.153, 'text': "So we'll give a class of navigation and then in here we'll have three buttons.", 'start': 261.692, 'duration': 5.461}, {'end': 270.374, 'text': "So it's first one is going to have an ID of Prev.", 'start': 267.253, 'duration': 3.121}, {'end': 275.035, 'text': "It's going to be the previous button, also a class of action dash BTN.", 'start': 270.414, 'duration': 4.621}, {'end': 278.035, 'text': "And then let's have an icon here.", 'start': 276.255, 'duration': 1.78}, {'end': 282.199, 'text': 'So font awesome class with F a dash backward.', 'start': 278.135, 'duration': 4.064}, {'end': 285.582, 'text': 'If I save that, we should see the icon.', 'start': 283.66, 'duration': 1.922}, {'end': 290.065, 'text': "Now I'm just going to go ahead and copy this down twice.", 'start': 286.062, 'duration': 4.003}], 'summary': 'The navigation class will contain three buttons: prev, each with the class action-btn and icon f a-backward.', 'duration': 28.373, 'max_score': 261.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw261692.jpg'}, {'end': 291.787, 'src': 'heatmap', 'start': 261.692, 'weight': 0.837, 'content': [{'end': 267.153, 'text': "So we'll give a class of navigation and then in here we'll have three buttons.", 'start': 261.692, 'duration': 5.461}, {'end': 270.374, 'text': "So it's first one is going to have an ID of Prev.", 'start': 267.253, 'duration': 3.121}, {'end': 275.035, 'text': "It's going to be the previous button, also a class of action dash BTN.", 'start': 270.414, 'duration': 4.621}, {'end': 278.035, 'text': "And then let's have an icon here.", 'start': 276.255, 'duration': 1.78}, {'end': 282.199, 'text': 'So font awesome class with F a dash backward.', 'start': 278.135, 'duration': 4.064}, {'end': 285.582, 'text': 'If I save that, we should see the icon.', 'start': 283.66, 'duration': 1.922}, {'end': 290.065, 'text': "Now I'm just going to go ahead and copy this down twice.", 'start': 286.062, 'duration': 4.003}, {'end': 291.787, 'text': "So we're going to have three buttons.", 'start': 290.085, 'duration': 1.702}], 'summary': 'Class on navigation with 3 buttons: prev, action-btn, and font awesome backward icon.', 'duration': 30.095, 'max_score': 261.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw261692.jpg'}, {'end': 346.989, 'src': 'heatmap', 'start': 310.364, 'weight': 0.924, 'content': [{'end': 319.049, 'text': "So let's change the ID to next and change the class here to forward case.", 'start': 310.364, 'duration': 8.685}, {'end': 321.89, 'text': "Now we have our buttons and that's it for the HTML.", 'start': 319.089, 'duration': 2.801}, {'end': 322.711, 'text': 'So pretty simple.', 'start': 321.91, 'duration': 0.801}, {'end': 327.194, 'text': "Let's go ahead and close that up now and open up our style sheet.", 'start': 323.971, 'duration': 3.223}, {'end': 332.758, 'text': "And in our style sheet, I'm going to just bring in the font that I'm using, which is the Lato font.", 'start': 328.294, 'duration': 4.464}, {'end': 334.359, 'text': "So I'll just paste that in.", 'start': 333.359, 'duration': 1}, {'end': 340.424, 'text': "And then with the universal selector, I'm going to just add a box sizing value of border box.", 'start': 335.06, 'duration': 5.364}, {'end': 346.989, 'text': "And then for the body, let's set the height to 100 viewport heights.", 'start': 341.465, 'duration': 5.524}], 'summary': "Changing id to 'next', setting class to 'forward case', adding lato font in stylesheet, and setting body height to 100vh.", 'duration': 36.625, 'max_score': 310.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw310364.jpg'}, {'end': 401.658, 'src': 'embed', 'start': 375.308, 'weight': 1, 'content': [{'end': 380.511, 'text': "And we're going to set a let's say background image.", 'start': 375.308, 'duration': 5.203}, {'end': 383.444, 'text': "And we're going to set that to linear gradient.", 'start': 381.542, 'duration': 1.902}, {'end': 387.827, 'text': 'And basically we want it to be the pink that goes, it starts really light.', 'start': 383.664, 'duration': 4.163}, {'end': 391.41, 'text': "And then as it goes up, it gets a little darker and it's a straight line.", 'start': 388.087, 'duration': 3.323}, {'end': 396.314, 'text': "So let's do zero degrees for the first argument.", 'start': 391.89, 'duration': 4.424}, {'end': 401.658, 'text': 'And then we want the first color, which is going to be RGB 247 for red, green, and blue.', 'start': 396.394, 'duration': 5.264}], 'summary': 'Setting a linear gradient background with pink color, starting light and getting darker as it goes up.', 'duration': 26.35, 'max_score': 375.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw375308.jpg'}, {'end': 455.149, 'src': 'embed', 'start': 427.344, 'weight': 2, 'content': [{'end': 431.127, 'text': 'And then the percentage on this will do ninety two percent.', 'start': 427.344, 'duration': 3.783}, {'end': 436.23, 'text': "So let's go back to ours and you can see our gradient.", 'start': 432.386, 'duration': 3.844}, {'end': 440.514, 'text': "Now I'm going to use flex box to center everything.", 'start': 438.152, 'duration': 2.362}, {'end': 446.34, 'text': "So let's go ahead and display this the body as flex right away.", 'start': 440.614, 'duration': 5.726}, {'end': 451.185, 'text': "It's going to put it into a row which is going horizontal which obviously we don't want.", 'start': 446.36, 'duration': 4.825}, {'end': 455.149, 'text': "So let's change the flex direction to column.", 'start': 451.325, 'duration': 3.824}], 'summary': 'Using flex box to center content, adjusting flex direction to column.', 'duration': 27.805, 'max_score': 427.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw427344.jpg'}, {'end': 518.116, 'src': 'embed', 'start': 482.061, 'weight': 3, 'content': [{'end': 484.763, 'text': "for this we're going to add a background.", 'start': 482.061, 'duration': 2.702}, {'end': 500.284, 'text': "Let's do a background color of white and let's give this a border radius of 15 pixels and we'll go ahead and give it a box shadow.", 'start': 486.954, 'duration': 13.33}, {'end': 512.854, 'text': "So let's do the offsets of zero 20 pixels and then the blur 20 pixels zero and then the color is going to be RGB a.", 'start': 501.665, 'duration': 11.189}, {'end': 518.116, 'text': "and I'm gonna set that to 252 for red, 169, 169, and let's do 0.6 for the alpha value.", 'start': 514.087, 'duration': 4.029}], 'summary': 'Adding a white background with border radius of 15px and box shadow with offset of 0 20px, blur 20px, and color rgb(252,169,169,0.6).', 'duration': 36.055, 'max_score': 482.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw482061.jpg'}], 'start': 261.692, 'title': 'Styling web page components', 'summary': 'Covers creating navigation buttons with ids and classes, setting linear gradient background with specific color values and percentage using css, as well as using flexbox and css to style a web page, including setting flex direction, aligning items, adding background color, setting border radius, and positioning elements.', 'chapters': [{'end': 427.324, 'start': 261.692, 'title': 'Creating navigation buttons and styling with css', 'summary': 'Discusses creating navigation buttons with ids and classes, styling the html and setting a linear gradient background using css, with specific color values and percentage for the gradient.', 'duration': 165.632, 'highlights': ['The chapter covers the creation of navigation buttons with IDs and classes, including previous, play, and next buttons.', 'It details the styling of HTML elements using CSS, such as setting the height to 100 viewport heights, removing margins, and applying the Lato font family.', 'The highlight provides specific instructions for setting a linear gradient background using CSS, including the specific color values in RGB and percentage for the gradient.']}, {'end': 667.473, 'start': 427.344, 'title': 'Styling web page with flexbox and css', 'summary': 'Details the process of using flexbox and css to style a web page, including setting flex direction, aligning items, adding background color, setting border radius, and positioning elements.', 'duration': 240.129, 'highlights': ['Setting flex direction to column to align items vertically The speaker demonstrates how to set the flex direction to column to align items vertically, ensuring the layout is appropriate for the web page.', 'Adding background color, border radius, and box shadow to music container The chapter explains the process of adding a white background color, a border radius of 15 pixels, and a box shadow with specific color values to the music container, enhancing its visual appeal.', 'Setting width, height, border radius, and object fit for the image container The tutorial covers setting the width and height of the image container to 110 pixels, applying a border radius of 50%, and using object fit to ensure the image is appropriately displayed within the container.']}], 'duration': 405.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw261692.jpg', 'highlights': ['The chapter covers the creation of navigation buttons with IDs and classes, including previous, play, and next buttons.', 'The highlight provides specific instructions for setting a linear gradient background using CSS, including the specific color values in RGB and percentage for the gradient.', 'Setting flex direction to column to align items vertically The speaker demonstrates how to set the flex direction to column to align items vertically, ensuring the layout is appropriate for the web page.', 'Adding background color, border radius, and box shadow to music container The chapter explains the process of adding a white background color, a border radius of 15 pixels, and a box shadow with specific color values to the music container, enhancing its visual appeal.']}, {'end': 860.692, 'segs': [{'end': 709.922, 'src': 'embed', 'start': 667.513, 'weight': 3, 'content': [{'end': 671.776, 'text': "We're just going to set that to empty because we don't have to we don't really want to put something in here.", 'start': 667.513, 'duration': 4.263}, {'end': 674.258, 'text': "We're just using it as like a like a ghost element.", 'start': 671.796, 'duration': 2.462}, {'end': 678.972, 'text': "And then let's set the background color to white or whatever you want to set it to.", 'start': 675.171, 'duration': 3.801}, {'end': 683.033, 'text': "Let's give it a height of 20 pixels.", 'start': 680.672, 'duration': 2.361}, {'end': 687.054, 'text': "Let's give it a width of 20 pixels.", 'start': 683.073, 'duration': 3.981}, {'end': 697.636, 'text': "And then let's position this absolute within the container and then set left to 50 percent and bottom.", 'start': 687.274, 'duration': 10.362}, {'end': 700.038, 'text': 'to 50 percent.', 'start': 698.877, 'duration': 1.161}, {'end': 703.499, 'text': "so if i save that, you're going to see the little little white square in the middle.", 'start': 700.038, 'duration': 3.461}, {'end': 707.381, 'text': "let's make it rounded with border radius and it's not quite in the middle.", 'start': 703.499, 'duration': 3.882}, {'end': 709.922, 'text': "we'll fix that in a second.", 'start': 707.381, 'duration': 2.541}], 'summary': 'Using css to create a 20x20 white square positioned in the middle with border radius.', 'duration': 42.409, 'max_score': 667.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw667513.jpg'}, {'end': 765.513, 'src': 'embed', 'start': 735.817, 'weight': 0, 'content': [{'end': 737.337, 'text': 'We want it to rotate.', 'start': 735.817, 'duration': 1.52}, {'end': 744.64, 'text': "So let's go into our image and we're going to set an animation and set it to rotate.", 'start': 737.597, 'duration': 7.043}, {'end': 750.363, 'text': "We're going to create the animation in a second using a key frame and let's say three second duration.", 'start': 744.66, 'duration': 5.703}, {'end': 754.805, 'text': 'We want it to be linear and we want it to be infinite because we want it to keep going.', 'start': 750.403, 'duration': 4.402}, {'end': 757.927, 'text': "So let's create that rotate keyframe.", 'start': 755.865, 'duration': 2.062}, {'end': 763.251, 'text': "So we'll say at keyframes and set this to rotate or name it rotate.", 'start': 757.967, 'duration': 5.284}, {'end': 765.513, 'text': "We're gonna have a from and a to.", 'start': 763.772, 'duration': 1.741}], 'summary': 'Create a three-second linear rotation animation set to be infinite.', 'duration': 29.696, 'max_score': 735.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw735817.jpg'}, {'end': 853.03, 'src': 'heatmap', 'start': 781.266, 'weight': 1, 'content': [{'end': 787.128, 'text': "Rotate and we're going to set that to 360 degrees because we want to spin all the way around.", 'start': 781.266, 'duration': 5.862}, {'end': 789.77, 'text': "So if I save that, it's going to start spinning.", 'start': 787.749, 'duration': 2.021}, {'end': 792.271, 'text': "Now, I don't want it to spin just all the time.", 'start': 790.23, 'duration': 2.041}, {'end': 794.011, 'text': 'I only want it when the song plays.', 'start': 792.331, 'duration': 1.68}, {'end': 796.332, 'text': "So for now, let's set the animation.", 'start': 794.331, 'duration': 2.001}, {'end': 802.255, 'text': "We're going to set the animation play state to paused and that will stop it.", 'start': 796.352, 'duration': 5.903}, {'end': 808.782, 'text': "And then what I'll do is say down here let's say if the music container has a play class on it,", 'start': 803.021, 'duration': 5.761}, {'end': 817.264, 'text': "then let's take the image container image and let's set the animation play state to running.", 'start': 808.782, 'duration': 8.482}, {'end': 819.764, 'text': "So that way and I'll just do this.", 'start': 817.944, 'duration': 1.82}, {'end': 820.845, 'text': "I'll show you this manually.", 'start': 819.764, 'duration': 1.081}, {'end': 825.525, 'text': 'if I go to my HTML, this this top div here the music container.', 'start': 820.845, 'duration': 4.68}, {'end': 827.806, 'text': "if I add a class of play, it'll start playing.", 'start': 825.525, 'duration': 2.281}, {'end': 833.007, 'text': "So we're going to add and remove that when the song plays and stops later on.", 'start': 828.686, 'duration': 4.321}, {'end': 836.788, 'text': 'OK, so we have that done now.', 'start': 834.807, 'duration': 1.981}, {'end': 840.329, 'text': "Let's do let's do the navigation.", 'start': 837.488, 'duration': 2.841}, {'end': 849.971, 'text': "So we're going to go under here, down at the bottom and say navigation, and I'm going to set this to display.", 'start': 840.349, 'duration': 9.622}, {'end': 853.03, 'text': 'flex because we want them side by side.', 'start': 851.069, 'duration': 1.961}], 'summary': 'Set animation to play when music plays, and display navigation as flex for side-by-side layout.', 'duration': 71.764, 'max_score': 781.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw781266.jpg'}, {'end': 860.692, 'src': 'embed', 'start': 828.686, 'weight': 2, 'content': [{'end': 833.007, 'text': "So we're going to add and remove that when the song plays and stops later on.", 'start': 828.686, 'duration': 4.321}, {'end': 836.788, 'text': 'OK, so we have that done now.', 'start': 834.807, 'duration': 1.981}, {'end': 840.329, 'text': "Let's do let's do the navigation.", 'start': 837.488, 'duration': 2.841}, {'end': 849.971, 'text': "So we're going to go under here, down at the bottom and say navigation, and I'm going to set this to display.", 'start': 840.349, 'duration': 9.622}, {'end': 853.03, 'text': 'flex because we want them side by side.', 'start': 851.069, 'duration': 1.961}, {'end': 860.692, 'text': "Let's align items to the center and let's justify the content to the center.", 'start': 853.49, 'duration': 7.202}], 'summary': 'Adjustments made to song display and navigation for side-by-side view.', 'duration': 32.006, 'max_score': 828.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw828686.jpg'}], 'start': 667.513, 'title': 'Css and image animations', 'summary': 'Covers creating a white square with css, positioning it in the center of a container, applying rounded border radius, adjusting its position, and adding a little animation. it also demonstrates creating a rotating animation for an image using keyframes, controlling its play state based on music playback, and setting up navigation with flex display, aligning items, and justifying content.', 'chapters': [{'end': 735.777, 'start': 667.513, 'title': 'Css square animation', 'summary': "Explains how to create a white square using css, position it in the middle of a container, and apply a rounded border radius. it also covers adjusting the square's position and creating a little animation.", 'duration': 68.264, 'highlights': ['Creating a white square using CSS The chapter demonstrates creating a white square with a height and width of 20 pixels, and setting its background color to white.', 'Positioning the square in the middle of a container The chapter explains positioning the square absolutely within the container, setting the left and bottom properties to 50%, and adjusting its position using transform and translate.', 'Applying a rounded border radius to the square The chapter covers making the square rounded by applying a border radius, and using transform and translate to ensure its centered position.', 'Creating a little animation for the square The chapter outlines the process of creating a little animation for the square, providing guidance on how to animate the square to achieve the desired effect.']}, {'end': 860.692, 'start': 735.817, 'title': 'Animating image rotation and music control', 'summary': 'Demonstrates creating a rotating animation for an image using keyframes and controlling its play state based on music playback, as well as setting up navigation with flex display, aligning items, and justifying content.', 'duration': 124.875, 'highlights': ['Creating a rotating animation for an image using keyframes and setting it to spin 360 degrees over a three-second duration. The chapter covers creating a rotating animation for an image using keyframes and rotating it 360 degrees over a three-second duration.', 'Controlling the animation play state based on music playback by pausing it when the song is not playing and running it when the song is playing. The chapter explains controlling the animation play state based on music playback by pausing it when the song is not playing and running it when the song is playing.', 'Setting up navigation with flex display, aligning items to the center, and justifying the content to the center for a visually appealing layout. The chapter also includes setting up navigation with flex display, aligning items to the center, and justifying the content to the center for a visually appealing layout.']}], 'duration': 193.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw667513.jpg', 'highlights': ['Creating a rotating animation for an image using keyframes and setting it to spin 360 degrees over a three-second duration.', 'Controlling the animation play state based on music playback by pausing it when the song is not playing and running it when the song is playing.', 'Setting up navigation with flex display, aligning items to the center, and justifying the content to the center for a visually appealing layout.', 'Creating a white square using CSS with a height and width of 20 pixels, and setting its background color to white.', 'Positioning the square absolutely within the container, setting the left and bottom properties to 50%, and adjusting its position using transform and translate.', 'Applying a rounded border radius to the square and using transform and translate to ensure its centered position.', 'Creating a little animation for the square to achieve the desired effect.']}, {'end': 1643.323, 'segs': [{'end': 988.655, 'src': 'embed', 'start': 929.228, 'weight': 0, 'content': [{'end': 935.771, 'text': "And that's just going to have a different color, which is going to be hexadecimal value CDC to zero.", 'start': 929.228, 'duration': 6.543}, {'end': 939.953, 'text': "It's going to be a little darker and then we're going to increase the font size a bit.", 'start': 935.791, 'duration': 4.162}, {'end': 941.954, 'text': "So let's increase that to 30 pixels.", 'start': 940.013, 'duration': 1.941}, {'end': 946.016, 'text': "And then I don't want to have any kind of outline.", 'start': 944.195, 'duration': 1.821}, {'end': 947.777, 'text': 'So I click on it has an outline.', 'start': 946.056, 'duration': 1.721}, {'end': 952.179, 'text': "So let's say action button in its focus state.", 'start': 948.317, 'duration': 3.862}, {'end': 957.582, 'text': "We're going to set the outline to zero so that we don't have that.", 'start': 952.539, 'duration': 5.043}, {'end': 959.782, 'text': 'All right.', 'start': 959.482, 'duration': 0.3}, {'end': 964.823, 'text': 'Now for the music info, which right now is over here.', 'start': 959.822, 'duration': 5.001}, {'end': 966.483, 'text': "So let's let's start on that.", 'start': 964.983, 'duration': 1.5}, {'end': 970.104, 'text': "Let's say class music info.", 'start': 966.523, 'duration': 3.581}, {'end': 974.965, 'text': "And I'm going to set a background color of RGBA.", 'start': 971.424, 'duration': 3.541}, {'end': 978.906, 'text': "And we're going to set that to 255.", 'start': 975.205, 'duration': 3.701}, {'end': 984.507, 'text': "So we're going to set that to white 255.", 'start': 978.906, 'duration': 5.601}, {'end': 988.655, 'text': 'And then the alpha value will be 0.5.', 'start': 984.507, 'duration': 4.148}], 'summary': 'Adjusting colors, font size, and outline for action button and music info.', 'duration': 59.427, 'max_score': 929.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw929228.jpg'}, {'end': 1140.015, 'src': 'heatmap', 'start': 1110.486, 'weight': 0.743, 'content': [{'end': 1111.967, 'text': "So it's going to be a negative number.", 'start': 1110.486, 'duration': 1.481}, {'end': 1115.068, 'text': "So we're going to do negative 100 percent.", 'start': 1111.987, 'duration': 3.081}, {'end': 1118.61, 'text': "And actually, what I'll do is is I will uncomment opacity zero.", 'start': 1115.088, 'duration': 3.522}, {'end': 1119.771, 'text': "You can see it's gone.", 'start': 1118.71, 'duration': 1.061}, {'end': 1125.494, 'text': "And then I'm just going to add the play class to to the HTML here.", 'start': 1120.371, 'duration': 5.123}, {'end': 1129.229, 'text': 'All right, so we can see it now.', 'start': 1127.748, 'duration': 1.481}, {'end': 1133.391, 'text': "Still doesn't look right.", 'start': 1131.49, 'duration': 1.901}, {'end': 1136.914, 'text': 'Did I forget? Yeah, I forgot my padding.', 'start': 1134.552, 'duration': 2.362}, {'end': 1140.015, 'text': "So let's add padding.", 'start': 1138.775, 'duration': 1.24}], 'summary': 'Adjusting opacity to zero, adding play class to html, and including padding for better appearance.', 'duration': 29.529, 'max_score': 1110.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1110486.jpg'}, {'end': 1202.372, 'src': 'embed', 'start': 1168.63, 'weight': 4, 'content': [{'end': 1175.135, 'text': "So the transition is going to be on the transform property because that's what moves it up and down with the translate Y.", 'start': 1168.63, 'duration': 6.505}, {'end': 1179.777, 'text': "And let's set the duration to 0.3 seconds.", 'start': 1176.235, 'duration': 3.542}, {'end': 1182.539, 'text': "We'll give it an ease in effect.", 'start': 1180.078, 'duration': 2.461}, {'end': 1192.806, 'text': 'And then the opacity, the opacity, we also want to set that to 0.3 and also ease in.', 'start': 1183.32, 'duration': 9.486}, {'end': 1197.209, 'text': "So it'll have a nice transition when we play and stop.", 'start': 1194.147, 'duration': 3.062}, {'end': 1200.371, 'text': 'All right.', 'start': 1200.071, 'duration': 0.3}, {'end': 1202.372, 'text': "And then let's see for the H4, the title.", 'start': 1200.531, 'duration': 1.841}], 'summary': 'Setting transform property for 0.3s transition with ease in effect, and setting opacity to 0.3 for h4 title.', 'duration': 33.742, 'max_score': 1168.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1168630.jpg'}, {'end': 1282.364, 'src': 'embed', 'start': 1257.386, 'weight': 2, 'content': [{'end': 1265.397, 'text': "So, in the progress container we're going to set the background to white and make sure you have the play class on the HTML right now,", 'start': 1257.386, 'duration': 8.011}, {'end': 1266.458, 'text': 'so so you can see this', 'start': 1265.397, 'duration': 1.061}, {'end': 1268.08, 'text': "Otherwise, you won't see this part.", 'start': 1266.578, 'duration': 1.502}, {'end': 1271.185, 'text': "We're going to set the border.", 'start': 1270.223, 'duration': 0.962}, {'end': 1274.116, 'text': 'say border radius.', 'start': 1272.975, 'duration': 1.141}, {'end': 1282.364, 'text': "we'll set that to five pixels and let's set the cursor to a pointer,", 'start': 1274.116, 'duration': 8.248}], 'summary': 'Set progress container background to white, play class on html, set border radius to 5 pixels, and cursor to pointer.', 'duration': 24.978, 'max_score': 1257.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1257386.jpg'}, {'end': 1405.632, 'src': 'heatmap', 'start': 1376.138, 'weight': 0.762, 'content': [{'end': 1377.498, 'text': "So that's it for the CSS.", 'start': 1376.138, 'duration': 1.36}, {'end': 1379.639, 'text': "Now I'm going to just remove the play class.", 'start': 1377.778, 'duration': 1.861}, {'end': 1384.07, 'text': "And we're going to no longer see the title in the progress bar.", 'start': 1381.348, 'duration': 2.722}, {'end': 1386.852, 'text': 'So now we can go to our JavaScript.', 'start': 1384.51, 'duration': 2.342}, {'end': 1387.873, 'text': 'This is the fun part.', 'start': 1386.872, 'duration': 1.001}, {'end': 1392.797, 'text': "We can close up our style sheet for now and let's bring in everything we need to.", 'start': 1388.133, 'duration': 4.664}, {'end': 1395.659, 'text': 'So first we have our music container.', 'start': 1392.877, 'duration': 2.782}, {'end': 1402.644, 'text': "And we're going to use document dots query selector.", 'start': 1398.301, 'duration': 4.343}, {'end': 1405.632, 'text': 'And that has a class.', 'start': 1404.471, 'duration': 1.161}], 'summary': "Css class 'play' removed, title no longer visible in progress bar, javascript code for music container selected using query selector.", 'duration': 29.494, 'max_score': 1376.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1376138.jpg'}, {'end': 1594.753, 'src': 'embed', 'start': 1565.614, 'weight': 3, 'content': [{'end': 1568.556, 'text': "So we'll call a function called load song, which we'll create in a second.", 'start': 1565.614, 'duration': 2.942}, {'end': 1572.698, 'text': "And that's going to take in the songs array with whatever the song index is.", 'start': 1568.616, 'duration': 4.082}, {'end': 1574.559, 'text': 'All right.', 'start': 1572.718, 'duration': 1.841}, {'end': 1576.36, 'text': "And then we'll create that function.", 'start': 1574.579, 'duration': 1.781}, {'end': 1581.003, 'text': 'So this is going to update the song details.', 'start': 1576.921, 'duration': 4.082}, {'end': 1583.524, 'text': "So it's a function load song.", 'start': 1582.184, 'duration': 1.34}, {'end': 1594.753, 'text': "And that's going to take in a song and three things we want to update here, the title, the actual audio source and the image source.", 'start': 1586.65, 'duration': 8.103}], 'summary': "Creating a function 'load song' to update song details with title, audio source, and image source.", 'duration': 29.139, 'max_score': 1565.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1565614.jpg'}], 'start': 860.812, 'title': 'Styling elements with css and javascript', 'summary': 'Covers styling buttons and music info with specific color codes, font sizes, and padding, as well as setting up functionalities using javascript for updating song details and loading songs dynamically.', 'chapters': [{'end': 988.655, 'start': 860.812, 'title': 'Styling buttons and music info', 'summary': 'Covers the styling of buttons with specific color codes, font sizes, padding, and margins, and also the setting of a background color with an alpha value for the music info section.', 'duration': 127.843, 'highlights': ['The chapter covers the styling of buttons with specific color codes, font sizes, padding, and margins, including a light color (#DFDFDF), a different color (#CDCDC0), and setting the font size to 20 pixels for the former and 30 pixels for the latter.', 'The setting of a background color with an alpha value (RGBA 255, 0.5) for the music info section is also part of this chapter.']}, {'end': 1643.323, 'start': 988.655, 'title': 'Styling and positioning elements', 'summary': 'Describes the process of styling and positioning elements using css and setting up functionalities using javascript. it includes setting border radius, position, width, opacity, transition, and transforming elements, as well as updating song details and loading songs dynamically.', 'duration': 654.668, 'highlights': ['Describing the process of styling and positioning elements using CSS The speaker explains the specific CSS properties such as border radius, position, width, opacity, transition, and transform, providing a clear understanding of their application.', 'Setting up functionalities using JavaScript The transcript covers the JavaScript code for loading songs, updating song details, and dynamically changing the song index, demonstrating practical implementation of JavaScript functionalities.', 'Using CSS transition and transform properties for smooth element movements The speaker demonstrates the use of transition and transform properties to create smooth movements, with a specific focus on setting durations, easing effects, and transitions for improved user experience.']}], 'duration': 782.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw860812.jpg', 'highlights': ['The chapter covers the styling of buttons with specific color codes, font sizes, padding, and margins, including a light color (#DFDFDF), a different color (#CDCDC0), and setting the font size to 20 pixels for the former and 30 pixels for the latter.', 'The setting of a background color with an alpha value (RGBA 255, 0.5) for the music info section is also part of this chapter.', 'Describing the process of styling and positioning elements using CSS The speaker explains the specific CSS properties such as border radius, position, width, opacity, transition, and transform, providing a clear understanding of their application.', 'Setting up functionalities using JavaScript The transcript covers the JavaScript code for loading songs, updating song details, and dynamically changing the song index, demonstrating practical implementation of JavaScript functionalities.', 'Using CSS transition and transform properties for smooth element movements The speaker demonstrates the use of transition and transform properties to create smooth movements, with a specific focus on setting durations, easing effects, and transitions for improved user experience.']}, {'end': 2138.865, 'segs': [{'end': 1712.906, 'src': 'embed', 'start': 1663.345, 'weight': 2, 'content': [{'end': 1670.488, 'text': "If I change this to zero, you'll see, hey, but I'm going to set it to two by default and then just remove that play class.", 'start': 1663.345, 'duration': 7.143}, {'end': 1674.01, 'text': "All right, so let's continue on here.", 'start': 1672.709, 'duration': 1.301}, {'end': 1675.951, 'text': 'Next, we want the play button.', 'start': 1674.09, 'duration': 1.861}, {'end': 1678.972, 'text': 'I want to click this, add the play class.', 'start': 1676.211, 'duration': 2.761}, {'end': 1684.175, 'text': "Also, I want this to change into a pause button when it's playing.", 'start': 1680.093, 'duration': 4.082}, {'end': 1689.077, 'text': 'And then if we click it again, then it should be able to pause and play, toggle that.', 'start': 1684.495, 'duration': 4.582}, {'end': 1693.926, 'text': "So let's go down here at the bottom and this is where we're going to have all of our event listeners.", 'start': 1689.662, 'duration': 4.264}, {'end': 1699.532, 'text': 'So first one is going to be for the play button.', 'start': 1697.45, 'duration': 2.082}, {'end': 1702.475, 'text': "So let's say play BTN dot add event listener.", 'start': 1699.552, 'duration': 2.923}, {'end': 1704.297, 'text': 'And we want to listen for a click.', 'start': 1702.976, 'duration': 1.321}, {'end': 1712.906, 'text': "When that happens, we're going to run a function and we want to see if the if the song is playing or not, because that's going to.", 'start': 1704.918, 'duration': 7.988}], 'summary': 'Setting default value to 2, adding play and pause functionality, and implementing event listeners for play button.', 'duration': 49.561, 'max_score': 1663.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1663345.jpg'}, {'end': 1776.594, 'src': 'heatmap', 'start': 1716.888, 'weight': 0.806, 'content': [{'end': 1724.656, 'text': 'So what we can do is just say const is playing and set that to music container dot class list.', 'start': 1716.888, 'duration': 7.768}, {'end': 1728.8, 'text': 'And we want to see if that class list contains the class of play.', 'start': 1724.776, 'duration': 4.024}, {'end': 1730.141, 'text': "Then we know it's playing.", 'start': 1729.14, 'duration': 1.001}, {'end': 1732.524, 'text': 'And then if it is playing.', 'start': 1730.822, 'duration': 1.702}, {'end': 1736.877, 'text': 'So if it is playing, then we want to pause the song.', 'start': 1734.215, 'duration': 2.662}, {'end': 1738.919, 'text': "So we'll have a function called pause song.", 'start': 1736.937, 'duration': 1.982}, {'end': 1741.881, 'text': 'Else, then we want to play the song.', 'start': 1739.859, 'duration': 2.022}, {'end': 1744.403, 'text': "So we'll have a function called play song.", 'start': 1741.901, 'duration': 2.502}, {'end': 1748.626, 'text': "And then we'll go and create those up here under load song.", 'start': 1745.384, 'duration': 3.242}, {'end': 1753.49, 'text': 'Say function play song.', 'start': 1750.848, 'duration': 2.642}, {'end': 1759.915, 'text': "And we'll just create function pause song.", 'start': 1755.431, 'duration': 4.484}, {'end': 1763.858, 'text': 'All right, now play song.', 'start': 1759.935, 'duration': 3.923}, {'end': 1767.227, 'text': "Again, we're going to want to add the play class.", 'start': 1765.365, 'duration': 1.862}, {'end': 1776.594, 'text': "So let's take our music container and let's say class list and we want to add a class of play.", 'start': 1767.287, 'duration': 9.307}], 'summary': 'The code checks if the music is playing and performs actions accordingly.', 'duration': 59.706, 'max_score': 1716.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1716888.jpg'}, {'end': 1958.332, 'src': 'embed', 'start': 1924.568, 'weight': 0, 'content': [{'end': 1930.011, 'text': "And then down here in pause song, we're gonna say audio.pause.", 'start': 1924.568, 'duration': 5.443}, {'end': 1933.254, 'text': "So now let's save this, let's try it out.", 'start': 1930.792, 'duration': 2.462}, {'end': 1940.034, 'text': 'So now I can play and pause the song.', 'start': 1938.213, 'duration': 1.821}, {'end': 1942.837, 'text': "Next, let's do the previous and next buttons.", 'start': 1940.715, 'duration': 2.122}, {'end': 1945.279, 'text': "So again, we're gonna need event listeners for that.", 'start': 1943.097, 'duration': 2.182}, {'end': 1951.105, 'text': "So down here, let's say change song events.", 'start': 1945.88, 'duration': 5.225}, {'end': 1958.332, 'text': "And we're gonna take the previous button and add an event listener onto that.", 'start': 1952.006, 'duration': 6.326}], 'summary': 'Code implements play, pause, previous, and next song buttons with event listeners.', 'duration': 33.764, 'max_score': 1924.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1924568.jpg'}, {'end': 2041.893, 'src': 'embed', 'start': 2017.304, 'weight': 5, 'content': [{'end': 2025.307, 'text': 'And then we want to check to see if the song index is less than zero, because if it is, then we want it to loop back.', 'start': 2017.304, 'duration': 8.003}, {'end': 2026.947, 'text': 'We want it to loop to the beginning.', 'start': 2025.347, 'duration': 1.6}, {'end': 2031.969, 'text': 'Right So if we click previous and we were at the first song, we click it again.', 'start': 2027.547, 'duration': 4.422}, {'end': 2034.649, 'text': 'We want it to go to the other side, to the end song.', 'start': 2031.989, 'duration': 2.66}, {'end': 2038.691, 'text': "So if it's less than zero, then let's set the song index.", 'start': 2035.39, 'duration': 3.301}, {'end': 2041.893, 'text': "We're going to set it to the last song.", 'start': 2039.633, 'duration': 2.26}], 'summary': 'Check song index for looping to beginning or end.', 'duration': 24.589, 'max_score': 2017.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw2017304.jpg'}], 'start': 1644.564, 'title': 'Music player functionality', 'summary': 'Covers implementing play, pause, previous, and next functionality for a music player using html5 audio tag with event listeners and song state manipulation.', 'chapters': [{'end': 1805.05, 'start': 1644.564, 'title': 'Building music player functionality', 'summary': 'Covers implementing play and pause functionality for a music player, including adding event listeners for the play button and toggling the play and pause actions based on the current state of the song playing.', 'duration': 160.486, 'highlights': ['Implementing play and pause functionality The chapter focuses on implementing the play and pause functionality for a music player, allowing users to toggle between playing and pausing the song.', 'Adding event listeners for the play button The chapter discusses adding event listeners for the play button to trigger the play and pause actions based on the current state of the song playing.', 'Toggling play and pause actions based on the current state of the song playing The chapter explains the logic behind toggling between playing and pausing the song based on the current state, with specific functions created for playing and pausing the song.']}, {'end': 2138.865, 'start': 1805.07, 'title': 'Html5 audio tag functionality', 'summary': 'Demonstrates the implementation of html5 audio tag functionality, including play, pause, previous, and next buttons, with the ability to navigate through songs and manipulate the play icon.', 'duration': 333.795, 'highlights': ['The chapter demonstrates the implementation of HTML5 audio tag functionality, including play, pause, previous, and next buttons, with the ability to navigate through songs and manipulate the play icon.', 'The implementation includes dynamically changing the play button icon to a pause button when the audio is playing and vice versa, providing a visual indication of the current play state.', 'The functionality also allows for navigating between songs, with the ability to loop back to the beginning when reaching the end of the song list.']}], 'duration': 494.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw1644564.jpg', 'highlights': ['The chapter demonstrates the implementation of HTML5 audio tag functionality, including play, pause, previous, and next buttons, with the ability to navigate through songs and manipulate the play icon.', 'Implementing play and pause functionality for a music player, allowing users to toggle between playing and pausing the song.', 'Adding event listeners for the play button to trigger the play and pause actions based on the current state of the song playing.', 'The implementation includes dynamically changing the play button icon to a pause button when the audio is playing and vice versa, providing a visual indication of the current play state.', 'Toggling play and pause actions based on the current state of the song playing, with specific functions created for playing and pausing the song.', 'The functionality also allows for navigating between songs, with the ability to loop back to the beginning when reaching the end of the song list.']}, {'end': 2644.828, 'segs': [{'end': 2200.896, 'src': 'heatmap', 'start': 2167.238, 'weight': 2, 'content': [{'end': 2173.182, 'text': "so basically it'll just every time you know the song, when the song is playing.", 'start': 2167.238, 'duration': 5.944}, {'end': 2183.311, 'text': 'this will constantly be called um and Basically what I want to do on time update is call a function called update progress.', 'start': 2173.182, 'duration': 10.129}, {'end': 2192.777, 'text': "So we're going to go up here, let's go under next song and let's say function update progress.", 'start': 2184.852, 'duration': 7.925}, {'end': 2196.753, 'text': 'All right.', 'start': 2196.513, 'duration': 0.24}, {'end': 2200.896, 'text': 'Now, update progress is going to take in an event object.', 'start': 2196.873, 'duration': 4.023}], 'summary': 'Function update progress called every time a song plays.', 'duration': 61.391, 'max_score': 2167.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw2167238.jpg'}, {'end': 2393.313, 'src': 'embed', 'start': 2361.227, 'weight': 1, 'content': [{'end': 2369.655, 'text': "Okay, so another thing we want to be able to do, and it pauses, notice it pauses and the progress bar stays, it doesn't restart.", 'start': 2361.227, 'duration': 8.428}, {'end': 2378.445, 'text': 'Now, another thing I want to do is be able to click anywhere on the progress bar and have it go to that point in the song.', 'start': 2371.721, 'duration': 6.724}, {'end': 2384.868, 'text': "So what we can do is down here, we'll say progress.", 'start': 2379.025, 'duration': 5.843}, {'end': 2393.313, 'text': "Let's say progress container and we want to add an event listener.", 'start': 2386.769, 'duration': 6.544}], 'summary': 'Enhancing user experience with progress bar functionality and event listener for song navigation.', 'duration': 32.086, 'max_score': 2361.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw2361227.jpg'}, {'end': 2573.934, 'src': 'embed', 'start': 2536.513, 'weight': 0, 'content': [{'end': 2539.016, 'text': "So now you can click and it'll go wherever you want.", 'start': 2536.513, 'duration': 2.503}, {'end': 2546.743, 'text': 'Now, the very last thing we want to do is when the song ends, you want it to go to the next one, because right now, let me just show you.', 'start': 2540.297, 'duration': 6.446}, {'end': 2558.67, 'text': "So it's just going to do this.", 'start': 2557.15, 'duration': 1.52}, {'end': 2561.191, 'text': "And obviously we don't want that.", 'start': 2559.611, 'duration': 1.58}, {'end': 2562.211, 'text': 'We want it to keep going.', 'start': 2561.231, 'duration': 0.98}, {'end': 2564.352, 'text': 'So the audio.', 'start': 2562.351, 'duration': 2.001}, {'end': 2569.713, 'text': 'So the audio API gives us an event.', 'start': 2566.412, 'duration': 3.301}, {'end': 2573.934, 'text': "So let's say add event listener and we can listen for ended.", 'start': 2569.753, 'duration': 4.181}], 'summary': 'Using the audio api to play songs and transition to the next one when the current song ends.', 'duration': 37.421, 'max_score': 2536.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw2536513.jpg'}], 'start': 2139.505, 'title': 'Creating html5 audio player', 'summary': 'Covers creating an html5 audio player, including adding a progress bar, navigating through the song, and automatic song transitions.', 'chapters': [{'end': 2272.555, 'start': 2139.505, 'title': 'Creating progress bar for html5 audio', 'summary': "Covers adding a progress bar to an html5 audio player, utilizing the 'time update' event to continuously update the progress bar with the song's current time and duration.", 'duration': 133.05, 'highlights': ["Utilizing the 'time update' event to continuously update the progress bar with the song's current time and duration, achieved by adding an event listener to the HTML5 audio tag. This ensures the progress bar moves along with the playing of the song.", 'Demonstrating how to access the duration and current time of the song using the event object, showcasing the use of console logs to display the current time and total duration of the song.']}, {'end': 2644.828, 'start': 2272.735, 'title': 'Creating a music player with html5 audio api', 'summary': 'Demonstrates creating a music player with the html5 audio api, including implementing a progress bar, allowing users to click on the progress bar to navigate through the song, and automatically transitioning to the next song when the current one ends.', 'duration': 372.093, 'highlights': ['Implementing a progress bar The tutorial demonstrates implementing a progress bar for the music player, allowing users to visualize the progression of the song.', 'Allowing users to click on the progress bar to navigate through the song The tutorial shows how users can interact with the progress bar to navigate through the song by clicking on it, updating the current time of the audio element.', "Automatically transitioning to the next song when the current one ends The tutorial explains how to utilize the 'ended' event of the audio API to transition to the next song automatically when the current one ends, providing a seamless music playback experience."]}], 'duration': 505.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QTHRWGn_sJw/pics/QTHRWGn_sJw2139505.jpg', 'highlights': ['Automatically transitioning to the next song when the current one ends', 'Allowing users to click on the progress bar to navigate through the song', 'Implementing a progress bar for the music player', "Utilizing the 'time update' event to continuously update the progress bar with the song's current time and duration"]}], 'highlights': ['Promo code available for a discounted price for a course offering 20 web projects with Vanilla JavaScript on Udemy.', 'The chapter focuses on creating a music player using HTML, CSS, and JavaScript.', 'The chapter demonstrates adding JavaScript to create a music player that can play songs and switch between them, with the ability to display a progress bar and navigate to specific points in the song.', 'The demo showcases a simple implementation of the music player, encouraging users to customize it with their own music and images.', 'The chapter covers the creation of navigation buttons with IDs and classes, including previous, play, and next buttons.', 'The highlight provides specific instructions for setting a linear gradient background using CSS, including the specific color values in RGB and percentage for the gradient.', 'Setting flex direction to column to align items vertically The speaker demonstrates how to set the flex direction to column to align items vertically, ensuring the layout is appropriate for the web page.', 'Adding background color, border radius, and box shadow to music container The chapter explains the process of adding a white background color, a border radius of 15 pixels, and a box shadow with specific color values to the music container, enhancing its visual appeal.', 'Creating a rotating animation for an image using keyframes and setting it to spin 360 degrees over a three-second duration.', 'Controlling the animation play state based on music playback by pausing it when the song is not playing and running it when the song is playing.', 'Setting up navigation with flex display, aligning items to the center, and justifying the content to the center for a visually appealing layout.', 'The chapter covers the styling of buttons with specific color codes, font sizes, padding, and margins, including a light color (#DFDFDF), a different color (#CDCDC0), and setting the font size to 20 pixels for the former and 30 pixels for the latter.', 'The setting of a background color with an alpha value (RGBA 255, 0.5) for the music info section is also part of this chapter.', 'Describing the process of styling and positioning elements using CSS The speaker explains the specific CSS properties such as border radius, position, width, opacity, transition, and transform, providing a clear understanding of their application.', 'Setting up functionalities using JavaScript The transcript covers the JavaScript code for loading songs, updating song details, and dynamically changing the song index, demonstrating practical implementation of JavaScript functionalities.', 'Using CSS transition and transform properties for smooth element movements The speaker demonstrates the use of transition and transform properties to create smooth movements, with a specific focus on setting durations, easing effects, and transitions for improved user experience.', 'The chapter demonstrates the implementation of HTML5 audio tag functionality, including play, pause, previous, and next buttons, with the ability to navigate through songs and manipulate the play icon.', 'Implementing play and pause functionality for a music player, allowing users to toggle between playing and pausing the song.', 'Adding event listeners for the play button to trigger the play and pause actions based on the current state of the song playing.', 'The implementation includes dynamically changing the play button icon to a pause button when the audio is playing and vice versa, providing a visual indication of the current play state.', 'Toggling play and pause actions based on the current state of the song playing, with specific functions created for playing and pausing the song.', 'The functionality also allows for navigating between songs, with the ability to loop back to the beginning when reaching the end of the song list.', 'Automatically transitioning to the next song when the current one ends', 'Allowing users to click on the progress bar to navigate through the song', 'Implementing a progress bar for the music player', "Utilizing the 'time update' event to continuously update the progress bar with the song's current time and duration"]}