Question

我创建了一个音频可视化器，并希望以渐变的方式可视化音频，但是无法做到。

    var body, num, array, width, context, logo, myElements, analyzer, src, height;

    body = document.querySelector(`body`); 

    num = 64;

    array = new Uint8Array(num*2);

    width = 15;

    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 = //gradient must be here
            logo.style.minWidth = width + `px`;
            body.appendChild(logo);
        }

        myElements = document.getElementsByClassName(`logo`);
        context = new AudioContext();
        analyzer = context.createAnalyser();

        navigator.mediaDevices.getUserMedia({
            audio: true
        }).then(stream => {
            src = context.createMediaStreamSource(stream);
            src.connect(analyzer);
            loop();
        }).catch(error => {
            alert(error);
            location.reload();
        })
    }

    function loop(){
        window.requestAnimationFrame(loop);
        analyzer.getByteFrequencyData(array);
        for (let i = 0; i < num; i++) {
            height = array[i+num];
            myElements[i].style.minHeight = height + `px`;
            myElements[i].style.opacity = 0.008 * height;
        }
    }

您的帖子似乎主要是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。

var body, num, array, width, context, logo, myElements, analyzer, src, height;

body = document.querySelector(`body`); 

num = 55;

array = new Uint8Array(num*2);

width = 15;

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 = `white`;
        logo.style.minWidth = width + `px`;
        body.appendChild(logo);
    }

    myElements = document.getElementsByClassName(`logo`);
    context = new AudioContext();
    analyzer = context.createAnalyser();

    navigator.mediaDevices.getUserMedia({
        audio: true
    }).then(stream => {
        src = context.createMediaStreamSource(stream);
        src.connect(analyzer);
        loop();
    }).catch(error => {
        alert(error + `\r\n Отклонено. Страница будет обновлена!`)
        location.reload();
    })
}

function loop(){
    window.requestAnimationFrame(loop);
    analyzer.getByteFrequencyData(array);
    for (let i = 0; i < num; i++) {
        height = array[i+num];
        myElements[i].style.minHeight = height * 2 + `px`;
        myElements[i].style.opacity = 0.02 * height;
    }
}

body{
    margin: 0% ;
    background: #141423;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo{
    margin: 2px;
    border-radius: 30px;
}
h1{
    color: whitesmoke ;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Click!</h1>
    <audio src="Manfred.mp3" id="audio"></audio>
    <script src="script.js"></script>
</body>
</html>

您的帖子似乎主要是代码；请添加更多详细信息好的，就像您的帖子主要是代码；请添加更多详细信息。看来您的帖子大部分是代码；请添加更多详细信息。

音频可视化器

0 个答案: