MadlySane’s Audio Player<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css\">\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n padding: 20px;\n text-align: center;\n }\n .container {\n background-color: #ffffff;\n border: 1px solid #dddddd;\n border-radius: 10px;\n padding: 20px;\n max-width: 800px;\n margin: 0 auto;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n .audio-player {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n .audio-player button {\n background: none;\n border: none;\n font-size: 32px;\n cursor: pointer;\n color: #333;\n }\n .audio-player button:focus {\n outline: none;\n }\n .audio-player input[type=\"range\"] {\n width: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>MadlySane’s Audio Player<\/h1>\n <div class=\"audio-player\">\n <button id=\"playPauseBtn\"><i class=\"fas fa-play\"><\/i><\/button>\n <input type=\"range\" id=\"seekBar\" value=\"0\" max=\"100\">\n <\/div>\n <div id=\"player\" style=\"width:0; height:0; overflow:hidden;\"><\/div>\n <\/div>\n\n \n <script>\n let tag = document.createElement('script');\n tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n document.body.appendChild(tag);\n <\/script>\n\n <script>\n let player;\n let isPlaying = false;\n\n function onYouTubeIframeAPIReady() {\n player = new YT.Player('player', {\n height: '0',\n width: '0',\n videoId: '5WMvjSPaPzQ',\n playerVars: {\n autoplay: 0,\n controls: 0\n },\n events: {\n onReady: onPlayerReady\n }\n });\n }\n\n function onPlayerReady(event) {\n const playPauseBtn = document.getElementById('playPauseBtn');\n playPauseBtn.addEventListener('click', () => {\n if (isPlaying) {\n player.pauseVideo();\n playPauseBtn.innerHTML = '<i class=\"fas fa-play\"><\/i>';\n } else {\n player.playVideo();\n playPauseBtn.innerHTML = '<i class=\"fas fa-pause\"><\/i>';\n }\n isPlaying = !isPlaying;\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>MadlySane’s Audio Player MadlySane’s Audio Player<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-1770","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=1770"}],"version-history":[{"count":5,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1770\/revisions"}],"predecessor-version":[{"id":6158,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1770\/revisions\/6158"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=1770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1770,"date":"2025-01-05T16:59:59","date_gmt":"2025-01-05T16:59:59","guid":{"rendered":"https:\/\/madlysane.com\/?page_id=1770"},"modified":"2025-09-26T00:35:56","modified_gmt":"2025-09-26T05:35:56","slug":"audio","status":"publish","type":"page","link":"https:\/\/madlysane.site\/en\/audio\/","title":{"rendered":"Audio"},"content":{"rendered":"\n\n\n\n \n \n MadlySane’s Audio Player<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css\">\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n padding: 20px;\n text-align: center;\n }\n .container {\n background-color: #ffffff;\n border: 1px solid #dddddd;\n border-radius: 10px;\n padding: 20px;\n max-width: 800px;\n margin: 0 auto;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n .audio-player {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n .audio-player button {\n background: none;\n border: none;\n font-size: 32px;\n cursor: pointer;\n color: #333;\n }\n .audio-player button:focus {\n outline: none;\n }\n .audio-player input[type=\"range\"] {\n width: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>MadlySane’s Audio Player<\/h1>\n <div class=\"audio-player\">\n <button id=\"playPauseBtn\"><i class=\"fas fa-play\"><\/i><\/button>\n <input type=\"range\" id=\"seekBar\" value=\"0\" max=\"100\">\n <\/div>\n <div id=\"player\" style=\"width:0; height:0; overflow:hidden;\"><\/div>\n <\/div>\n\n \n <script>\n let tag = document.createElement('script');\n tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n document.body.appendChild(tag);\n <\/script>\n\n <script>\n let player;\n let isPlaying = false;\n\n function onYouTubeIframeAPIReady() {\n player = new YT.Player('player', {\n height: '0',\n width: '0',\n videoId: '5WMvjSPaPzQ',\n playerVars: {\n autoplay: 0,\n controls: 0\n },\n events: {\n onReady: onPlayerReady\n }\n });\n }\n\n function onPlayerReady(event) {\n const playPauseBtn = document.getElementById('playPauseBtn');\n playPauseBtn.addEventListener('click', () => {\n if (isPlaying) {\n player.pauseVideo();\n playPauseBtn.innerHTML = '<i class=\"fas fa-play\"><\/i>';\n } else {\n player.playVideo();\n playPauseBtn.innerHTML = '<i class=\"fas fa-pause\"><\/i>';\n }\n isPlaying = !isPlaying;\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>MadlySane’s Audio Player MadlySane’s Audio Player<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-1770","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=1770"}],"version-history":[{"count":5,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1770\/revisions"}],"predecessor-version":[{"id":6158,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1770\/revisions\/6158"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=1770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}