Audio Toggle Button with Icons<\/title>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n \/* Styling for the toggle button *\/\r\n .audio-toggle {\r\n width: 50px;\r\n height: 50px;\r\n background-color: #007BFF;\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: 20px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n }\r\n\r\n .audio-toggle:hover {\r\n background-color: #0056b3;\r\n transform: scale(1.1);\r\n }\r\n\r\n .audio-toggle.on {\r\n background-color: #28A745;\r\n }\r\n\r\n .audio-toggle.on:hover {\r\n background-color: #1e7e34;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <button id=\"audioToggle\" class=\"audio-toggle\">\r\n <i class=\"fas fa-play\"><\/i> \r\n <\/button>\r\n\r\n \r\n <audio id=\"audioPlayer\" src=\"https:\/\/dudleyboys.xyz\/quote\/wp-content\/uploads\/2025\/01\/vlog-music-beat-trailer-showreel-promo-background-intro-theme-274290.mp3\" loop><\/audio>\r\n\r\n <script>\r\n \/\/ JavaScript to control the audio toggle\r\n const audioToggle = document.getElementById('audioToggle');\r\n const audioPlayer = document.getElementById('audioPlayer');\r\n const playIcon = 'fas fa-play';\r\n const pauseIcon = 'fas fa-pause';\r\n\r\n audioToggle.addEventListener('click', () => {\r\n const icon = audioToggle.querySelector('i');\r\n if (audioPlayer.paused) {\r\n audioPlayer.play();\r\n icon.className = pauseIcon; \/\/ Switch to pause icon\r\n audioToggle.classList.add('on');\r\n } else {\r\n audioPlayer.pause();\r\n icon.className = playIcon; \/\/ Switch to play icon\r\n audioToggle.classList.remove('on');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Audio Toggle Button with Icons<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1903","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/posts\/1903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/comments?post=1903"}],"version-history":[{"count":13,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/posts\/1903\/revisions"}],"predecessor-version":[{"id":1918,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/posts\/1903\/revisions\/1918"}],"wp:attachment":[{"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/media?parent=1903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/categories?post=1903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/tags?post=1903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Audio Toggle Button with Icons<\/title>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n \/* Styling for the toggle button *\/\r\n .audio-toggle {\r\n width: 50px;\r\n height: 50px;\r\n background-color: #007BFF;\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: 20px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n }\r\n\r\n .audio-toggle:hover {\r\n background-color: #0056b3;\r\n transform: scale(1.1);\r\n }\r\n\r\n .audio-toggle.on {\r\n background-color: #28A745;\r\n }\r\n\r\n .audio-toggle.on:hover {\r\n background-color: #1e7e34;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <button id=\"audioToggle\" class=\"audio-toggle\">\r\n <i class=\"fas fa-play\"><\/i> \r\n <\/button>\r\n\r\n \r\n <audio id=\"audioPlayer\" src=\"https:\/\/dudleyboys.xyz\/quote\/wp-content\/uploads\/2025\/01\/vlog-music-beat-trailer-showreel-promo-background-intro-theme-274290.mp3\" loop><\/audio>\r\n\r\n <script>\r\n \/\/ JavaScript to control the audio toggle\r\n const audioToggle = document.getElementById('audioToggle');\r\n const audioPlayer = document.getElementById('audioPlayer');\r\n const playIcon = 'fas fa-play';\r\n const pauseIcon = 'fas fa-pause';\r\n\r\n audioToggle.addEventListener('click', () => {\r\n const icon = audioToggle.querySelector('i');\r\n if (audioPlayer.paused) {\r\n audioPlayer.play();\r\n icon.className = pauseIcon; \/\/ Switch to pause icon\r\n audioToggle.classList.add('on');\r\n } else {\r\n audioPlayer.pause();\r\n icon.className = playIcon; \/\/ Switch to play icon\r\n audioToggle.classList.remove('on');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Audio Toggle Button with Icons<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1903","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/posts\/1903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/comments?post=1903"}],"version-history":[{"count":13,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/posts\/1903\/revisions"}],"predecessor-version":[{"id":1918,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/posts\/1903\/revisions\/1918"}],"wp:attachment":[{"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/media?parent=1903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/categories?post=1903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dudleyboys.xyz\/quote\/wp-json\/wp\/v2\/tags?post=1903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}