DEV Community: mcanam

DevTools-like JavaScript Object Viewer

mcanam — Wed, 06 Jul 2022 17:29:03 +0000

Hello everyone 🙌 I just want to share my project.

I made a javascript object viewer like in devtools because I was curious 😆.

live demo: github pages
source code: github repo

I'm sorry if my code looks bad or not clean I'll fix it again. thanks 🍎

How To Make Adaptive Card Color Depending On Image Background

mcanam — Fri, 24 Jun 2022 12:12:55 +0000

Hi, this time we will experiment with creating a simple UI component that can change color according to the background image.

I was inspired by the music player notification on my phone:

And the experiment result:

looks cool right? now let's start making it 🚀

Preparation

we need to create html, css, and js files first

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Adaptive Card Color</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="script.js"></script>
</body>

</html>

style.css

*,
*::before,
*::after {
    padding: 0; margin: 0;
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

script.js

console.log("hello world");

Make card component

create html structure of the card like this

<div class="card">
    <img class="card-image" src="">
    <div class="card-text">
        <span>Lorem Ipsum</span>
        <span>Is simply dummy text of the printing and typesetting industry.</span>
    </div>
 </div>

don't forget the style

.card {
    position: relative;
    overflow: hidden;
    width: 90%;
    max-width: 400px;
    margin-bottom: 30px;
    padding: 30px;
}

.card-image {
    position: absolute;
    top: 0; right: 0;
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
            mask-image: linear-gradient(90deg, transparent, #000);
}

.card-text {
    position: relative;
    z-index: 2;
    max-width: 75%;
    display: flex;
    flex-direction: column;
}

.card-text span:first-child {
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.card-text span:last-child {
    opacity: 0.7;
}

For image source you can get it from unsplash or use a local file.

Extract color from image

Yes, we have to extract color from image and it's a quite complex job. Luckily, i found a cool library that will do for us https://github.com/lokesh/color-thief

add the library to our project

<script src="https://unpkg.com/colorthief@2.3.2/dist/color-thief.umd.js"></script>

Javascript Time

// get all card elements.
const cards = document.querySelectorAll(".card");

// create colorthief instance
const colorThief = new ColorThief();

cards.forEach(async (card) => {
    const image = card.children[0];
    const text = card.children[1];

    // get palette color from image
    const palette = await extractColor(image);

    const primary = palette[0].join(",");
    const secondary = palette[1].join(",");

    // change color
    card.style.background = `rgb(${primary})`;
    text.style.color = `rgb(${secondary})`;
});

// async function wrapper
function extractColor(image) {
    return new Promise((resolve) => {
        const getPalette = () => {
            return colorThief.getPalette(image, 4);
        };

        // as said in the colorthief documentation, 
        // we have to wait until the image is fully loaded.

        if (image.complete) {
            return resolve(getPalette());
        }

        image.onload = () => {
            resolve(getPalette());
        };
    });
}

If you get an error and you use image from internet, you can add crossorigin="anonymous" attribute on the img tag.

Next task, check if the primary color is dark or light so we can correctly choose color for the text. Happy experimenting :D

Thank you very much for reading. Don't hesitate to leave comments, criticisms or suggestions, I will really appreciate it ☺️

Image cover by Hasmik Ghazaryan Olson on Unsplash

Javascript Lyric Synchronizer

mcanam — Mon, 20 Jun 2022 14:44:23 +0000

Hai I'am Anam 👋 and this is my first article ☺️

In this article we will experiment to making a simple lyrics synchronizer with javascript from scratch.

Let's get started 🚀

LRC File

Before we start, we need to know about (*.lrc) file.

LRC (short for LyRiCs) is a computer file format that synchronizes song lyrics with an audio file, such as MP3, Vorbis or MIDI.
wikipedia

lrc file format example:

[ar:Lyrics artist]
[al:Album where the song is from]
[ti:Lyrics (song) title]
[00:12.00]Line 1 lyrics
[00:17.20]Line 2 lyrics
[00:21.10]Line 3 lyrics

the lrc file has several variants, the example above is a simple variant.

the lrc file format is quite simple:

lines 1 - 3 are id tags or metadata to be displayed before lyrics
lines 4 - 6 are lyrics with timestamps enclosed in square brackets. the time format used is mm:ss.xx:

mm: minutes
ss: seconds
xx: hundredths of a second

next we will create a simple lrc parser with javascript.

LRC Parser

Based on the previous example, the lrc file has two parts:

id tags
lyrics

but for now we ignore the id tags and focus on the lyrics only.

Time to code 👩‍💻

// lrc (String) - lrc file text
function parseLyric(lrc) {
    // will match "[00:00.00] ooooh yeah!"
    // note: i use named capturing group
    const regex = /^\[(?<time>\d{2}:\d{2}(.\d{2})?)\](?<text>.*)/;

    // split lrc string to individual lines
    const lines = lrc.split("\n");

    const output = [];

    lines.forEach(line => {
        const match = line.match(regex);

        // if doesn't match, return.
        if (match == null) return;

        const { time, text } = match.groups;

        output.push({
            time: parseTime(time),
            text: text.trim()
        });
    });

    // parse formated time
    // "03:24.73" => 204.73 (total time in seconds)
    function parseTime(time) {
        const minsec = time.split(":");

        const min = parseInt(minsec[0]) * 60;
        const sec = parseFloat(minsec[1]);

        return min + sec;
    }

    return output;
}

the function above will separate the time and text using a regular expression and will return the output as an array of objects.

the output will look like this:

[
    {
        text: "Faith you're driving me away",
        time: "21.16"
    },
    ...
]

Sync Lyric

The next task is to synchronize the lyrics.

The method we will use is to find the timestamp of the lyrics closest to the given time. If you have another method please let me know in the comments 😻

// lyrics (Array) - output from parseLyric function
// time (Number) - current time from audio player
function syncLyric(lyrics, time) {
    const scores = [];

    lyrics.forEach(lyric => {
        // get the gap or distance or we call it score
        const score = time - lyric.time;

        // only accept score with positive values
        if (score >= 0) scores.push(score);
    });

    if (scores.length == 0) return null;

    // get the smallest value from scores
    const closest = Math.min(...scores);

    // return the index of closest lyric
    return scores.indexOf(closest);
}

Simple music player

Now we have two essential functions, parser and synchronizer.

It's time to build a simple music player with realtime lyric sync 🤸

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Simple music player with lyric</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <audio class="player" controls></audio>
    <div class="lyric"></div>
    <script src="script.js"></script>
</body>

</html>

style.css

* {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    font-size: 16px;
    color: hsl(200, 20%, 25%);
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lyric {
    font-size: 2rem;
    font-weight: bolder;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    max-width: 300px;
    margin-top: 40px;
}

.player {
    width: 100%;
    max-width: 300px;
}

script.js

!async function main() {
    "use strict";

    const dom = {
        lyric: document.querySelector(".lyric"),
        player: document.querySelector(".player")
    };

    // load lrc file
    const res = await fetch("./lyric.lrc");
    const lrc = await res.text();

    const lyrics = parseLyric(lrc);

    dom.player.src = "./audio.mp3";

    dom.player.ontimeupdate = () => {
        const time = dom.player.currentTime;
        const index = syncLyric(lyrics, time);

        if (index == null) return;

        dom.lyric.innerHTML = lyrics[index].text;
    };

}();

function parseLyric(lrc) {
    // same as previous code
}

function syncLyric(lyrics, time) {
    // same as previous code
}

result:

Conclusion

In this experiment we learn what an lrc file is, how to parse it and sync it with songs using javascript.

Next, you can make your own version of the music player which is even cooler 🤩.

Oh one more thing, I have made a simple javascript library based on this experiment called liricle, you can check it on github. feel free to star or fork 👉👈 just kidding 😅

Thank you very much for reading. Don't hesitate to leave comments, criticisms or suggestions, I will really appreciate it ☺️