javascript - 根据AnalyserNode数据修改不透明度

Question

我正在尝试根据音频文件的音量来设置某些文本的不透明度。

我发现this codepen几乎具有相同的功能，但是我对JS还是很陌生，无法完全解析Mandy在SCSS和Variable Font轴方面的工作。

我只想在0到1之间调节不透明度。

HTML

<p class="animating-text">Lorem ipsum bacon!</p>

Javascript (根据链接的演示，我尽了最大的努力来尝试尝试做的事情)

// Audio code from Ruth's Demo!! - https://codepen.io/Rumyra/pen/jomXeG
console.clear;
// create audio context and make sure it gets activated
const audioCtx = new AudioContext();
let data = new Uint8Array(2);

// create analyser 
const analyserNode = new AnalyserNode(audioCtx, {
    fftSize: 64,
    maxDecibels: -25,
    minDecibels: -60,
    smoothingTimeConstant: 0.5,
});

function getAnalyserData() {
    requestAnimationFrame(getAnalyserData);
    analyserNode.getByteFrequencyData(data);

    const minOpacity = 0;
    const maxOpacity = 1;

    const minEventValue = 0;
    const maxEventValue = 255;

    // Get the current event value
    const element = document.getElementsByClassName("animating-text");
    element.style.opacity = "0";

    if (data[0] === 255) {
        element.style.opacity = "1";
        return
    } else {
        /// not quite clear what to do here
  }
}

// set draw after stream has started
function getStreamData() {
    // pipe in analysing to getUserMedia
    return navigator.mediaDevices.getUserMedia({ audio: true, video: false })
        .then(stream => audioCtx.createMediaStreamSource(stream))
        .then(source => {
            source.connect(analyserNode);
        });
}

// resume
window.addEventListener("click", event => {
    audioCtx.resume();
    getStreamData().then(getAnalyserData);
})

Answer 1

此链接中的示例https://codepen.io/LakshithaMadushan/pen/VwvxVNM

1)注释font-variation-settings: "yest" var(--yest); ，并在style.css 中的下方添加 opacity: var(--yest); 。

2)在script.js文件中，我们需要将 fluidAxisVariation 函数的最后一行更新为element.style.setProperty(axisCustomPropertyName, newAxisValue/1000);。
(我们需要在0到1之间调节不透明度，这就是将newAxisValue除以1000的原因)