questions

Autoplay.js Animation and audio on load

Rate this post

I need the animation and audio play function to load/play on load. It loads and pauses when clicked. However when the page loads, I would like the animation to load along with the playback of the audio file.

I have tried to use the var playing=true; but it does not seem to affect the autoplay feature.

 

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 />

 

✔️Solution:

The animated bars and the audio itself play on the user clicking the equaliser. This is achieved by running the function play. To make them play automatically on load we need to sense the onload event.

Just a couple of alterations are needed. The flag playing should be set to false initially and window.onload set to play. Here’s the revised snippet. Note, some systems (such as Safari on IOS) do not allow automatic playing of sound and there has to be some user interaction to start. This snippet has been tested on Windows10 with Edge, Firefox, Chrome and IE11 and seems to be OK.

 

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 />
<script>
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: 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>

Leave a Reply

Your email address will not be published.

Back to top button