control volume and play .mp3 on click (div)

Question

I keep getting new idea's thus new problems and questions so Im asking for help again!

Problem/what I would like solved : I have 4 .mp3 files, -I want to be able to click on a div/ahref and start the sound. -I want to be able to play MULTIPLE files at once -I'd love a volume slider for all the sounds or for each sound separately

I already came a long way thanks to SO, here is what I have at the moment: http://eduweb.hhs.nl/~14042568/Help/

$(document).ready(function(){ //ready document, execute function
$(".parent").click(function(){ //add event to class
    var color = $(this).data("color") //add variable get color-data
    $("#home").css("background-color", color); //change property
    var audio = new Audio('./mp3/piano.mp3'); //only plays piano<-- PROBLEM
    audio.play(); //play sound
});
});

the purple(right top) is already working, the problem is the jQuery is fixed on playing one sound only, this is a problem as I said.

THANKS :)

Answer 1

Have you looked into html5's <audio> tag? It does a lot of the things that you are looking for. Here is the link for more info.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

EDIT

Here is all you need to do with the html audio tag:

<audio src="directoryToFile/subDir/yourSong.mp3" controls></audio>

The attribute controls gives you the play button, the volume, mute, time, and the select which part of the song to play slider.

To be honest not every browser will play mp3's so the way to get around that is to put multiple sources to the same song but in different formats. Like so:

<audio controls>
    <source src="dir/yourSong.mp3" type="audio/mp3">
    <source src="dir/yourSong.ogg" type="audio/ogg">
    <source src="dir/yourSong.3gp" type="audio/3gp">
    <p>Your browser does not support the <code>audio</code> element </p>
</audio>

This allows the which ever browser the user is using to decide what is best for it.

There is the loop attribute which allows the song to repeat when done.

Then there is the preload="" attribute. This is used for large files you can set it equal to none, auto or metadata

Finally, if you want your site to be really annoying you can give the element the autoplay attribute (please, I beg you to don't use the autoplay).

The best part is no JavaScript or JQuery needed. Sure you can do more fancy things with the audio tag using JS with JQuery but it isn't required.