使用 Angularjs 创建条形音箱

Question

我研究了不同的解决方案，例如我通过按钮改进的解决方案：http://jsfiddle.net/3mhJJ/。

$(".button").click(function(){
  $(".bar").each(function(i) {fluctuate($(this));});
});

我希望能够暂停录音，并在声音结束时停止动画（我没有包括它，但想象一下声音持续 10 秒）

我从来没有用过jQuery，但我熟悉AngularJS，你认为我有什么办法只用JQuery或混合JQuery 和 AngularJS 在一起？

否则，我想重新创建类似 Soundcloud 的东西，但我不确定它有多难。

感谢您的建议。

Answer 1

不完全确定我理解你想要的是什么，但start/stop动画的方法如下：

http://jsfiddle.net/kyysdo4n/2/（已更新以包含自动停止功能）

var stopAnimation = false;
var closeTimeoutHandle = null;

function fluctuate(bar) {
    if(stopAnimation){
      return;
    }

    var amplitude = Math.random() * 10;
    console.log(amplitude);
    var height = amplitude * 4;
    //Animate the equalizer bar repeatedly
    bar.animate({
        height: height
    }, function() {
        fluctuate($(this));
    });
}

$("#btnStart").click(function(i) {
    stopAnimation = false;
    fluctuate($('.bar'));

    closeTimeoutHandle = setTimeout(function(){
        stopAnimation = true;
    }, 10 * 1000); //10 seconds
});


$("#btnStop").click(function(i) {
    stopAnimation = true;
    fluctuate($('.bar'));
    // clear the timeout so that if the user starts the animation again
    // it doesn't get stopped when the initial timeout gets called
    if(closeTimeoutHandle){
        clearTimeout(closeTimeoutHandle);
    }
});

我不确定这是否有帮助.. 如果没有，请添加更多详细信息，也许是更多代码？

使用 Angularjs 创建条形音箱

create a soundbar with Angularjs

javascript

jquery

soundcloud

angularjs