When the oncuechange event is triggered, it initiates a smooth fade-in/fade-out animation within the HTML P tag

Question

When the oncuechange event is triggered, it initiates a smooth fade-in/fade-out animation within the HTML P tag

Just starting out with web development and learning JavaScript. Trying to create a webpage that displays lyrics synced with an audio file inside a p tag. The subtitles are sourced from a vet file extension and I am using the "cuechange" event in JavaScript to inject the text into the p tag. Everything is working well so far, but I want to add a fade-in/fade-out animation effect for each sentence of the lyrics when the cue changes. I attempted to add a CSS animation directly to the p element, but it's not triggering with an event listener. Could someone offer guidance on this?

GitHub link: https://github.com/beatzonic/Audio-Lyrics-Subtitle

 document.getElementById('my_audio').textTracks[0].addEventListener('cuechange', function() {
    document.getElementById('lyric').innerText = this.activeCues[0].text;
    
});

body{
    
    margin: 0;
    padding: 0;
}


#lyrics_container{
    width: 100%;
    height: auto;
    padding: 30px;
    box-sizing: border-box;
}

p{
    
    font-size: 2em;
    color: red;
    font-weight: 600;

}



@keyframes fadein{
    
   0% {
        opacity:0;
    }
    100% {
        opacity:1;
    } 
    
}

    <div id="lyrics_container">

        
        <audio id="my_audio" controls>
          <source src="https://github.com/beatzonic/Audio-Lyrics-Subtitle/raw/master/in_case_you_didnt_know.mp3" type="audio/mpeg">
          <track id="sub" kind="subtitles" label="English subtitles" src="https://raw.githubusercontent.com/beatzonic/Audio-Lyrics-Subtitle/master/in_case_you_didnt_know.txt.vtt" srclang="en" default>
          Your browser does not support the audio tag.
        </audio>
        
        <p id="lyric" class="lyrics-class"></p>
        
    </div>

javascript html css html5-audio webvtt

Answer 1

Answer №1

One possible approach is to create a function that can add a class and then remove it after a set amount of time. This code sample demonstrates how you can achieve this effect by adding a "transition" property to an element, applying the "is-animating" class, changing the content midway through the duration, and finally removing the "is-animating" class and transition property.

The function utilizes closures to ensure that any new animations requested while a previous one is still ongoing will cancel the previous animation to prevent overlapping transitions.

function createAnimation(element, duration) {
    let timeouts = [];

    return function(content) {
        if (timeouts.length > 0) {
            timeouts.forEach(timeout => clearTimeout(timeout));
            timeouts = [];
        }

        const halfDuration = duration / 2;
        element.style.transition = `opacity ${halfDuration}ms ease-in-out`;
        element.classList.add('is-animating');

        const firstTimeout = setTimeout(() => {
            element.textContent = content;
            element.classList.remove('is-animating');
        }, halfDuration);

        const secondTimeout = setTimeout(() => {
            element.style.transition = '';
        }, duration);

        timeouts.push(firstTimeout, secondTimeout);
    }
}

To use this function, call it with the desired element and total animation duration to create a specific animation effect that combines both fade in and fade out transitions.

Then, integrate this animation function into your event handling logic. When the "cuechange" event is triggered, ensure that the animateLyrics function is called with the updated text to animate the target element accordingly.

const trackElement = document.getElementById('sub');
const lyricElement = document.getElementById('lyric');
const animateLyrics = createAnimation(lyricElement, 500);

trackElement.addEventListener('cuechange', event => {
    animateLyrics(event.target.activeCues[0].text);
});

Lastly, in your CSS stylesheet, define how the browser should transition the element when the "is-animating" class is added, such as adjusting the opacity property.

#lyric.is-animating {
    opacity: 0;
}

Answer 2

One possible approach is to create a function that can add a class and then remove it after a set amount of time. This code sample demonstrates how you can achieve this effect by adding a "transition" property to an element, applying the "is-animating" class, changing the content midway through the duration, and finally removing the "is-animating" class and transition property.

The function utilizes closures to ensure that any new animations requested while a previous one is still ongoing will cancel the previous animation to prevent overlapping transitions.

function createAnimation(element, duration) {
    let timeouts = [];

    return function(content) {
        if (timeouts.length > 0) {
            timeouts.forEach(timeout => clearTimeout(timeout));
            timeouts = [];
        }

        const halfDuration = duration / 2;
        element.style.transition = `opacity ${halfDuration}ms ease-in-out`;
        element.classList.add('is-animating');

        const firstTimeout = setTimeout(() => {
            element.textContent = content;
            element.classList.remove('is-animating');
        }, halfDuration);

        const secondTimeout = setTimeout(() => {
            element.style.transition = '';
        }, duration);

        timeouts.push(firstTimeout, secondTimeout);
    }
}

To use this function, call it with the desired element and total animation duration to create a specific animation effect that combines both fade in and fade out transitions.

Then, integrate this animation function into your event handling logic. When the "cuechange" event is triggered, ensure that the animateLyrics function is called with the updated text to animate the target element accordingly.

const trackElement = document.getElementById('sub');
const lyricElement = document.getElementById('lyric');
const animateLyrics = createAnimation(lyricElement, 500);

trackElement.addEventListener('cuechange', event => {
    animateLyrics(event.target.activeCues[0].text);
});

Lastly, in your CSS stylesheet, define how the browser should transition the element when the "is-animating" class is added, such as adjusting the opacity property.

#lyric.is-animating {
    opacity: 0;
}

When the oncuechange event is triggered, it initiates a smooth fade-in/fade-out animation within the HTML P tag

Answer №1

Similar questions

Exploring the world of Typescript and Angular Filter functionalities

Discover the ins and outs of utilizing the Google+ Hangout API specifically for chatting purposes

Tips for successfully utilizing hyphens when passing an object property as an argument

What is the process of using a For loop to output a string in reverse order?

Tips for setting the height of a div within a td to be 100%

Utilize HTML5 to enable fullscreen functionality for embedded SWF files

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

Troubleshooting the Issue of PHP Variables Not Being Assigned to Javascript Variables

Send a request to the uClassify API using the Node request module

React Native Router Flux encountered duplicate keys in two children

What is the process for creating a global variable in JavaScript?

Tips for incorporating inline images with gatsby-image

Tips on automatically changing the background image every few seconds

Tips for maintaining consistent styles in CSS for multiple websites

Is it possible to implement dependency injection within a .css document?

Can OR be utilized within a find operation?

How to design a dictionary schema using Mongoose

Resizing and uploading multiple images with accompanying descriptions

Forming triangles with outlines

What is the best way to target specific text within the DOM without including text within attributes?