繁体 English 中英

音频展示台

[英]Audio Visualizer

原文 2020-11-04 18:09:37 1 0 javascript/ web/ audio

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

    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>

看起来您的帖子主要是代码； 请添加更多详细信息可以像您的帖子主要是代码一样； 请添加更多详细信息。看起来您的帖子主要是代码； 请添加更多详细信息。