如何在javascript中的每個頻譜欄中添加類？

我想使用JavaScript的可視化光譜條..所以我使用網絡音頻API和設法得到輸出......但問題是，如果我通過CSS更改欄顏色所有酒吧有相同的顏色，但如果我隨機顏色通過JavaScript的作品，但不是因爲我想它的工作。酒吧的顏色不斷變化，我希望他們是靜態的。所以我想要做的是添加一個類到每個欄或使顏色靜態。 HTML如何在javascript中的每個頻譜欄中添加類？

`<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Trackest</title> 
    <link rel="stylesheet" href="./css/style.css" /> 
    </head> 

    <body> 
    <header> 
     <nav> 
    <ul> 
     <li class="left logo"><a href="" class="">Trackest</a></li> 
     <li class="sub"><a href="" class="btn right">Welcome</a></li> 
     <li class="sub"><a href="" class="btn right">Welcome</a></li> 
    </ul> 
    </nav> 
    </header> 

    <div class="hero-img"> 
    <div id="img"></div> 
    <div id="player"> 
    <audio id="vir" class="hideIfNoApi" controls="controls" src="Nights.mp3" > </audio> 
     <div id="vis" class="hideIfNoApi"> </div> 
     </div> 
    </div> 

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script src="app.js"></script> 
    </body> 
</html>`

CSS

#player audio { 
    width: 100%; 
} 
#player{ 
top: 50%;} 
#player .showNoApi { 
    display: none; 
} 

.hero-img #vis { 
    position:absolute; 
    width:100%; 
    height:500px; 
    z-index:15; 
bottom: 0; } 

#player #vis > div { 

    width: 2.5%; 
    display: inline-block; 
    position: absolute; 
    bottom: 0px; 
}

的Javascript

$(function() { 
    var context; 
    if (typeof AudioContext !== "undefined") { 
     context = new AudioContext(); 
    } else if (typeof webkitAudioContext !== "undefined") { 
     context = new webkitAudioContext(); 
    } else { 

     $(".showNoApi").show(); 
     return; 
    } 

    var lastTime = 0; 
    var vendors = ['ms', 'moz', 'webkit', 'o']; 
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
     window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; 
     window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] 
            || window[vendors[x] + 'CancelRequestAnimationFrame']; 
    } 

    if (!window.requestAnimationFrame) 
     window.requestAnimationFrame = function (callback, element) { 
      var currTime = new Date().getTime(); 
      var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
       timeToCall); 
      lastTime = currTime + timeToCall; 
      return id; 
     }; 

    if (!window.cancelAnimationFrame) 
     window.cancelAnimationFrame = function (id) { 
      clearTimeout(id); 
     }; 

    var analyser = context.createAnalyser(); 
    analyser.fftSize = 64; 
    var frequencyData = new Uint8Array(analyser.frequencyBinCount); 


    var vis = $("#vis"); 
    var barSpacingPercent = 100/analyser.frequencyBinCount; 
    for (var i = 0; i < analyser.frequencyBinCount; i++) { 
     $("<div/>").css("left", i * barSpacingPercent + "%") 
     .appendTo(vis); 
    } 
    var bars = $("#vis > div"); 
    function randColor() { 
    var color = (function lol(m, s, c) { 
        return s[m.floor(m.random() * s.length)] + 
         (c && lol(m, s, c - 1)); 
       })(Math, 'fe2', 4); 
    return color; 
} 

    function update() { 
     requestAnimationFrame(update); 

     analyser.getByteFrequencyData(frequencyData); 
     bars.each(function (index, bar) { 
      bar.style.height = frequencyData[index] + 'px'; 
      bar.style.background = '#' + randColor(); 
      bar.classList.add('YourClass'); 
     }); 
    }; 

    $("#vir").bind('canplay', function() { 
    var source = context.createMediaElementSource(this); 
    source.connect(analyser); 
    analyser.connect(context.destination); 
    }); 

    update(); 
});

這裏的演示：experimentos.ml/galaxy/ 圖片：image

來源

2015-09-09 Bhavesh Deshmukh

設置背景顏色或類，你開始更新之前。我只包含相關更改：

var bars = $("#vis > div"); 

bars.each(function (index, bar) { // this will run only once. Decide if you want to set the background or the class 
    bar.style.background = '#' + randColor(); 
    bar.classList.add('barColor' + index); // if you want to use classes, create the maximum expected amount of classes with names like barColor1, barColor2... and then you can use index to set the right class 
}); 

function randColor() { 
    var color = (function lol(m, s, c) { 
     return s[m.floor(m.random() * s.length)] + 
     (c && lol(m, s, c - 1)); 
    })(Math, 'fe2', 4); 
    return color; 
} 

function update() { 
    requestAnimationFrame(update); 

    analyser.getByteFrequencyData(frequencyData); 
    bars.each(function (index, bar) { 
     bar.style.height = frequencyData[index] + 'px'; 
     /** bar.style.background = '#' + randColor(); - remove this so it won't change all the time **/ 
     /** bar.classList.add('YourClass'); - remove this so it won't be set all the time **/ 
    }); 
};

來源

2015-09-09 21:00:33

如何在javascript中的每個頻譜欄中添加類？

回答

相關問題