Self-find fun through karaoke application with HTML5 Audio
- Tram Ho
In life, sometimes you find some fun things to do with your work, maybe it will help you reduce stress and find work a bit more meaningful.
In the past few days, I also wrote down one (I don’t know what to call it, so called app), which has the function to highlight the text according to the lyrics (also called ca ra o). . It is also nothing special, but I also feel happy when the code is finished and sometimes stressed, open that application and listen to music, while watching my results also see a little more motivation. I am also free to share my bad, messy code and many bugs, maybe there is a friend who needs to get it and fix it. Because of all the code and a bit of processing algorithm, I just talked about my idiotic idea, and the code readers should understand somewhat.
Idea
Simply because I want to write a web application, I can highlight the text according to a song.
- First, I need something to load the song and control it (play, pause, seeked). So on HTML 5, there is an audio component that supports all the requirements I want so I’ll use this guy.
- Next I need a set of lyrics in the song, this I have to create by hand, I create an array of sub-arrays, each sub-array contains the information of a paragraph of lyrics including [ lyrics , time start time , end time ]. Creating the array type ntn is easier to control.
1 2 3 4 5 | var words = [ ['The night listening to the rain drops', 23,516146, 25.81885], ['I miss you so much', 26, 30.344052], // ... ] |
- When you play or rewind the music to different time periods, I will need to calculate which words will be displayed, then I write a temporary function named findWordIndex to do this task.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var aud = document.getElementById ('audio'); // ... var findWordIndex = function () { if (aud.currentTime === 0) { return 0; } cho (var i = 0; i <words.length; i ++) { if (aud.currentTime> = words [i] [1] && aud.currentTime <= words [i] [2]) { return i; } else if (words [i] [1]> = aud.currentTime) { return i; } } return words.length; } |
- And when play music, then I will run a continuous interval function to update the current time and calculate track between the start time, the end of the lyrics to update for the text highlight effect.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var startTime, endTime = 0; var karaText, karaTextHighlight; // ... aud.addEventListener ('play', function () { audInterval = setInterval (function () { if ((aud.currentTime - startTime)> = 0) { var duration = endTime - startTime; if (endTime - aud.currentTime> 0) { var ratio = ((100 / duration) * (endTime - aud.currentTime)) - 100; karaTextHighlight.style.width = ratio * -1 + '%'; } else { nIndex ++; nextWord (nIndex); } } }, 1000/60); }); var nextWord = function (index) { if (! words [nIndex]) { return; } var word = words [index]; karaText.textContent = word [0]; karaTextHighlight.textContent = word [0]; karaTextHighlight.style.width = '0%'; startTime = word [1]; endTime = word [2]; } |
- As for the highlight text effect, just create the same two text, one under it, one on top, the top will have color and change the length to create a highlight effect from left to right.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | # karaoke.kara-text, #karaoke .kara-text-highlight { display: inline-block; font-size: 50px; white-space: nowrap; } #karaoke .kara-text { position: relative; } #karaoke .kara-text-highlight { position: absolute; top: 0; left: 0; color: violet; text-shadow: 0px 0px 20px violet; overflow: hidden; } |