{"id":40237,"date":"2015-01-26T04:50:14","date_gmt":"2015-01-26T09:50:14","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=40237"},"modified":"2017-12-12T09:58:25","modified_gmt":"2017-12-12T14:58:25","slug":"js-animated-how-to-add-a-background-music-using-html","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-add-a-background-music-using-html.html","title":{"rendered":"JS Animated. How to add a background music using HTML"},"content":{"rendered":"

This tutorial shows how to add a background music using HTML 5<\/strong>.<\/p>\r\n\r\nJS Animated. How to add a background music using HTML<\/a>\r\n

The HLTM5 Audio Tag can be used to add background music to any website. The code provided in this tutorial will work on any platform. I will demonstrate the HTML5 Audio functionality.<\/p>\r\n

In this tutorial we will add the HTML5 Audio tag to preload the song and to display the audio controls, autoplay and loop. <\/p>\r\n

The audio tag code will look like the following: <\/p>\r\n

<audio controls autoplay preload loop>\r\n  ...\r\n<\/audio>\r\n<\/pre>\r\n
We will add the audio track in both mp3<\/strong> and ogg<\/strong> format, so that we can get cross browser compatibility. Not all browsers support mp3 and not all browsers support ogg. But using them together we can cover all major browsers.<\/p>\r\n
If you have your audio file in mp3<\/strong> format, we recommend using an open source tool like Audacity<\/a> to convert the file to ogg format. So, our code now looks like this: <\/p>\r\n
Change the src to use your own files. <\/p>\r\n
If you want to get the exact same style used in this tutorial, you can get the entire code below: <\/p>\r\n
<!--background audio--> \r\n  <style media="screen" type="text\/css"> \r\n  #backgroundaudio { \r\n  display: block; \r\n  position: fixed; \r\n  bottom: -43px; \r\n  left: 5px; \r\n  -webkit-transition: all 1s ease-in-out; \r\n  -moz-transition: all 1s ease-in-out; \r\n  -ms-transition: all 1s ease-in-out; \r\n  -o-transition: all 1s ease-in-out; \r\n  transition: all 1s ease-in-out; \r\n  } \r\n  #backgroundaudio:hover { \r\n  bottom: 0; \r\n  -webkit-transition: all 1s ease-in-out; \r\n  -moz-transition: all 1s ease-in-out; \r\n  -ms-transition: all 1s ease-in-out; \r\n  -o-transition: all 1s ease-in-out; \r\n  transition: all 1s ease-in-out; \r\n  } \r\n  #backgroundaudio audio { \r\n  background: #ffffff; \r\n  padding: 5px; \r\n  display: table-cell; \r\n  vertical-align: middle; \r\n  height: 43px; \r\n  z-index: 9998; \r\n  } \r\n  #backgroundaudio i { \r\n  font-size: 40px; \r\n  display: block; \r\n  background: #ffffff; \r\n  padding: 5px; \r\n  width: 50px; \r\n  float: none; \r\n  margin-bottom: -1px; \r\n  z-index: 9999; \r\n  } \r\n  <\/style> \r\n  <div id="backgroundaudio"> \r\n\t  <i class="fa fa-volume-up"><\/i> \r\n\t  <audio autoplay="" controls="" loop="" preload=""> \r\n\t\t  <source src="your_website_url\/Sunrise.ogg" type="audio\/ogg"><\/source> \r\n\t\t  <source src="your_website_url\/Sunrise.mp3" type="audio\/mpeg"><\/source> \r\n\t\t  Your browser does not support the audio element. \r\n\t  <\/audio> \r\n  <\/div><\/pre>\r\n  
In order to add the code, you should do the following:<\/p>\r\n  
    \r\n  
  1. Open html file to edit and paste the code to the desired location in the file:<\/p>\r\n \r\n\"JS_-Animated.How_to_add_a_background_music_using_HTML_5--1\"<\/a>\r\n<\/li>\r\n  
  2. Save changes in the file.<\/p><\/li>\r\n    
  3. Upload audio files to the website root folder:<\/p>\r\n\t\r\n\"JS_-Animated.How_to_add_a_background_music_using_HTML_5--3\"<\/a>\r\n<\/li>\r\n\t\r\n\t
  4. Make sure to update the paths to your audio files in the code you have copied:<\/p>\r\n\t
    \r\n<source src="your_website_url\/Sunrise.ogg" type="audio\/ogg"><\/source> \r\n<source src="your_website_url\/Sunrise.mp3" type="audio\/mpeg"><\/source> \r\n\t<\/pre>\r\n\t\r\n\t<\/li>\r\n\t\r\n\t  <\/ol>\r\n  
    Now the background audio is on your web page:<\/p>\r\n \r\n\"JS_-Animated.How_to_add_a_background_music_using_HTML_5--2\"<\/a>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to add a background music using HTML<\/a>\r\n
    In case you are looking for beautiful wordpress themes music<\/a> selection, feel free to observe them now!<\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to add background music using HTML 5.<\/p>\n","protected":false},"author":60,"featured_media":43200,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1008,2411,516],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/40237"}],"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\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=40237"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/40237\/revisions"}],"predecessor-version":[{"id":83442,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/40237\/revisions\/83442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/43200"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=40237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=40237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=40237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}