{"id":2122,"date":"2023-02-09T06:31:31","date_gmt":"2023-02-09T06:31:31","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=2122"},"modified":"2024-02-13T08:12:45","modified_gmt":"2024-02-13T08:12:45","slug":"music-player-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/music-player-javascript\/","title":{"rendered":"Custom Music Player with JavaScript &amp; HTML (Free Code)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2122\" class=\"elementor elementor-2122\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-da62abb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"da62abb\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ae9c9bc\" data-id=\"ae9c9bc\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9da0ec6 elementor-widget elementor-widget-text-editor\" data-id=\"9da0ec6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Do you want to create <b>music player using javascript<\/b>? If your answer is yes then this article is for you.<\/p><p>In this tutorial you will learn how to create a simple javascript audio player. This is a basic javascript music player but I built it with all kinds of options.<\/p><p>Earlier I shared a tutorial on an <b>html5 audio player<\/b>. But it&#8217;s very basic and doesn&#8217;t have all the advanced features. If you know basic JavaScript then you will hopefully like this web music player javascript project.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8b02285 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8b02285\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e363afb\" data-id=\"e363afb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-74b703f elementor-widget elementor-widget-image\" data-id=\"74b703f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1000\" height=\"435\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript.webp\" class=\"attachment-large size-large wp-image-2126\" alt=\"Custom Music Player with JavaScript\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b3510d5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b3510d5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b829ead\" data-id=\"b829ead\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b32a742 elementor-widget elementor-widget-text-editor\" data-id=\"b32a742\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this music player html css we can control and change the music. Besides, I can see the monthly image and progress. I made the basic structure of this <b>simple javascript audio player<\/b> with html. Then designed it by css. Finally, I activated the <b>web music player project<\/b> by JavaScript.<\/p><p><a href=\"https:\/\/foolishdeveloper.com\/build-a-music-player-using-javascript\/\">Build a Music Player Using JavaScript &amp;#8211; Free Demo + Code<\/a><\/p><p>There are many tutorials on the internet to create this project (Build a Music Player using HTML CSS &amp; JavaScript) but this article will be the best for you. Because here I have made this Music Player with JavaScript very simple keeping the beginners in mind. In addition, I have explained JavaScript step by step.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-19b4983 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"19b4983\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f28958b\" data-id=\"f28958b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4db67b2 elementor-widget elementor-widget-heading\" data-id=\"4db67b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">javascript music player<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-efef095 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"efef095\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c089596\" data-id=\"c089596\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-35a8c2d elementor-widget elementor-widget-text-editor\" data-id=\"35a8c2d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>JavaScript music player refers to a player that is built using JavaScript programming language. This type of music player can be used to play audio files on a website or web application. It can be implemented as a standalone player or integrated into a larger application. <b>JavaScript music players<\/b> typically use HTML5&#8217;s audio API to play audio files, although here are created by pure JavaScript.<\/p><p>There are many ways to create a <b>custom web music player project<\/b>. both as standalone libraries and as plugins for popular front-end frameworks like React and Angular. Some popular JavaScript music players include. <span style=\"background-color: var(--base-3); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: inherit;\">Below I have given a preview of this Music Player JavaScript. Hopefully you can understand how it works.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7d211ec elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7d211ec\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c8d8ddd\" data-id=\"c8d8ddd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0e47e4e elementor-widget elementor-widget-html\" data-id=\"0e47e4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"codepen\" data-height=\"402\" data-theme-id=\"light\" data-default-tab=\"result\" data-slug-hash=\"jOppmXN\" data-preview=\"true\" data-user=\"groundtutorial\" style=\"height: 402px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\r\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/groundtutorial\/pen\/jOppmXN\" target=\"_blank\" rel=\"noopener\">\r\n  Custom Music Player with JavaScript<\/a> by Ground Tutorial (<a href=\"https:\/\/codepen.io\/groundtutorial\" target=\"_blank\" rel=\"noopener\">@groundtutorial<\/a>)\r\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span>\r\n<\/p>\r\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a8be365 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a8be365\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c573e94\" data-id=\"c573e94\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-81ccc3c elementor-widget elementor-widget-text-editor\" data-id=\"81ccc3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see in the preview above it is a very nicely made <b>javascript music player <\/b>with playlist. Here first I have created a box on the web page in which you can see some function buttons and an image. That image is basically the image of the music, here if you change the music, the image will change.<\/p><p>Another box will appear when we play the music. In that box we will see progress now which will help to backward and forward the music. That box will hide again when we close the music.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-60d18dd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"60d18dd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a58bb47\" data-id=\"a58bb47\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-982c484 elementor-widget elementor-widget-heading\" data-id=\"982c484\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create Custom Music Player in JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8d83ca2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8d83ca2\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-42893b9\" data-id=\"42893b9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3de5413 elementor-widget elementor-widget-text-editor\" data-id=\"3de5413\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are many tutorials on the internet from which you can create Custom Music Player. But there is no good explanation for beginners.<\/p><p>Here you will find music player javascript code, live preview, necessary explanation and step by step guide. If you only want the source code, you can use the source code button below the article.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-94d1cf5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"94d1cf5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0a73af3\" data-id=\"0a73af3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7041468 elementor-widget elementor-widget-heading\" data-id=\"7041468\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1:  Basic structure of JavaScript Music Player<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c798f22 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c798f22\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9343ade\" data-id=\"9343ade\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cf27956 elementor-widget elementor-widget-text-editor\" data-id=\"cf27956\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Using these HTML and css codes I created a basic structure for this music player. Within this basic structure, we will add all the information.<\/p><p>This Custom JavaScript Music Player has no fixed width or height, it will set its own size based on the amount of content and <i>padding: 20px 30px<\/i>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-01a4b50 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"01a4b50\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-377a6ff\" data-id=\"377a6ff\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-686f638 elementor-widget elementor-widget-code-highlight\" data-id=\"686f638\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"music-container\" id=\"music-container\">\r\n \r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5a4f9d6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5a4f9d6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f0495af\" data-id=\"f0495af\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0a5fd54 elementor-widget elementor-widget-code-highlight\" data-id=\"0a5fd54\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  background-color: #345d80;\r\n  font-family: \"Rubik\", sans-serif;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  margin: 0;\r\n}\r\n\r\n.music-container {\r\n  background-color: #fff;\r\n  border-radius: 15px;\r\n  box-shadow: 0 3px 10px 0 rgba(186, 184, 184, 0.6);\r\n  display: flex;\r\n  padding: 20px 30px;\r\n  position: relative;\r\n  margin: 100px 0;\r\n  z-index: 10;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-154a5a3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"154a5a3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-684871e\" data-id=\"684871e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a766912 elementor-widget elementor-widget-image\" data-id=\"a766912\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1000\" height=\"435\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-1.webp\" class=\"attachment-large size-large wp-image-2127\" alt=\"Basic structure of JavaScript Music Player\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-1.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-1-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-1-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-827a03a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"827a03a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7dbb2cf\" data-id=\"7dbb2cf\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a7e3b15 elementor-widget elementor-widget-heading\" data-id=\"a7e3b15\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Add progress bar to Music Player<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-275f080 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"275f080\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b64aaa2\" data-id=\"b64aaa2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-be9d88f elementor-widget elementor-widget-text-editor\" data-id=\"be9d88f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we need to create a music progress bar box. In this box we can change the duration of the music and rewind the music. Here <i>opacity: 0<\/i> is used which means this box will not be visible in normal state.<\/p><p>As you can see in the preview we can see a box of Music Player and a box that doesn&#8217;t. When we are playing the music we can see this progress bar box.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f2a8989 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f2a8989\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b14183e\" data-id=\"b14183e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-91dc4ba elementor-widget elementor-widget-code-highlight\" data-id=\"91dc4ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"music-info\">\r\n  <h2 id=\"title\" class=\"title\"><\/h2>\r\n  <div class=\"progress-container\" id=\"progress-container\">\r\n    <div class=\"progress\" id=\"progress\"><\/div>\r\n  <\/div>\r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fb0b7a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fb0b7a0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8a41643\" data-id=\"8a41643\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-13c0bcc elementor-widget elementor-widget-code-highlight\" data-id=\"13c0bcc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.music-info {\r\n  background-color: rgba(255,255,255,0.5);\r\n  border-radius: 15px 15px 0 0;\r\n  position: absolute;\r\n  width: calc(100% - 40px);\r\n  padding: 10px 10px 10px 150px;\r\n  top: 0;\r\n  left: 20px;\r\n  opacity: 0;\r\n  transform: translateY(0%);\r\n  transition: transform 0.3s ease-in, opacity 0.3s ease-in;\r\n  z-index: 0;\r\n}\r\n\r\n.music-container.play .music-info {\r\n  opacity: 1;\r\n  transform: translateY(-100%);\r\n}\r\n\r\n.music-info h2 {\r\n  font-size: 1rem;\r\n  font-weight: bold;\r\n  margin: 0;\r\n}\r\n\r\n.progress-container {\r\n  background-color: #fff;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n  margin: 10px 0;\r\n  height: 4px;\r\n  width: 100%;\r\n}\r\n\r\n.progress {\r\n  background-color: #fe8daa;\r\n  border-radius: 5px;\r\n  height: 100%;\r\n  width: 0%;\r\n  transition: width 0.1s linear;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7c63d83 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c63d83\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-544d856\" data-id=\"544d856\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-72f465f elementor-widget elementor-widget-heading\" data-id=\"72f465f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Add song and image to javascript audio player<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-66a45e9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"66a45e9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-60606ef\" data-id=\"60606ef\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-95f79a4 elementor-widget elementor-widget-text-editor\" data-id=\"95f79a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now in the <b>javascript audio player<\/b> we have added the audio and added an image related to it. Then I designed that image with the following css. Here I have used an image <i>height: 110px<\/i> and <i>border-radius: 50%<\/i> to make it completely round.\u00a0<\/p><p>The image in this music player will cycle. I used <i>transform: rotate<\/i> to make it. Which will continuously rotate it through 360-degree angle.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f3fc22d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f3fc22d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3554d49\" data-id=\"3554d49\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a8f252d elementor-widget elementor-widget-code-highlight\" data-id=\"a8f252d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><audio src=\"https:\/\/github.com\/bradtraversy\/vanillawebprojects\/blob\/master\/music-player\/music\/summer.mp3?raw=true\"\r\n        id=\"audio\"><\/audio>\r\n<div class=\"img-container\">\r\n<img decoding=\"async\" src=\"https:\/\/github.com\/bradtraversy\/vanillawebprojects\/blob\/master\/music-player\/images\/summer.jpg?raw=true\"\r\n          alt=\"music-cover\"\r\n          id=\"cover\" \/>\r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-165feae elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"165feae\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-74ac575\" data-id=\"74ac575\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-86222bc elementor-widget elementor-widget-code-highlight\" data-id=\"86222bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.img-container {\r\n  position: relative;\r\n  width: 110px;\r\n}\r\n\r\n.img-container img {\r\n  border-radius: 50%;\r\n  object-fit: cover;\r\n  height: 110px;\r\n  width: inherit;\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  animation: rotateImage 3s linear infinite;\r\n  animation-play-state: paused;\r\n}\r\n\r\n.img-container::after {\r\n  content: '';\r\n  position: absolute;\r\n  background-color: #fff;\r\n  border-radius: 50%;\r\n  bottom: 100%;\r\n  left: 50%;\r\n  height: 20px;\r\n  width: 20px;\r\n  transform: translate(-50%, 50%);\r\n}\r\n\r\n.music-container.play .img-container img {\r\n  animation-play-state: running;\r\n}\r\n\r\n@keyframes rotateImage {\r\n  from {\r\n    transform: rotate(0deg);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-232c016 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"232c016\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-985a551\" data-id=\"985a551\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bebcc59 elementor-widget elementor-widget-image\" data-id=\"bebcc59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1000\" height=\"435\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-2.webp\" class=\"attachment-large size-large wp-image-2128\" alt=\"Add song and image to javascript audio player\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-2.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-2-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-2-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8ebfd7a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8ebfd7a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a77f0f0\" data-id=\"a77f0f0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-44404c0 elementor-widget elementor-widget-heading\" data-id=\"44404c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Add control option to Music Player<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f56ee5b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f56ee5b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8126683\" data-id=\"8126683\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-759196b elementor-widget elementor-widget-text-editor\" data-id=\"759196b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we need to add control options in the <b>javascript music player with playlist<\/b>. Here we have added three buttons Backward, Play, and Forward. With this button, we can change and stop the previous music.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f08ae21 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f08ae21\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1f874b2\" data-id=\"1f874b2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8033c0d elementor-widget elementor-widget-code-highlight\" data-id=\"8033c0d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"navigation\">\r\n  <button id=\"prev\" class=\"action-btn\">\r\n    <i class=\"fas fa-backward\"><\/i>\r\n  <\/button>\r\n  <button id=\"play\" class=\"action-btn action-btn-big\">\r\n    <i class=\"fas fa-play\"><\/i>\r\n  <\/button>\r\n  <button id=\"next\" class=\"action-btn\">\r\n    <i class=\"fas fa-forward\"><\/i>\r\n  <\/button>\r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1a58225 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1a58225\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-400c191\" data-id=\"400c191\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6a24ca6 elementor-widget elementor-widget-code-highlight\" data-id=\"6a24ca6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.navigation {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1;\r\n}\r\n\r\n.action-btn {\r\n  background-color: #fff;\r\n  border: 0;\r\n  color: #490349;\r\n  font-size: 20px;\r\n  cursor: pointer;\r\n  padding: 10px;\r\n  margin: 0 20px;\r\n}\r\n\r\n.action-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.action-btn:hover, .action-btn.action-btn-big:hover {\r\n  color: #8d91fe;\r\n}\r\n\r\n.action-btn.action-btn-big {\r\n  color: #0c085f;\r\n  font-size: 30px;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-19fa4b3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"19fa4b3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ae02b5a\" data-id=\"ae02b5a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-99b17d9 elementor-widget elementor-widget-image\" data-id=\"99b17d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"435\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-3.webp\" class=\"attachment-large size-large wp-image-2129\" alt=\"Add control option to Music Player\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-3.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-3-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-3-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-293e612 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"293e612\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6f8061b\" data-id=\"6f8061b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-713b553 elementor-widget elementor-widget-heading\" data-id=\"713b553\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 5: Activate Music Player with JavaScript<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ebd075a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ebd075a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37564aa\" data-id=\"37564aa\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-26fe579 elementor-widget elementor-widget-text-editor\" data-id=\"26fe579\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see we have done the <b>music player javascript<\/b> design. Now we need to use javascript to make it work. Hope you will not have any difficulty in understanding the following codes as I have given step by step explanation here.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-80cdc75 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"80cdc75\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2069e13\" data-id=\"2069e13\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-062e59f elementor-widget elementor-widget-heading\" data-id=\"062e59f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">1. Create variables to store Music Player's data<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-26e601c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"26e601c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6533761\" data-id=\"6533761\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-49b890e elementor-widget elementor-widget-text-editor\" data-id=\"49b890e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This code defines several variables that represent elements on the page. The <code><i>musicContainer<\/i><\/code>, <code><i>playButton<\/i><\/code>, <code><i>prevButton<\/i><\/code>, <i><code>nextButton<\/code>,<\/i> <i><code>audio<\/code>, <code>progress<\/code><\/i>, <code>progressContainer<\/code>, <code>title<\/code>, and <code>cover<\/code> variables are used to store references to elements on the page using their <code>id<\/code> values.<\/p><p>The <code>songs<\/code> array stores a list of song names, and the <code><i>songIndex<\/i><\/code> variable is used to keep track of the current song that is being played.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c14e097 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c14e097\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9380668\" data-id=\"9380668\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c31f9f2 elementor-widget elementor-widget-code-highlight\" data-id=\"c31f9f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const musicContainer = document.getElementById(\"music-container\");\r\nconst playButton = document.getElementById(\"play\");\r\nconst prevButton = document.getElementById(\"prev\");\r\nconst nextButton = document.getElementById(\"next\");\r\nconst audio = document.getElementById(\"audio\");\r\nconst progress = document.getElementById(\"progress\");\r\nconst progressContainer = document.getElementById(\"progress-container\");\r\nconst title = document.getElementById(\"title\");\r\nconst cover = document.getElementById(\"cover\");\r\n\r\nconst songs = [\"hey\", \"summer\", \"ukulele\"];\r\nlet songIndex = 1;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-68c7e6d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"68c7e6d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2bb6c2d\" data-id=\"2bb6c2d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d55795a elementor-widget elementor-widget-text-editor\" data-id=\"d55795a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The code sets up references to elements on the page that will be used to control the javascript music player, such as the play and pause buttons, the previous and next buttons, and the audio element that will be used to play the music. The code also sets up references to other elements on the page, such as the title and cover, that may be used to display information about the current song.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dde1bd5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dde1bd5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cdcb688\" data-id=\"cdcb688\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2c09f8d elementor-widget elementor-widget-heading\" data-id=\"2c09f8d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">2. Capitalize the audio titles of the JavaScript music player<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6af6927 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6af6927\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bda23ca\" data-id=\"bda23ca\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0981d7d elementor-widget elementor-widget-text-editor\" data-id=\"0981d7d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This function <code><i>getSongTitle<\/i><\/code> takes in a song name as a parameter and returns a capitalized version of the song name. The function first uses the <code><i>charAt<\/i><\/code> method to get the first character of the song name, then uses the <code><i>toUpperCase<\/i><\/code> method to convert it to uppercase. Finally, the <code>slice<\/code> method is used to get all characters after the first one and concatenate them with the capitalized first character to form the capitalized song title.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34dbc5b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"34dbc5b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5e20f08\" data-id=\"5e20f08\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-60731e1 elementor-widget elementor-widget-code-highlight\" data-id=\"60731e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function getSongTitle(song) {\r\n  return song.charAt(0).toUpperCase() + song.slice(1);\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b47d03 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b47d03\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bd45f1d\" data-id=\"bd45f1d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b0e4a4d elementor-widget elementor-widget-text-editor\" data-id=\"b0e4a4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This function can be useful for formatting the song names before displaying them on the page, as it ensures that the first letter of each song name is capitalized.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-abd1c6d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"abd1c6d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bd847fb\" data-id=\"bd847fb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c45edfa elementor-widget elementor-widget-heading\" data-id=\"c45edfa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">3. Load song name as a parameter<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6e6ffa6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6e6ffa6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f80d209\" data-id=\"f80d209\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-97b1223 elementor-widget elementor-widget-text-editor\" data-id=\"97b1223\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This function <code>loadSong<\/code> takes in a song name as a parameter and loads the song and its associated information into the music player. The function starts by calling the <code><i>getSongTitle<\/i><\/code> function to format the song name, and then sets the <code><i>innerText<\/i><\/code> property of the <code>title<\/code> element to the capitalized song name.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e881045 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e881045\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-05abb83\" data-id=\"05abb83\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-109761f elementor-widget elementor-widget-code-highlight\" data-id=\"109761f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function loadSong(song) {\r\n  title.innerText = getSongTitle(song);\r\n  audio.src = `https:\/\/github.com\/bradtraversy\/vanillawebprojects\/blob\/master\/music-player\/music\/${song}.mp3?raw=true`;\r\n  cover.src = `https:\/\/github.com\/bradtraversy\/vanillawebprojects\/blob\/master\/music-player\/images\/${song}.jpg?raw=true`;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a375148 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a375148\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3605598\" data-id=\"3605598\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e89c44a elementor-widget elementor-widget-text-editor\" data-id=\"e89c44a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, the <code>src<\/code> property of the <code>audio<\/code> element is set to the URL of the MP3 file for the song. This URL is constructed using template literals by concatenating the string <code>\"https:\/\/github.com\/bradtraversy\/vanillawebprojects\/blob\/master\/music-player\/music\/\"<\/code> with the song name and the string <code><i>\".mp3?raw=true\"<\/i><\/code>.<\/p><p>Finally, the <code>src<\/code> property of the <code>cover<\/code> element is set to the URL of the image file for the song. This URL is constructed in a similar way as the URL for the audio file, but points to an image file instead.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-91ad9c0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"91ad9c0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-00f0bd8\" data-id=\"00f0bd8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-55fabf8 elementor-widget elementor-widget-heading\" data-id=\"55fabf8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">4. start playing a song in the music player with javascript<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-13ae411 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"13ae411\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e4e9b86\" data-id=\"e4e9b86\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9a87ed1 elementor-widget elementor-widget-text-editor\" data-id=\"9a87ed1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This function <code><i>playSong<\/i><\/code> is used to start playing a song in the music player with javascript. The function starts by adding the class &#8220;play&#8221; to the <code><i>musicContainer<\/i><\/code> element. This class can be used in CSS to apply styles that are specific to the playing state of the player, such as displaying the album cover or hiding the play button.<\/p><p>Next, the function uses the <code><i>querySelector<\/i><\/code> method to get the first <code>i<\/code> element with the class <i>&#8220;fas&#8221; <\/i>that is a descendant of the <code>playButton<\/code> element. The <code>classList<\/code> property is then used to remove the &#8220;fa-play&#8221; class and add the &#8220;fa-pause&#8221; class to this element. The &#8220;fa-play&#8221; and &#8220;fa-pause&#8221; classes are likely part of the Font Awesome library, and are used to display play and pause icons, respectively.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-681cd82 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"681cd82\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-41e32e6\" data-id=\"41e32e6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e3e4559 elementor-widget elementor-widget-code-highlight\" data-id=\"e3e4559\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function playSong() {\r\n  musicContainer.classList.add(\"play\");\r\n  playButton.querySelector(\"i.fas\").classList.remove(\"fa-play\");\r\n  playButton.querySelector(\"i.fas\").classList.add(\"fa-pause\");\r\n  audio.play();\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ba6e5f8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ba6e5f8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-95d6737\" data-id=\"95d6737\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9b45417 elementor-widget elementor-widget-text-editor\" data-id=\"9b45417\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Finally, the <code>play<\/code> method is called on the <code>audio<\/code> element to start playing the song.<\/p><p>This function is typically called in response to a user clicking the play button. When the song is playing, the function can be used to update the state of the player to reflect this, such as by changing the play button to a pause button and displaying the album cover.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dfa5abb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dfa5abb\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fed762e\" data-id=\"fed762e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c47359c elementor-widget elementor-widget-heading\" data-id=\"c47359c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">5. Pause a song that is currently playing in the music player<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-aecf7f0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"aecf7f0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8b80d92\" data-id=\"8b80d92\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-13723f2 elementor-widget elementor-widget-text-editor\" data-id=\"13723f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This function <code>pauseSong<\/code> is used to pause a song that is currently playing in the JavaScript music player. The function starts by removing the class &#8220;play&#8221; from the <code><i>musicContainer<\/i><\/code> element. This class can be used in CSS to apply styles that are specific to the playing state of the player, such as displaying the album cover or hiding the play button.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-be26045 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"be26045\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7725d17\" data-id=\"7725d17\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-abbe0cc elementor-widget elementor-widget-code-highlight\" data-id=\"abbe0cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function pauseSong() {\r\n  musicContainer.classList.remove(\"play\");\r\n  playButton.querySelector(\"i.fas\").classList.remove(\"fa-pause\");\r\n  playButton.querySelector(\"i.fas\").classList.add(\"fa-play\");\r\n  audio.pause();\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d1aa9c1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d1aa9c1\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-50d9318\" data-id=\"50d9318\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b554acd elementor-widget elementor-widget-text-editor\" data-id=\"b554acd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, the function uses the <code>querySelector<\/code> method to get the first <code>i<\/code> element with the class &#8220;fas&#8221; that is a descendant of the <code>playButton<\/code> element. The <code>classList<\/code> property is then used to remove the &#8220;fa-pause&#8221; class and add the &#8220;fa-play&#8221; class to this element. The <i>&#8220;fa-play&#8221;<\/i> and &#8220;fa-pause&#8221; classes are likely part of the Font Awesome library, and are used to display play and pause icons, respectively.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c2a4a15 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c2a4a15\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8c6953c\" data-id=\"8c6953c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9c2003a elementor-widget elementor-widget-heading\" data-id=\"9c2003a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">6. Play the previous song in the javascript music player<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-955528d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"955528d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5b3fbc4\" data-id=\"5b3fbc4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fec9444 elementor-widget elementor-widget-text-editor\" data-id=\"fec9444\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This function <code><i>prevSong<\/i><\/code> is used to play the previous song in the javascript music player playlist. The function starts by decrementing the <code><i>songIndex<\/i><\/code> variable, which keeps track of the current song in the playlist.<\/p><p>Next, the function checks if the <code>songIndex<\/code> is less than 0. If it is, it means that the first song in the playlist is currently playing, so the <code>songIndex<\/code> is set to the index of the last song in the playlist. This is done by setting <code><i>songIndex<\/i><\/code> to <code><i>songs.length - 1<\/i><\/code>. The <code>songs<\/code> array contains the names of all the songs in the playlist.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-889fbd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"889fbd6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-04a2c43\" data-id=\"04a2c43\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ea1baec elementor-widget elementor-widget-code-highlight\" data-id=\"ea1baec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function prevSong() {\r\n  songIndex--;\r\n  if (songIndex < 0) songIndex = songs.length - 1;\r\n  loadSong(songs[songIndex]);\r\n  playSong();\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a8c3127 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a8c3127\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4ed4918\" data-id=\"4ed4918\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0297ffe elementor-widget elementor-widget-text-editor\" data-id=\"0297ffe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Finally, the function calls the <code><i>loadSong<\/i><\/code> function and passes it the current song in the music playlist. The <code>loadSong<\/code> function is used to load the audio and album cover for a given song.<\/p><p>Once the song has been loaded, the <code>playSong<\/code> function is called to start playing the song.<\/p><p>This function is typically called in response to a user clicking the previous button in the player. The function allows the user to skip to the previous song in the playlist, and starts playing that song.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bb52682 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bb52682\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7e0aa1e\" data-id=\"7e0aa1e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7a99537 elementor-widget elementor-widget-heading\" data-id=\"7a99537\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">7. Play the next song in the Custom Music Player<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d7a5615 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d7a5615\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cbecb7e\" data-id=\"cbecb7e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1edd253 elementor-widget elementor-widget-text-editor\" data-id=\"1edd253\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This function <code>nextSong<\/code> is used to play the next song in the playlist. The function starts by incrementing the <code>songIndex<\/code> variable, which keeps track of the current song in the playlist.<\/p><p>Once the song has been loaded, the <code>playSong<\/code> function is called to start playing the song.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-07a6f6e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"07a6f6e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a56a367\" data-id=\"a56a367\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3409cd2 elementor-widget elementor-widget-code-highlight\" data-id=\"3409cd2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function nextSong() {\r\n  songIndex++;\r\n  if (songIndex > songs.length - 1) songIndex = 0;\r\n  loadSong(songs[songIndex]);\r\n  playSong();\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8d9463d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8d9463d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-33888b4\" data-id=\"33888b4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1bbee14 elementor-widget elementor-widget-heading\" data-id=\"1bbee14\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">8. Update and set the progress bar in the music player<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-258749a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"258749a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-924fed7\" data-id=\"924fed7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8ebad44 elementor-widget elementor-widget-text-editor\" data-id=\"8ebad44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>These two functions, <code>updateProgress<\/code> and <code>setProgress<\/code>, are used to update and set the progress bar in the music player javascript.<\/p><p>The <code>updateProgress<\/code> function takes an event as a parameter and is used to update the width of the progress bar to reflect the current time of the song being played.\u00a0<\/p><p>The function starts by destructuring the <code>duration<\/code> and <code>currentTime<\/code> properties from the <code>audio<\/code> element. The <code>duration<\/code> property is the total length of the song and <code><i>currentTime<\/i><\/code> is the current time of the song that is being played.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3172670 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3172670\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1814c15\" data-id=\"1814c15\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-97211f7 elementor-widget elementor-widget-code-highlight\" data-id=\"97211f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function updateProgress(e) {\r\n  const { duration, currentTime } = e.srcElement;\r\n  const progressPercent = (currentTime \/ duration) * 100;\r\n  progress.style.width = `${progressPercent}%`;\r\n}\r\n\r\nfunction setProgress(e) {\r\n  const width = this.clientWidth;\r\n  const clickX = e.offsetX;\r\n  const duration = audio.duration;\r\n  audio.currentTime = (clickX \/ width) * duration;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-222e7b1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"222e7b1\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-94b8e51\" data-id=\"94b8e51\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d78c826 elementor-widget elementor-widget-text-editor\" data-id=\"d78c826\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, the function calculates the progress percent of the song by dividing the <code>currentTime<\/code> by the <code>duration<\/code> and multiplying it by 100. The progress percent is then used to set the width of the progress bar.<\/p><p>The <code><i>setProgress<\/i><\/code> function is used to set the current time of the song to the position of the progress bar where the user clicked. The function starts by getting the width of the progress container and the x-coordinate of the click event. It then calculates the new <code>currentTime<\/code> of the song by dividing the click x-coordinate by the width of the container and multiplying it by the duration of the song.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3d63ba1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3d63ba1\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6d5d42f\" data-id=\"6d5d42f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5c05b21 elementor-widget elementor-widget-heading\" data-id=\"5c05b21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">9. Various buttons and elements in the music player<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ecee1a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ecee1a6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bc6c820\" data-id=\"bc6c820\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9c2e171 elementor-widget elementor-widget-text-editor\" data-id=\"9c2e171\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>These are the event listeners for the various buttons and elements in the music player Custom Music Player with JavaScript.<\/p><p>The <code>playButton<\/code> has an event listener attached to it that listens for a click event. When the button is clicked, it checks if the <code>musicContainer<\/code> element has a class of &#8220;play&#8221;. If it does, then it pauses the song by calling the <code>pauseSong<\/code> function. If it doesn&#8217;t, it plays the song by calling the <code>playSong<\/code> function.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-75e9eba elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"75e9eba\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c777e50\" data-id=\"c777e50\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4775d7e elementor-widget elementor-widget-code-highlight\" data-id=\"4775d7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ Event Listeners\r\nplayButton.addEventListener(\"click\", () => {\r\n  const isPlaying = musicContainer.classList.contains(\"play\");\r\n  isPlaying ? pauseSong() : playSong();\r\n});\r\n\r\nprevButton.addEventListener(\"click\", prevSong);\r\nnextButton.addEventListener(\"click\", nextSong);\r\n\r\naudio.addEventListener(\"timeupdate\", updateProgress);\r\nprogressContainer.addEventListener(\"click\", setProgress);\r\n\r\naudio.addEventListener(\"ended\", nextSong);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-286a679 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"286a679\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7408e2d\" data-id=\"7408e2d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c4ab397 elementor-widget elementor-widget-text-editor\" data-id=\"c4ab397\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The <code>prevButton<\/code> and <code>nextButton<\/code> elements have event listeners attached to them that listen for a click event. When either button is clicked, it calls the <code>prevSong<\/code> or <code>nextSong<\/code> function, respectively.<\/p><p>The <code>audio<\/code> element has an event listener attached to it that listens for the <code><i>timeupdate<\/i><\/code> event. When this event is triggered, the <code><i>updateProgress<\/i><\/code> function is called to update the progress bar of the music player.<\/p><p>The <code><i>progressContainer<\/i><\/code> element has an event listener attached to it that listens for a click event. When this event is triggered, the <code>setProgress<\/code> function is called to set the current time of the song to the position of the progress bar where the user clicked.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ef8bffb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ef8bffb\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b7d4d4d\" data-id=\"b7d4d4d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ba053bc elementor-widget elementor-widget-heading\" data-id=\"ba053bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">10. Called and passed the song<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-95cedb0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"95cedb0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e9821f5\" data-id=\"e9821f5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-98e28ea elementor-widget elementor-widget-text-editor\" data-id=\"98e28ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The <code>loadSong<\/code> function is called and passed the song at the <code><i>songIndex<\/i><\/code> from the <code>songs<\/code> array. This loads the song and updates the title, audio source, and cover image for the <b>music player in JavaScript<\/b>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-92abb02 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"92abb02\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3fa466d\" data-id=\"3fa466d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2933490 elementor-widget elementor-widget-code-highlight\" data-id=\"2933490\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>loadSong(songs[songIndex]);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-047d95f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"047d95f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-95db643\" data-id=\"95db643\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-594c659 elementor-widget elementor-widget-image\" data-id=\"594c659\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1000\" height=\"435\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript.webp\" class=\"attachment-large size-large wp-image-2126\" alt=\"Custom Music Player with JavaScript\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Music-Player-with-JavaScript-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1bf8c06 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1bf8c06\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d918993\" data-id=\"d918993\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7bd73d0 elementor-widget elementor-widget-text-editor\" data-id=\"7bd73d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hope from above tutorial you got to know how I made this project (How to make audio player in JavaScript).<\/p><p>If there is any problem, you can comment me. Earlier I shared another advanced video player tutorial. If you like the design of this music player in JavaScript, you can watch the video player tutorial. Please comment how you like this <b>HTML and JavaScript audio player<\/b>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-56dbbe07 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"56dbbe07\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-15bbecdf\" data-id=\"15bbecdf\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1d3fedce elementor-align-center elementor-widget elementor-widget-button\" data-id=\"1d3fedce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/codepen.io\/cpe\/pen\/export\/jOppmXN\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Source Code<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7ae0e837 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7ae0e837\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-55b5c92d\" data-id=\"55b5c92d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6a50fbf3 elementor-widget elementor-widget-toggle\" data-id=\"6a50fbf3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"toggle.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-1781\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"button\" aria-controls=\"elementor-tab-content-1781\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>How to play audio onload JavaScript?<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1781\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"region\" aria-labelledby=\"elementor-tab-title-1781\"><p>You can play an audio file in JavaScript using the HTML5 <code>Audio<\/code> object. Here&#8217;s an example of how you can play an audio file when the page loads:<\/p><pre>&lt;script&gt;<br \/>window.onload = function() {<br \/>var audio = new Audio('path\/to\/audio.mp3');<br \/>audio.play();<br \/>}<br \/>&lt;\/script&gt;<\/pre><p>In the code above, we create a new <code>Audio<\/code> object and pass the path to the audio file as a parameter. Then, we use the <code>play()<\/code> method to start playing the audio.<\/p><p>Note that the <code>Audio<\/code> object also provides other methods and properties that you can use to control the playback, such as <code>pause()<\/code>, <code>currentTime<\/code>, <code>duration<\/code>, etc.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-1782\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"button\" aria-controls=\"elementor-tab-content-1782\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>How to create an MP3 player in HTML?<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1782\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"region\" aria-labelledby=\"elementor-tab-title-1782\"><p>To create an MP3 player in HTML, you can use the HTML5 <code>audio<\/code> element along with JavaScript to add controls and interact with the audio playback. Here&#8217;s a simple example of an MP3 player:<\/p><div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans\"><pre>&lt;audio id=\"player\" src=\"path\/to\/audio.mp3\"&gt;&lt;\/audio&gt;<br \/>&lt;br&gt;<br \/>&lt;button id=\"playButton\"&gt;Play&lt;\/button&gt;<br \/>&lt;button id=\"pauseButton\"&gt;Pause&lt;\/button&gt;<br \/><br \/>&lt;script&gt;<br \/>var player = document.getElementById(\"player\");<br \/>var playButton = document.getElementById(\"playButton\");<br \/>var pauseButton = document.getElementById(\"pauseButton\");<br \/><br \/>playButton.addEventListener(\"click\", function() {<br \/>player.play();<br \/>});<br \/><br \/>pauseButton.addEventListener(\"click\", function() {<br \/>player.pause();<br \/>});<br \/>&lt;\/script&gt;<\/pre><\/div><div><p>In the code above, we use the <code>audio<\/code> element to embed an audio file, and add buttons for play and pause controls. We then use JavaScript to bind event listeners to the buttons, which call the <code>play()<\/code> and <code>pause()<\/code> methods on the <code>audio<\/code> element respectively.<\/p><p>You can also add other controls such as volume, skip, and seek, and use the <code>audio<\/code> element&#8217;s properties and methods to interact with the audio playback and display information such as the current time and duration of the audio.<\/p><\/div><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-1783\" class=\"elementor-tab-title\" data-tab=\"3\" role=\"button\" aria-controls=\"elementor-tab-content-1783\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>How to make a media player in JavaScript?<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1783\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"region\" aria-labelledby=\"elementor-tab-title-1783\"><p>Here is a high-level overview of the steps to create a media player in JavaScript:<\/p><ol><li>Create an HTML file to define the structure and layout of your media player.<\/li><li>Add HTML elements such as an audio or video tag to define the media source you want to play.<\/li><li>Add JavaScript to control the playback of the media, such as play, pause, and stop buttons.<\/li><li>Use JavaScript to create an interface to control the media player, such as volume control, time display, and progress bar.<\/li><li>Style your media player using CSS to give it a visually appealing look and feel.<\/li><li>Test your media player and make any necessary changes or modifications.<\/li><\/ol><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"How to play audio onload JavaScript?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>You can play an audio file in JavaScript using the HTML5 <code>Audio<\\\/code> object. Here&#8217;s an example of how you can play an audio file when the page loads:<\\\/p><pre>&lt;script&gt;<br \\\/>window.onload = function() {<br \\\/>var audio = new Audio('path\\\/to\\\/audio.mp3');<br \\\/>audio.play();<br \\\/>}<br \\\/>&lt;\\\/script&gt;<\\\/pre><p>In the code above, we create a new <code>Audio<\\\/code> object and pass the path to the audio file as a parameter. Then, we use the <code>play()<\\\/code> method to start playing the audio.<\\\/p><p>Note that the <code>Audio<\\\/code> object also provides other methods and properties that you can use to control the playback, such as <code>pause()<\\\/code>, <code>currentTime<\\\/code>, <code>duration<\\\/code>, etc.<\\\/p>\"}},{\"@type\":\"Question\",\"name\":\"How to create an MP3 player in HTML?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>To create an MP3 player in HTML, you can use the HTML5 <code>audio<\\\/code> element along with JavaScript to add controls and interact with the audio playback. Here&#8217;s a simple example of an MP3 player:<\\\/p><div class=\\\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans\\\"><pre>&lt;audio id=\\\"player\\\" src=\\\"path\\\/to\\\/audio.mp3\\\"&gt;&lt;\\\/audio&gt;<br \\\/>&lt;br&gt;<br \\\/>&lt;button id=\\\"playButton\\\"&gt;Play&lt;\\\/button&gt;<br \\\/>&lt;button id=\\\"pauseButton\\\"&gt;Pause&lt;\\\/button&gt;<br \\\/><br \\\/>&lt;script&gt;<br \\\/>var player = document.getElementById(\\\"player\\\");<br \\\/>var playButton = document.getElementById(\\\"playButton\\\");<br \\\/>var pauseButton = document.getElementById(\\\"pauseButton\\\");<br \\\/><br \\\/>playButton.addEventListener(\\\"click\\\", function() {<br \\\/>player.play();<br \\\/>});<br \\\/><br \\\/>pauseButton.addEventListener(\\\"click\\\", function() {<br \\\/>player.pause();<br \\\/>});<br \\\/>&lt;\\\/script&gt;<\\\/pre><\\\/div><div><p>In the code above, we use the <code>audio<\\\/code> element to embed an audio file, and add buttons for play and pause controls. We then use JavaScript to bind event listeners to the buttons, which call the <code>play()<\\\/code> and <code>pause()<\\\/code> methods on the <code>audio<\\\/code> element respectively.<\\\/p><p>You can also add other controls such as volume, skip, and seek, and use the <code>audio<\\\/code> element&#8217;s properties and methods to interact with the audio playback and display information such as the current time and duration of the audio.<\\\/p><\\\/div>\"}},{\"@type\":\"Question\",\"name\":\"How to make a media player in JavaScript?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>Here is a high-level overview of the steps to create a media player in JavaScript:<\\\/p><ol><li>Create an HTML file to define the structure and layout of your media player.<\\\/li><li>Add HTML elements such as an audio or video tag to define the media source you want to play.<\\\/li><li>Add JavaScript to control the playback of the media, such as play, pause, and stop buttons.<\\\/li><li>Use JavaScript to create an interface to control the media player, such as volume control, time display, and progress bar.<\\\/li><li>Style your media player using CSS to give it a visually appealing look and feel.<\\\/li><li>Test your media player and make any necessary changes or modifications.<\\\/li><\\\/ol>\"}}]}<\/script>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Do you want to create music player using javascript? If your answer is yes then this article is for you. In this tutorial you will learn how to create a simple javascript audio player. This is a basic javascript music player but I built it with all kinds of options. Earlier I shared a tutorial [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[14,40,12,13],"tags":[273,272],"class_list":["post-2122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-best_javascript","category-css","category-javascript","tag-custom-music-player-with-javascript","tag-music-player","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/2122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=2122"}],"version-history":[{"count":23,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/2122\/revisions"}],"predecessor-version":[{"id":6750,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/2122\/revisions\/6750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/2126"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=2122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=2122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=2122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}