CODEWITHSUNDEEP
javascriptjqueryaudioweb-audio-api
Naemy
Naemy

Reputation: 536

Add sound to a slider

I have 13 photos, that I'll put into a single slider. I'd like to have a sound attached to each image, and that, for example, when I get to image 10, sound 10 starts to play.

I'm completely new to jQuery, and I thought about using Orbit as a slider, but I have no idea how to integrate sound into it.

Any simple idea to do that ?

Upvotes: 1

Views: 1808

Answers (1)

gherkins
gherkins

Reputation: 14983

if you don't need legacy browser support take a look at the Web Audio API. https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

here's an example: http://www.html5rocks.com/en/tutorials/webaudio/intro/

//call the init function on window load
window.onload = init;
var context;
var bufferLoader;
//create 2 audio sources... as there were 2 in the example linked above
var source1 = context.createBufferSource();
var source2 = context.createBufferSource();

function init() {
  //initialise the audio context
  context = new webkitAudioContext();

  //init preloading of sounds
  bufferLoader = new BufferLoader(
    context,
    [
      '../sounds/br-jam-loop.wav',
      '../sounds/laughter.wav',
    ],
    finishedLoading  // <- callback function when finished loading
    );

  bufferLoader.load();
}

function finishedLoading(bufferList) {
  //set the buffers of the sources from the loaded bufferlist
  source1.buffer = bufferList[0];
  source2.buffer = bufferList[1];

  //connect the sources to the output
  source1.connect(context.destination);
  source2.connect(context.destination);
}

You can then use one of your plugins callback functions to trigger the sound like:

$('#featured').orbit({
     afterSlideChange: function(){
       source1.noteOn(0);
       source2.noteOn(0);
     }
});

something like that should do the trick.

...there are also some frameworks out there, that'll do some of the work for you. http://www.schillmania.com/projects/soundmanager2/ is a good one.

Upvotes: 2

Related Questions