Есть скрипт, который выводит на экран визуализацию звука с микрофона, но он всегда по центру, я нее могу его позиционировать (пробовал засунуть его в див и сам див отпозиционировать, не помогло)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id = "show">Старт</button>
<div class="voice">
<script src="script.js"></script>//вот этот скрипт
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
CSS:
body{
margin: 0%;
background: #0f0f11;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.logo{
margin: 2px;
border-radius: 30px;
}
h1{
color: whitesmoke;
cursor: pointer;
font-style: italic;
}
#show{
position: fixed;
top: 20vw;
width: 10vw;
height: 10vw;
border-radius: 50%;
border: none;
background-color: #61B458;
font: 15pt "Times New Roman";
color: white;
}
.voice{
position: fixed;
top: 20vw;
}
JavaScript:
var body, num, array, width, context, logo, myElements, analyser, src, height;
body = document.querySelector('body');
num = 32;
array = new Uint8Array(num*2);
width = 10;
window.onclick = function(){
if(context) return;
body.querySelector('h1').remove();
for(var i = 0 ; i < num ; i++){
logo = document.createElement('div');
logo.className = 'logo';
logo.style.background = 'red';
logo.style.minWidth = width+'px';
body.appendChild(logo);
}
myElements = document.getElementsByClassName('logo');
context = new AudioContext();
analyser = context.createAnalyser();
navigator.mediaDevices.getUserMedia({
audio: true
}).then(stream => {
src = context.createMediaStreamSource(stream);
src.connect(analyser);
loop();
}).catch(error => {
alert(error + '\r\n\ Отклонено. Страница будет обновлена!');
location.reload();
});
}
function loop() {
window.requestAnimationFrame(loop);
analyser.getByteFrequencyData(array);
for(var i = 0 ; i < num ; i++){
height = array[i+num];
myElements[i].style.minHeight = height+'px';
myElements[i].style.opacity = 0.008*height;
}
}
Простой
