3

The basic structure of my jquery slider is as follows: HTML:

<div id="slideshow">
    <img src="img1.jpg" style="position:absolute;" class="active" />
    <img src="img2.jpg" style="position:absolute;" />
    <img src="img3.jpg" style="position:absolute;" />
</div>

CSS:

<style type="text/css">
    .active{
        z-index:99;
    }
</style>

Jquery:

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

Now, I want to add a MP3 file to it for playing background music which should have following attributes: autoplay on loading = yes, loop= yes, volume = 50

What code should I use for it and where should it be placed? (don’t want to show controls)

Thank you.

Chetan
  • 11
  • 1
  • 10

1 Answers1

1

You can try like this,

<audio autoplay preload='auto' loop id="myAudio">
  <source src="song name with extension" type="audio/mpeg" >
</audio>

For volume :

var aud = document.getElementById("myAudio");
aud.volume = 0.5; // default 1 means 100%

preload -> The author thinks that the browser should load the entire audio file when the page loads

Note : For mobile, you have to give click event to load audio/video.

Remember you should give absolute path at song name or keep that file

Once try.

It should work.

Rahul
  • 18,271
  • 7
  • 41
  • 60
  • Worked! Thanks. :) By 'absolute path', do you mean url of that mp3? – Chetan Feb 18 '17 at 12:28
  • this means path from root folder. check [link](http://stackoverflow.com/questions/21306512/difference-between-relative-path-and-absolute-path-in-javascript) – Rahul Feb 18 '17 at 12:51
  • or keep that mp3 file in the same folder where your current file – Rahul Feb 18 '17 at 12:52
  • Well, I understand. I uploaded one mp3 file to my Google drive to get an absolute path for it but the URL doesn't give .mp3 extension. Check: https://drive.google.com/open?id=0Bwx2dCRPVvabQlVUUmlxVFRUUnM What went wrong? – Chetan Feb 18 '17 at 13:08
  • ohh, let me give you sample url [here](http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3). What my concern is, if you're doing this on live site, store a sample mp3 file in base path and give that file path to your source src – Rahul Feb 18 '17 at 13:13
  • Yes, I want to use mp3 on my bogger blog, hence, I desire to store these files on Google drive. Didn't quite understand what you mean by ,base path' and how to give it a source src. Just tell me how to use the audio link I posted above to use in the code you have given. Thanks! – Chetan Feb 18 '17 at 13:38
  • ok, if you want to access google drive files, then no need to worry about base path, why can't you put your files on dropbox, its alternative, and also provides user friends urls unlike google drive – Rahul Feb 18 '17 at 13:40
  • Yeah, google drive doesn't provide .mp3 extension for audio and .jpeg for images. Does dropbox provide that? – Chetan Feb 18 '17 at 13:43
  • Yes, give it a try, you will come to know – Rahul Feb 18 '17 at 13:43
  • I am sure it will work, if my answer solves your sort of problem, you can upvote it and accept my answer. Thanks. n remember mate, I am here, for further concern. Thanks – Rahul Feb 18 '17 at 13:45
  • Sure, I would love to upvote. Did lot of research and came to know that cloud services like dropbox or icloud don'y provide this option, only hoisting websites like photobucket or village.photos do. Village.photos is awesome! Posted another question today on stackoverflow. Just check out please! – Chetan Feb 20 '17 at 03:41