Animated Bars Smaller

user_7184532 0
Viewed 57

I am trying to make the "animated bars" smaller. I have tried achieving this by editing the values of "height" in the CSS, as well as the starting values in the JS file

is there a code or setting to be changed elsewhere in the JS file for this to be achieved?

This is the Original Working Version:

var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 


//A function to return a random number between a min and a max value
function randomNumber(min, max) {
  number =  Math.floor((Math.random()*(max-min))+ min);
  return number;
}

//Initialise starting values
var purple, blue, cyan, green, yellow, orange, red;
purple = 40;
blue = 35;
cyan = 45;
green = 35;
yellow = 45;
orange = 20;
red = 50;

//To start with the equalizer is paused
var playing=false; //WAS true

// A Function to change the height of a column more or less randomly
function changeHeight(column, height) {
  height-=randomNumber(-20,20);
  if (height>100) height=100;
  if (height<2) height=2;
  column.style.height=height + "px";  
  return height;
}


//A Function that will be run every 50ms to animate the equalizer
function animate() {
  if (playing) {
    purple = changeHeight(document.getElementById("purple"),purple);     blue = changeHeight(document.getElementById("blue"),blue); 
    cyan = changeHeight(document.getElementById("cyan"),cyan); 
    green = changeHeight(document.getElementById("green"),green); 
    yellow = changeHeight(document.getElementById("yellow"),yellow); 
    orange = changeHeight(document.getElementById("orange"),orange); 
    red = changeHeight(document.getElementById("red"),red); 
    
    //Repeat this function every 50 ms
    setTimeout(animate, 60);
  }
}

//A Function to play or pause the animation
function play() {
  if (playing) {
    playing=false;
    document.getElementById("button").value="Play"; 
    x.pause(); 
  } else {
    playing=true;
    document.getElementById("button").value="Pause";
    x.play(); 
    animate();
  }
}

window.onload = play;//ADDED
.equalizer {
  text-align: center;
  margin: 10px auto;
  width: max-content;
  position: fixed;
  bottom: 0px;
  right: 5px;
  z-index: 99999;
  cursor:pointer;
  background-size: cover;
  background-color: black;
  padding:10px;
}


.column {
  display: inline-block;
  width: 4px;
  margin: 1px;
}

#purple {
  height: 20px;
  background-color: #ffffff;
}

#blue {
  height: 30px;
  background-color: #ffffff;
}

#cyan {
  height: 25px;
  background-color: #ffffff;
}

#green {
  height: 28px;
  background-color: #ffffff;
}

#yellow {
  height: 22px;
  background-color: #ffffff;
}

#orange {
  height: 25px;
  background-color: #ffffff;
}

#red {
  height: 22px;
  background-color: #ffffff;
}

#black {
  display: inline-block;
  height:30px;
  width: 1px;
  background-color: #000000;
    
}
<script>
var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>
<div class="equalizer" onclick="JavaScript: play();" value="Play" id="button">
  <span class="column" id="purple"></span>
  <span class="column" id="blue"></span>
  <span class="column" id="cyan"></span>
  <span class="column" id="green"></span>
  <span class="column" id="yellow"></span>
  <span class="column" id="orange"></span>
  <span class="column" id="red"></span>
  <span id="black"></span>
  <br />

<audio id="myAudio">
  
  <source src="https://neue.run-time.co.za/wp-content/uploads/2020/11/Connected-Original-Mix-Melosense.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

This is after attempting to make the equalizer bars smaller by updating the height in CSS and JS files:

var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 


//A function to return a random number between a min and a max value
function randomNumber(min, max) {
  number =  Math.floor((Math.random()*(max-min))+ min);
  return number;
}

//Initialise starting values
var purple, blue, cyan, green, yellow, orange, red;
purple = 10;
blue = 15;
cyan = 13;
green = 14;
yellow = 11;
orange = 13;
red = 11;

//To start with the equalizer is paused
var playing=false; //WAS true

// A Function to change the height of a column more or less randomly
function changeHeight(column, height) {
  height-=randomNumber(-20,20);
  if (height>100) height=100;
  if (height<2) height=2;
  column.style.height=height + "px";  
  return height;
}


//A Function that will be run every 50ms to animate the equalizer
function animate() {
  if (playing) {
    purple = changeHeight(document.getElementById("purple"),purple);     blue = changeHeight(document.getElementById("blue"),blue); 
    cyan = changeHeight(document.getElementById("cyan"),cyan); 
    green = changeHeight(document.getElementById("green"),green); 
    yellow = changeHeight(document.getElementById("yellow"),yellow); 
    orange = changeHeight(document.getElementById("orange"),orange); 
    red = changeHeight(document.getElementById("red"),red); 
    
    //Repeat this function every 50 ms
    setTimeout(animate, 60);
  }
}

//A Function to play or pause the animation
function play() {
  if (playing) {
    playing=false;
    document.getElementById("button").value="Play"; 
    x.pause(); 
  } else {
    playing=true;
    document.getElementById("button").value="Pause";
    x.play(); 
    animate();
  }
}

window.onload = play;//ADDED
.equalizer {
  text-align: center;
  margin: 10px auto;
  width: max-content;
  position: fixed;
  bottom: 0px;
  right: 5px;
  z-index: 99999;
  cursor:pointer;
  background-size: cover;
  background-color: black;
  padding:10px;
}


.column {
  display: inline-block;
  width: 4px;
  margin: 1px;
}

#purple {
  height: 10px;
  background-color: #ffffff;
}

#blue {
  height: 15px;
  background-color: #ffffff;
}

#cyan {
  height: 13px;
  background-color: #ffffff;
}

#green {
  height: 14px;
  background-color: #ffffff;
}

#yellow {
  height: 11px;
  background-color: #ffffff;
}

#orange {
  height: 13px;
  background-color: #ffffff;
}

#red {
  height: 11px;
  background-color: #ffffff;
}

#black {
  display: inline-block;
  height:20px;
  width: 1px;
  background-color: #000000;
    
}
<script>
var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>
<div class="equalizer" onclick="JavaScript: play();" value="Play" id="button">
  <span class="column" id="purple"></span>
  <span class="column" id="blue"></span>
  <span class="column" id="cyan"></span>
  <span class="column" id="green"></span>
  <span class="column" id="yellow"></span>
  <span class="column" id="orange"></span>
  <span class="column" id="red"></span>
  <span id="black"></span>
  <br />

<audio id="myAudio">
  
  <source src="https://neue.run-time.co.za/wp-content/uploads/2020/11/Connected-Original-Mix-Melosense.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

wordpress css html jquery javascript
1 Answers

Every 60ms, the changeHeight function is called for each band.

So there are two numbers to change to customize it:

height-=randomNumber(-20,20);  // The 20 here, to calculate a random number
if (height>100) height=100;    // The 100 here, to avoid a height more than 100

I made 2 additionnal variables in the code below, so you can adjust the numbers to the desired effect: randomHeightChange and maxHeight.

var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 


//A function to return a random number between a min and a max value
function randomNumber(min, max) {
  number =  Math.floor((Math.random()*(max-min))+ min);
  return number;
}

//Initialise starting values
var purple, blue, cyan, green, yellow, orange, red;
purple = 10;
blue = 15;
cyan = 13;
green = 14;
yellow = 11;
orange = 13;
red = 11;

//To start with the equalizer is paused
var playing=false; //WAS true

//To set the heights
var randomHeightChange = 5;
var maxHeight = 20;

// A Function to change the height of a column more or less randomly
function changeHeight(column, height) {
  height-=randomNumber(-randomHeightChange,randomHeightChange);
  if (height>maxHeight) height=maxHeight;
  if (height<2) height=2;
  column.style.height=height + "px";  
  return height;
}


//A Function that will be run every 50ms to animate the equalizer
function animate() {
  if (playing) {
    purple = changeHeight(document.getElementById("purple"),purple);     blue = changeHeight(document.getElementById("blue"),blue); 
    cyan = changeHeight(document.getElementById("cyan"),cyan); 
    green = changeHeight(document.getElementById("green"),green); 
    yellow = changeHeight(document.getElementById("yellow"),yellow); 
    orange = changeHeight(document.getElementById("orange"),orange); 
    red = changeHeight(document.getElementById("red"),red); 
    
    //Repeat this function every 50 ms
    setTimeout(animate, 60);
  }
}

//A Function to play or pause the animation
function play() {
  if (playing) {
    playing=false;
    document.getElementById("button").value="Play"; 
    x.pause(); 
  } else {
    playing=true;
    document.getElementById("button").value="Pause";
    x.play(); 
    animate();
  }
}

window.onload = play;//ADDED
.equalizer {
  text-align: center;
  margin: 10px auto;
  width: max-content;
  position: fixed;
  bottom: 0px;
  right: 5px;
  z-index: 99999;
  cursor:pointer;
  background-size: cover;
  background-color: black;
  padding:10px;
}


.column {
  display: inline-block;
  width: 4px;
  margin: 1px;
}

#purple {
  height: 10px;
  background-color: #ffffff;
}

#blue {
  height: 15px;
  background-color: #ffffff;
}

#cyan {
  height: 13px;
  background-color: #ffffff;
}

#green {
  height: 14px;
  background-color: #ffffff;
}

#yellow {
  height: 11px;
  background-color: #ffffff;
}

#orange {
  height: 13px;
  background-color: #ffffff;
}

#red {
  height: 11px;
  background-color: #ffffff;
}

#black {
  display: inline-block;
  height:20px;
  width: 1px;
  background-color: #000000;
    
}
<script>
var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>
<div class="equalizer" onclick="JavaScript: play();" value="Play" id="button">
  <span class="column" id="purple"></span>
  <span class="column" id="blue"></span>
  <span class="column" id="cyan"></span>
  <span class="column" id="green"></span>
  <span class="column" id="yellow"></span>
  <span class="column" id="orange"></span>
  <span class="column" id="red"></span>
  <span id="black"></span>
  <br />

<audio id="myAudio">
  
  <source src="https://neue.run-time.co.za/wp-content/uploads/2020/11/Connected-Original-Mix-Melosense.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

user_21595280
Related