自动播放.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上使用Edge，Firefox，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>