{"id":53473,"date":"2015-09-04T08:23:14","date_gmt":"2015-09-04T12:23:14","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=53473"},"modified":"2017-07-28T05:51:23","modified_gmt":"2017-07-28T09:51:23","slug":"cherryframework-3-how-to-insert-an-auto-played-background-audio-using-html5","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-3-how-to-insert-an-auto-played-background-audio-using-html5.html","title":{"rendered":"CherryFramework 3. How to insert an auto-played background audio using HTML5"},"content":{"rendered":"

\r\n

This tutorial shows you how to insert HTML5 audio object that will be invisible and played automatically when you visit your WordPress website.<\/p>\r\n

CherryFramework 3. How to insert an auto-played background audio using HTML5<\/a><\/p>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n

In order to insert a HTML5 audio object in a WordPress template, you should perform the following:<\/p>\r\n

    \r\n
  1. \r\n

    Upload the audio file to the wp-content\/themes\/themeXXXXX\/audio<\/strong> folder. If the folder doesn’t exist yet, create one. We recommend using the MP3<\/strong> audio type since it is supported by all modern browsers.<\/p>\r\n<\/li>\r\n

  2. \r\n

    Copy the header.php file<\/strong> from the wp-content\/themes\/CherryFramework<\/strong> folder to the wp-content\/themes\/themeXXXXX<\/strong> folder if the file doesn’t already exist there.<\/p>\r\n<\/li>\r\n

  3. \r\n

    Open up the wp-content\/themes\/themeXXXXX\/header.php<\/strong> file in any code editor.<\/p>\r\n<\/li>\r\n

  4. \r\n

    Insert the following code right before the closing head<\/strong> tag:<\/p>\r\n

    \r\n<script type=\"text\/javascript\">\r\n\t(function($) {\r\n\t\t$(document).ready(function() {\r\n\t\t\tvar audio = new Audio();\r\n\t\t\taudio.src = \"<?php echo get_stylesheet_directory_uri(); ?>\/audio\/file_name.mp3\";\r\n\t\t\taudio.loop = true;\r\n\t\t\taudio.play();\r\n\t\t});\r\n\t})(jQuery);\r\n<\/script>\r\n<\/head>\r\n\t\t\t<\/pre>\r\n
    Where file_name.mp3<\/strong> is the name of the background audio file.<\/p>\r\n
    If you add the line audio.loop = true;<\/code> the audio will start over again when finished:<\/p>\r\n
    \"WordPress._How<\/a>\r\n\t\t<\/li>\r\n
  5. \r\n
    Save the changes to the header.php<\/strong> file and upload it to the server. Now when you reload the page of your site, you’ll hear the background audio.<\/p>\r\n<\/li>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    CherryFramework 3. How to insert an auto-played background audio using HTML5<\/a><\/p>\r\n<\/p>\r\n
    <\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial shows you how to insert HTML5 audio object that will be invisible and played automatically when you visit your Wordpress website.<\/p>\n","protected":false},"author":85,"featured_media":53480,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[897,2055,1008,1339,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53473"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=53473"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53473\/revisions"}],"predecessor-version":[{"id":82302,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53473\/revisions\/82302"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/53480"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=53473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=53473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=53473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}