Music Player Interface<\/title>\r\n<link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"music-player\" class=\"player\">\r\n <audio id=\"audio-element\">\r\n <source src=\"https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Rathamaarey-Jailer-Tamil-Song.mp3\" type=\"audio\/mpeg\">\r\n Your browser does not support the audio element.\r\n <\/audio>\r\n <div class=\"controls\">\r\n <button id=\"play-pause\" onclick=\"togglePlayPause()\">Play<\/button>\r\n <button id=\"prev\" onclick=\"playPreviousTrack()\">Prev<\/button>\r\n <button id=\"next\" onclick=\"playNextTrack()\">Next<\/button>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div id=\"progress\" class=\"progress\"><\/div>\r\n <\/div>\r\n <div class=\"playlist\">\r\n <ul id=\"playlist\">\r\n <li onclick=\"changeTrack('https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Leo-ordinary-person.mp3', this)\">Leo-ordinary-person<\/li>\r\n <li onclick=\"changeTrack('https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Thala-kodhum-Elangathu.mp3', this)\">Thala-kodhum-Elangathu<\/li>\r\n <li onclick=\"changeTrack('https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Rathamaarey-Jailer-Tamil-Song.mp3', this)\">Rathamaarey-Jailer-Tamil-Song<\/li>\r\n \r\n <\/ul>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<script>\r\n var audio = document.getElementById('audio-element');\r\nvar playlistItems = document.querySelectorAll('#playlist li');\r\nvar tracks = [\r\n 'https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Leo-ordinary-person.mp3',\r\n 'https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Thala-kodhum-Elangathu.mp3',\r\n 'https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Rathamaarey-Jailer-Tamil-Song.mp3',\r\n \/\/ ...add more tracks here\r\n];\r\n\r\nfunction togglePlayPause() {\r\n if (audio.paused) {\r\n audio.play();\r\n updatePlayPauseButton(true);\r\n } else {\r\n audio.pause();\r\n updatePlayPauseButton(false);\r\n }\r\n}\r\n\r\nfunction updatePlayPauseButton(isPlaying) {\r\n var playPauseButton = document.getElementById('play-pause');\r\n playPauseButton.innerText = isPlaying ? 'Pause' : 'Play';\r\n}\r\n\r\nfunction playNextTrack() {\r\n currentTrackIndex = (currentTrackIndex + 1) % tracks.length;\r\n changeTrack(tracks[currentTrackIndex], playlistItems[currentTrackIndex]);\r\n}\r\n\r\nfunction playPreviousTrack() {\r\n currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;\r\n changeTrack(tracks[currentTrackIndex], playlistItems[currentTrackIndex]);\r\n}\r\n\r\nfunction changeTrack(source, element) {\r\n audio.src = source;\r\n audio.play();\r\n updatePlayPauseButton(true);\r\n updatePlaylistHighlight(element);\r\n}\r\n\r\nfunction updatePlaylistHighlight(element) {\r\n if (element) {\r\n playlistItems.forEach(li => li.classList.remove('playing'));\r\n element.classList.add('playing');\r\n }\r\n}\r\n\r\naudio.addEventListener('ended', playNextTrack);\r\n\r\naudio.addEventListener('timeupdate', function() {\r\n var progressBar = document.getElementById('progress');\r\n var percentage = Math.floor((100 \/ audio.duration) * audio.currentTime);\r\n progressBar.style.width = percentage + '%';\r\n});\r\n\r\n\/\/ Adding click event listeners to playlist items\r\nplaylistItems.forEach((item, index) => {\r\n item.addEventListener('click', function() {\r\n currentTrackIndex = index;\r\n changeTrack(tracks[currentTrackIndex], this);\r\n });\r\n});\r\n\r\n \r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Music Player Interface Your browser does not support the audio element. Play Prev Next Leo-ordinary-person Thala-kodhum-Elangathu Rathamaarey-Jailer-Tamil-Song<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"pmpro_default_level":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/pages\/17710"}],"collection":[{"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/comments?post=17710"}],"version-history":[{"count":34,"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/pages\/17710\/revisions"}],"predecessor-version":[{"id":17749,"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/pages\/17710\/revisions\/17749"}],"wp:attachment":[{"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/media?parent=17710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nMusic Player Interface<\/title>\r\n<link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"music-player\" class=\"player\">\r\n <audio id=\"audio-element\">\r\n <source src=\"https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Rathamaarey-Jailer-Tamil-Song.mp3\" type=\"audio\/mpeg\">\r\n Your browser does not support the audio element.\r\n <\/audio>\r\n <div class=\"controls\">\r\n <button id=\"play-pause\" onclick=\"togglePlayPause()\">Play<\/button>\r\n <button id=\"prev\" onclick=\"playPreviousTrack()\">Prev<\/button>\r\n <button id=\"next\" onclick=\"playNextTrack()\">Next<\/button>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div id=\"progress\" class=\"progress\"><\/div>\r\n <\/div>\r\n <div class=\"playlist\">\r\n <ul id=\"playlist\">\r\n <li onclick=\"changeTrack('https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Leo-ordinary-person.mp3', this)\">Leo-ordinary-person<\/li>\r\n <li onclick=\"changeTrack('https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Thala-kodhum-Elangathu.mp3', this)\">Thala-kodhum-Elangathu<\/li>\r\n <li onclick=\"changeTrack('https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Rathamaarey-Jailer-Tamil-Song.mp3', this)\">Rathamaarey-Jailer-Tamil-Song<\/li>\r\n \r\n <\/ul>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<script>\r\n var audio = document.getElementById('audio-element');\r\nvar playlistItems = document.querySelectorAll('#playlist li');\r\nvar tracks = [\r\n 'https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Leo-ordinary-person.mp3',\r\n 'https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Thala-kodhum-Elangathu.mp3',\r\n 'https:\/\/demo10.fastfilings.in\/wp-content\/uploads\/2023\/12\/Rathamaarey-Jailer-Tamil-Song.mp3',\r\n \/\/ ...add more tracks here\r\n];\r\n\r\nfunction togglePlayPause() {\r\n if (audio.paused) {\r\n audio.play();\r\n updatePlayPauseButton(true);\r\n } else {\r\n audio.pause();\r\n updatePlayPauseButton(false);\r\n }\r\n}\r\n\r\nfunction updatePlayPauseButton(isPlaying) {\r\n var playPauseButton = document.getElementById('play-pause');\r\n playPauseButton.innerText = isPlaying ? 'Pause' : 'Play';\r\n}\r\n\r\nfunction playNextTrack() {\r\n currentTrackIndex = (currentTrackIndex + 1) % tracks.length;\r\n changeTrack(tracks[currentTrackIndex], playlistItems[currentTrackIndex]);\r\n}\r\n\r\nfunction playPreviousTrack() {\r\n currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;\r\n changeTrack(tracks[currentTrackIndex], playlistItems[currentTrackIndex]);\r\n}\r\n\r\nfunction changeTrack(source, element) {\r\n audio.src = source;\r\n audio.play();\r\n updatePlayPauseButton(true);\r\n updatePlaylistHighlight(element);\r\n}\r\n\r\nfunction updatePlaylistHighlight(element) {\r\n if (element) {\r\n playlistItems.forEach(li => li.classList.remove('playing'));\r\n element.classList.add('playing');\r\n }\r\n}\r\n\r\naudio.addEventListener('ended', playNextTrack);\r\n\r\naudio.addEventListener('timeupdate', function() {\r\n var progressBar = document.getElementById('progress');\r\n var percentage = Math.floor((100 \/ audio.duration) * audio.currentTime);\r\n progressBar.style.width = percentage + '%';\r\n});\r\n\r\n\/\/ Adding click event listeners to playlist items\r\nplaylistItems.forEach((item, index) => {\r\n item.addEventListener('click', function() {\r\n currentTrackIndex = index;\r\n changeTrack(tracks[currentTrackIndex], this);\r\n });\r\n});\r\n\r\n \r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Music Player Interface Your browser does not support the audio element. Play Prev Next Leo-ordinary-person Thala-kodhum-Elangathu Rathamaarey-Jailer-Tamil-Song<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"pmpro_default_level":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/pages\/17710"}],"collection":[{"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/comments?post=17710"}],"version-history":[{"count":34,"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/pages\/17710\/revisions"}],"predecessor-version":[{"id":17749,"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/pages\/17710\/revisions\/17749"}],"wp:attachment":[{"href":"https:\/\/demo10.fastfilings.in\/index.php\/wp-json\/wp\/v2\/media?parent=17710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}