Currently, I am exploring ways to animate text opacity based on the volume of an audio file.
While browsing online, I came across this specific codepen example, which showcases a similar concept. However, as I am relatively new to JavaScript, I find it challenging to understand Mandy's implementation involving SCSS and Variable Font axis.
My main objective is to smoothly alter the opacity of text between 0 and 1.
HTML
<p class="animating-text">Lorem ipsum bacon!</p>Javascript (I have made an attempt at replicating the desired functionality based on the provided demo)
// Here is some audio code inspired by Ruth's Demo!! - https://codepen.io/Rumyra/pen/jomXeG
console.clear;
// Initializing the audio context and ensuring its activation
const audioCtx = new AudioContext();
let data = new Uint8Array(2);
// Creating an analyser node
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;
// Retrieving the current event value
const element = document.getElementsByClassName("animating-text");
element.style.opacity = "0";
if (data[0] === 255) {
element.style.opacity = "1";
return
} else {
/// Unclear what action to take here
}
}
// Obtaining stream data after starting
function getStreamData() {
// Connecting analysis to getUserMedia
return navigator.mediaDevices.getUserMedia({ audio: true, video: false })
.then(stream => audioCtx.createMediaStreamSource(stream))
.then(source => {
source.connect(analyserNode);
});
}
// Resuming operation upon user interaction
window.addEventListener("click", event => {
audioCtx.resume();
getStreamData().then(getAnalyserData);
})