Борис К,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
font-family: arial;
}
#show {
padding: 3px;
float: left;
margin-right: 10px;
}
.Div {
float: left;
padding: 5px;
text-align: center;
width: 100px;
}
#blue {
background-color: blue;
}
#green {
background-color: green;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<button id="show">
<p>Click</p>
</button>
<div id="blue" class="Div">
<p>Blue</p>
</div>
<div id="green" class="Div">
<p>Green</p>
</div>
<script type="text/javascript">
var audio = new Audio();
var src = ['https://s3.amazonaws.com/freecodecamp/simonSound1.mp3', 'https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'];
$('.Div').hide();
$('#show').click(function() {
var random = Math.floor(Math.random() * $('.Div').length);
$('.Div').hide().eq(random).show();
audio.pause();
audio.src = src[random];
audio.play();
});
</script>
</body>
</html>