淡入/淡出声音在2个不同的Div中播放

Question

JQuery有很好的可视化fadeIn/fadeOut函数，可以在不同的元素上工作，比如div。对于声音我也需要同样的东西。

更准确地说，如果两个YouTube iFrame API播放器在两个不同的div中播放，有没有办法使它们之间的声音淡入/淡出？

Answer 1

试试这样的东西，

$('<div/>').animate({ left: 100 }, {
     duration: 1000,
     step: function(now, fx){
    var volume = now;
        player.setVolume(volume)
     }
   });

step函数将在val的每次更改时给您一个回调，您可以调用youtube播放器来设置音量。

我不确定youtube播放器对音量设置的响应速度有多快…但是这种方法使您可以像在div中一样使用jquery tween效果

fadeTo函数的用法示例

$('<div/>').fadeTo({
     duration: 1000,
     step: function(now, fx){
        var volume = now * 100;
        player.setVolume(volume)
     }
},1);

Answer 2

这种技术被称为交叉淡入淡出。如果YouTube应用编程接口允许你访问音量控制(我还没有用过YouTube应用编程接口播放器)，那么至少做一个线性交叉淡入淡出应该是相对容易的(即。不是在曲线上)。然而，jQuery本身并不提供额外的抽象层来控制任何特定的媒体播放器(或一般的音频API)。