{"id":125634,"date":"2023-07-30T21:23:00","date_gmt":"2023-07-30T20:23:00","guid":{"rendered":"https:\/\/wpsimplefix.com\/?p=125634"},"modified":"2026-09-24T17:40:43","modified_gmt":"2026-09-24T17:40:43","slug":"play-audio-on-click-with-elementor","status":"publish","type":"post","link":"https:\/\/chkserv.com\/blog\/play-audio-on-click-with-elementor\/","title":{"rendered":"Play Audio On Click With Elementor"},"content":{"rendered":"\n

Let’s add an audio on click button. In today’s fast-paced digital world, websites need to offer engaging and interactive content to capture the attention of visitors. One way to achieve this is by incorporating audio that plays on click using Elementor<\/a>, a popular page builder for WordPress<\/a>.<\/p>\n\n\n\n

Why Include audio on click?<\/h2>\n\n\n\n

Audio is a powerful tool to convey emotions, provide additional context, and evoke specific responses from your website visitors. Whether it’s background music, sound effects, or spoken content.<\/p>\n\n\n\n

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

Setup By Step<\/h2>\n\n\n\n
    \n
  • Go to the elementor page you wish to add the Audio on click<\/strong> button<\/li>\n\n\n\n
  • Create your button, if not already done so.\n
      \n
    • You could even use an icon or image, the following steps are exactly the same.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
        \n
      • Upload the audio MP3<\/strong><\/em> file you wish to use and note down the full url to the file.<\/li>\n\n\n\n
      • Add the HTML code element under your button and paste the below code.<\/li>\n<\/ul>\n\n\n\n
        <audio> id=\"audio\" src=\"PLACE-AUDIO-FILE-URL-HERE\"><\/audio<\/span>><\/pre>\n\n\n\n
        \"html-element\"<\/figure>\n\n\n\n
        \"html-code-audio-click\"<\/figure>\n\n\n\n
        \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n\n\n\n
          \n
        • Replace the PLACE-AUDIO-FILE-URL-HERE<\/strong> text at the bottom of the code with the full url, of the audio file, you wish to use.<\/li>\n\n\n\n
        • If you wish the file to restart each time on click, remove the \/\/ <\/strong>from line 10<\/strong>.<\/li>\n<\/ul>\n\n\n\n
          \/\/ audio.currentTime = 0<\/xmp><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the class ID from the HTML code on line 2 = <strong>audio-button<\/strong><\/li>\n\n\n\n<li>Click on your button and go to the advanced tab &gt; layout.<\/li>\n\n\n\n<li>Paste <strong>audio-button<\/strong> in to the <em>CSS Classes<\/em> box.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/07\/audio-button-css-classes.webp\" alt=\"audio-button-css-classes\" style=\"aspect-ratio:0.5548672566371682;width:627px;height:auto\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Save your page and now go a try it out.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Incorporating audio elements that play on click using <a href=\"https:\/\/be.elementor.com\/visit\/?bta=207785&amp;nci=5383\" target=\"_blank\" rel=\"nofollow noopener\">Elementor<\/a> can significantly enhance your website&#8217;s engagement, storytelling capabilities, and overall user experience. By integrating audio, you can create a memorable browsing journey that sets your website apart from the crowd.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s add an audio on click button. In today&#8217;s fast-paced digital world, websites need to offer engaging and interactive content to capture the attention of visitors. One way to achieve this is by incorporating audio that plays on click using Elementor, a popular page builder for WordPress. Why Include audio on click? Audio is a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":116313,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[207,208,14,9,209,7],"class_list":["post-125634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-audio","tag-click","tag-elementor","tag-file","tag-play","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/125634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/comments?post=125634"}],"version-history":[{"count":12,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/125634\/revisions"}],"predecessor-version":[{"id":136635,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/125634\/revisions\/136635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/media\/116313"}],"wp:attachment":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/media?parent=125634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/categories?post=125634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/tags?post=125634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}