CODEWITHSUNDEEP
javascripthtml
sleepless_in_seattle
sleepless_in_seattle

Reputation: 2214

Playing multiple looping sounds on a website

Is there a 'best way' to play sounds/music on a website? Should I use JS plugin? SWF app or a HTML element? Also I want it to support volume that can be controlled via HTML slider.

If I want to play multiple sounds/music on top of each other do I have to have a 'player' for each one of them or can I have one player playing multiple sounds?

Last time I needed to add sounds to my website was like 10 years ago so I have no idea what techniques people use nowadays.

Upvotes: 1

Views: 983

Answers (1)

michal
michal

Reputation: 236

It's actually very simple. HTML5 makes it easy by introducing the <audio> tag.

This uses the default audio controls:

<audio loop controls><source src="yoursoundhere.mp3" type="audio/mpeg"></audio>

The loop attribute makes it auto-loop. Add the autoplay attribute if you want it to start playing on load. Multiple audio tags play over each other.

Note that this only works with MP3. Otherwise, you need to change the type of file.

If you want a custom slider, here is something you could try:

<audio loop id="audio"><source src="yoursoundhere.mp3" type="audio/mpeg"></audio>
<script>
//When slider value updates.
function updateSlider(){
var audioplayer = document.getElementByID("audio");
var controlvalue = yourHTMLsliderValue();
audioplayer.volume = controlvalue;
}
//First Time.
var audioplayer = document.getElementByID("audio");
var controlvalue = yourHTMLsliderValue();
audioplayer.volume = controlvalue;
</script>

Also note that the supported audio filetypes are .mp3, .ogg, and .wav, and that this only works in HTML5.

Upvotes: 3

Related Questions