your lie in april characters

Your Lie in April: Web App Using HTML, CSS, and JavaScript

Shigatsu wa kimi no uso Animation

Music is something that can relax your soul. Your lie in April is a piece of art that shows hardship, pain, and love which is conveyed through music. There is comedy, music, romance, and a heart-breaking ending, all these moments make this anime a masterpiece. Not to mention the opening Hikaru Nara which will be in the top 10 anime opening for almost every anime fan. 

Will it reach you? It definitely will! 

The final stage performances and ending of Your lie in April is something you’d not forget. This article contains the stage performance of your lie in April characters in HTML/CSS code. Lose yourself to music as this will give you a peaceful vibe.

Your lie in April Stage Performance

your lie in april

Using the music performance performed by your lie of April characters, we can create a web application. Not only the music performance will be added to the application but also the opening Hikaru Nara. There are a total of 4 main musicians in the show, download the songs that these musicians performed and use them in HTML audio. We will need 5 audio tags, 1 for the opening and the other 4 for each performer. The song name played by each character is further mentioned in this article.

How to play one audio at a time HTML?

As we will be using 5 audio tags, so you can simultaneously play all audio at once, this is quite a mess. So, use this code to play one audio at a time. 

function onlyPlayOneIn(container) {
    container.addEventListener("play", function(event) {
        audio_elements = container.getElementsByTagName("audio")
        for (i = 0; i < audio_elements.length; i++) {
            audio_element = audio_elements[i];
            if (audio_element !== event.target) {
                audio_element.pause();
            }
        }
    }, true);
}

document.addEventListener("DOMContentLoaded", function() {
    onlyPlayOneIn(document.body);
});

Check out the Stage Performance Web Application of elite 4 musicians from Shigatsu wa Kimi no uso. The 5 music pieces used in the audio tag here are Hikaru Nara, Chopin – Ballade No. 1 In G Minor by Arima Kousei, Violin Sonata No. 9 by Kaori Miyazono, Chopin – Etude Op. 10 No. 4 (Torrent) by Takeshi Aiza, and Chopin – Etude Op. 25 No. 11 (Winter Wind) by Emi Igawa.

Your Lie in April Characters

There are many characters in Your Lie in April but here we only need the main four musicians from the show.

your lie in april characters

Arima Kousei

Arima Kousei is a pianist prodigy who quit playing piano after his mother’s death. Arima’s strict mother taught him how to play piano exactly that in notes. Under the guidance of his mother, Arima won many competitions and was nicknamed Human-robot. While his mother was ill, she treated Arima even more harshly in the hope that he could be the best pianist in Japan. After his mother died, Kousei was traumatized by his childhood, which made him unable to hear the notes while playing the piano.

Then one day he meets Miyazono Kaori a violinist, with her effort Arima re-debut playing the piano. She is a gifted violinist, Arima first meets her in the park, and admires Kaori as a musician. Although Kousei had never met Kaori before, Kaori had always admired him since she saw him play the piano. After all, Kousei was a famous young perfect pianist. Due to the influence of Kaori, Kousei’s journey had begun again. In the final performance, Kousei plays Chopin – Ballade No. 1 In G Minor, while Kaori was hospitalized, hoping his music could reach her, and it sure did reach.

Kaori Miyazono

Kaori Miyazono an amazing and gifted violinist, the leading female protagonist of Shigatsu wa kimi no uso. She has admired Arima Kousei ever since she watched him play for the first time and always wanted to become friends with Kousei, but she never got a chance. Arima was a loner and used to stay alone in his house. He had only two friends with whom he was close, Ryōta Watari and Tsubaki Sawabe. Tsubaki and Kaori are from the same class, and through Tsubaki, Kaori was finally able to meet Kousei.

Kousei’s life was changed ever since he met Kaori. He was getting used to the piano again and due to her efforts, he was able to play on stage. At times, when he was not able to hear the notes from Piano, Kaori was there to help him out. The song used in the web application played by Kaori is Violin Sonata No. 9l.

Takeshi Aiza and Emi Igawa

These two individuals, pianists Takeshi and Emi are friendly rivals of Kousei. Kousei, Takeshi, and Emi end up in the top 3 of any piano competition organized, Kousei always ends up getting the #1 position. Thus Takeshi and Emi worked hard as a pianist to become the best and defeat Kousei. Takeshi Aiza had not had much interest in playing piano but ever since he laid eyes on Kousei playing piano, it somewhat hooked him to become a pianist and defeat Arima Kousei. 

Emi Igawa is another pianist who admired Arima Kousei. Kousei was quite a musician. Emi Igawa has always been trying to get better and better at the piano so that she could defeat Kousei someday. 

The music piece used in the web application played by Takeshi Aiza is Chopin – Etude Op. 10 No. 4 (Torrent) and by Emi Igawa is Chopin – Etude Op. 25 No. 11 (Winter Wind).

This had very few details on characters, to check more information on Your Lie in April Characters, click here.

How to change Background Colour in CSS

You can animate different background colors using the CSS animation property. Create an animation attribute for the body tag and change the color at different animation time delays. Here is now you can do this:


body {
    margin: 1.2em;
    background-color: #c3e1f8;
    animation: music 4s none 2s infinite;
    padding-left: 5px;
    overflow-x: hidden;
}

@keyframes music {
    15% {
        background-color: #dfc8d0;
    }
    35% {
        background-color: #f7dcc4;
    }
    50% {
        background-color: #fad0ef;
    }
    65% {
        background-color: #fb8fa1;
    }
    80% {
        background-color: #AEE1E1;
    }
}

Not just color, you can also animate the background images at the different delays. 

Conclusion

Music is bliss, and the anime Your Lie in April has done complete justice to the music. There is no better music genre show than Shigatsu wa kimi no uso aka Your Lie in April. This HTML code will make you feel the blissful vibes of the original soundtrack of Your Lie in April

Download the source code

Make sure to check the Final Result: Your Lie in April Music. Deployed using Netlify

2 thoughts on “Your Lie in April: Web App Using HTML, CSS, and JavaScript”

Comments are closed.