将声音添加到滑块

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/是一个很好的。