I'm trying to get both the animation and audio to start playing automatically when the page loads. Currently, the animation pauses when clicked, but I want it to load along with the audio playback.
I attempted to use var playing=true; to enable autoplay, but it didn't seem to work as expected.
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=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();
}
}.equalizer {
text-align: center;
margin: 10px auto;
width: 380px;
}
.column {
display: inline-block;
width: 10px;
margin: 2px;
}
#purple {
height: 40px;
background-color: #000000;
}
#blue {
height: 35px;
background-color: #000000;
}
#cyan {
height:45px;
background-color: #000000;
}
#green {
height: 35px;
background-color: #000000;
}
#yellow {
height: 45px;
background-color: #000000;
}
#orange {
height: 20px;
background-color: #000000;
}
#red {
height: 50px;
background-color: #000000;
}
#black {
display: inline-block;
height: 120px;
width: 1px;
background-color: #ffffff;
}<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>
<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 />