將聲音添加到滑塊

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