Question

我有13张照片，我将放入一个滑块。我希望每个图像都附有声音，例如，当我到达图像10时，声音10开始播放。

我是jQuery的新手，我想过使用Orbit作为滑块，但我不知道如何将声音整合到其中。

这样做有什么简单的想法吗？

Answer 1

如果您不需要旧版浏览器支持，请查看Web Audio API。 https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

这是一个例子：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);
}

然后，您可以使用其中一个插件回调函数来触发声音：

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

这样的事情应该可以解决问题。

...还有一些框架，它们会为你做一些工作。 http://www.schillmania.com/projects/soundmanager2/是一个不错的选择。

将声音添加到滑块

1 个答案: