javascript - 将声音添加到滑块

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/是一个不错的选择。