Hari ini admin akan membahas seputar Membuat Karaoke dengan html js di blog dengan menggunakan file lirik atau .lrc yang dapat anda terapkan di blog anda.
Semakin berkembangnya dunia teknologi sekarang ini, ada saja hal baru yang ingin dicoba para blogger tanah air dan yang pastinya membuat anda penasaran bagaimana aplikasi android bisa menampilkan musik disertai lirik dengan jeda waktu yang sudah ditentukan oleh kita.
Pada kesempatan kali ini admin akan berbagi script untuk membuat musik karaoke di blog atau situs web anda dengan mudah dan pastinya gratis.
Cara membuat Script Karaoke dengan html js dan file liriknya:
kita akan buat struktur file nya seperti ini:
index.html -> sebagai tempat menampilkan halaman
css.css -> untuk mempercantik
js.js -> mengontrol dan memuat file lirik (.lrc)
lirik.lrc -> berisi lirik yang kita buat sesuai waktu yang ditentukan di file jenis mp3
sample.mp3 -> sampel file lagu yang akan kita muat / playIndex. html
<!DOCTYPE html>
<html>
<head>
<title>Karaoke</title>
<script type="text/javascript" src="js.js" ></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body onload="karaoke()">
<div class="background" id="lyrics">
<div class="player">
<audio id="player" controls preload="auto" onplay="start();"> <source src="sample.mp3" type="audio/mpeg"/> </audio>
</div>
</div>
</body>
</html>js.js
var dates = new Array(); // Lyrics timing
var startSeconds; // Start time
var linesCount; // Number of Lyric lines
function karaoke() {
var xhttp = new XMLHttpRequest(); // Load lyrics
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var text = xhttp.responseText;
var lines = text.split("\n");
linesCount = lines.length;
for(i = 0; i < lines.length; i++){
if (lines[i] != "") {
var text = lines[i].replace(/ *\[[^)]*\] */g, ""); // Read lyric text
var timing = lines[i].match(/\[([^)]+)\]/)[1]; // Read lyric timing
var time = timing.split(':');
var date = new Date();
date.setMinutes(time[0]);
var subTime = time[1].split('.');
date.setSeconds(subTime[0]);
date.setMilliseconds(subTime[1] * 10);
dates[i] = date;
var style;
(i == 0) ? style = "highlight" : style = "plain";
document.getElementById("lyrics").innerHTML += "<div class=\""+ style + "\" id=\"" + i + "\">" + text + "</div>"; // Add lyric to page
}
}
}
};
xhttp.open("GET", "lirik.lrc", true);
xhttp.send();
}
function start() {
document.getElementById("player").controls = false;
startSeconds = new Date().getTime(); // Song just started
var nextTime = dates[0].getMinutes() * 60000 + dates[0].getSeconds() * 1000 + dates[0].getMilliseconds();
setTimeout(function(){update(0, linesCount)}, nextTime); // Schedule first lyric update
}
function update(current, last) {
document.getElementById(current).className= "highlight"; // Update current lyric style
if (current != 0) {
document.getElementById(current - 1).className = "plain"; // Update previous lyric style
}
if (current++ < last) {
var currentSeconds = new Date().getTime();
var passedSeconds = currentSeconds - startSeconds;
var nextTime = dates[current].getMinutes() * 60000 + dates[current].getSeconds() * 1000 + dates[current].getMilliseconds() - passedSeconds;
setTimeout(function(){update(current, last)}, nextTime); // Schedule next lyric update
}
}css.css
.title {
text-align: center;
font-size: 30px;
color: white;
background: black;
margin-top: 0px;
margin-bottom: 0px;
}
.plain {
font-size: 30px;
color: white;
text-align: center;
margin-bottom: 5px;
}
.highlight {
font-size: 30px;
color: blue;
text-align: center;
margin-bottom: 5px;
}
.background {
padding-top: 20px;
padding-bottom: 20px;
background: linear-gradient(to bottom right, red, yellow);
}
.player {
margin: 0 auto;
width: 300px;
}
.note {
background-color: darkgray;
}sekarang kita buka notepad lalu ketikkan lirik contohnya sebagai berikut sesuai demo yang saya buat:
[00:00.00]Eminem - The Monster (Feat. Rihanna)
[00:00.55]
[00:00.83]I'm friends with the monster that's under my bed
[00:04.50]Get along with the voices inside of my head
[00:08.68]You're trying to save me, stop holdin' your breath
[00:12.80]And you think I'm crazy, yeah, you think I'm crazy
[00:17.47]
[00:18.28][Verse 1: Eminem]
[00:18.59]I wanted the fame, but not the cover of Newsweek
[00:21.21]Oh well, guess beggars can't be choosey
[00:23.21]Wanted to receive attention for my music
[00:24.40]Wanted to be left alone in public excuse me
[00:26.96]For wanting my cake, and eat it too, and wanting it both ways
[00:29.40]Fame made me a balloon cause my ego inflated when I blew, see
[00:32.33]But it was confusing, cause all I wanted to do's be
[00:34.88]The Bruce Lee of loose leaf
[00:36.06]...
[00:38.81]Lalu setelah itu simpan file teks yang kita buat tadi dengan nama lirik.lrc dan satu folder dengan script lainnya.
Penjelasan isi lirik.lrc
[00:00.00] adalah barisan waktu. format waktu dalam lirik tersebut adalah [JAM:MENIT:DETIK] atau [JJ:MM:SS]. semoga anda paham maksud saya.
Sekarang masukkan file mp3 yang anda buat menjadi musiknya dan diikuti dengan waktu kapan vocal mulai sesuai waktu yang bisa anda cocoknya didalam file lirik.lrc
Jika anda kurang paham, anda bisa mengunduh berkas lengkapnya dibawah ini:
