CODEWITHSUNDEEP
javascriptjqueryaudio
Chetan
Chetan

Reputation: 11

Adding MP3 to jquery for background music

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.

Upvotes: 3

Views: 3476

Answers (1)

Rahul
Rahul

Reputation: 18557

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.

Upvotes: 1

Related Questions