加载Autoplay.js动画和音频

Question

我需要的动画和音频播放功能加载/播放加载。它会加载并在单击时暂停。但是，当页面加载时，我希望动画随着音频文件的回放一起加载。

我曾尝试使用var playing=true;，但似乎不影响自动播放功能。

​

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

​

Answer 1

动画条和音频本身在用户点击均衡器时播放。这是通过运行函数play实现的。要让它们在加载时自动播放，我们需要检测onload事件。

只需要做几处改动。标志playing最初应设置为false，而window.onload应设置为play。以下是修改后的代码片段。请注意，某些系统(如IOS上的Safari )不允许自动播放声音，必须进行一些用户交互才能启动。这段代码已经在Windows10、火狐、Chrome和IE11上进行了测试，看起来没问题。

​

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>

​