Lyric in Beatme Website

Lyric in Beatme Website

Lyric is one of the most attraction performance in Beatme Website. Lyric is displayed when rhyme of song started and stop when the rhyme of the song stop. Lyric is very useful to the song listener when he or she cannot listen to singer’s voice clearly. Hence, when the listener doesn’t catch the rhyme of the song well, lyric is his or her help. In addition, it is really important for non-native listeners because their listening skill is not so good. Sometimes, the listener can make fun by singing a song with the displaying lyric.

Introduction

Lyric is one of the most attraction performance in Beatme Website. In this website, there are many special provider like listening and singing, playing device, composing, and gaming. All of these offer is what the user really wants. However, lyric is the most fashionable and pretty function in Beatme Website.

Actually, singing is a kind of art, which has been being a task for making enjoyment and fun. It is popular for everyone because of its simple, but he or she can make it anytime and anywhere. By the way, lyric is now available in Beatme Website, which is a good news for computer user as well as internet and website users. With lyric, user can listen to the song, and see its lyric of the song. Hence, user can be singing a song with the lyric while he or she is listening to the song. Users can enjoy their favorite songs with its lyric whenever they go to Beatme Website, because there are many songs that available in it.

To sum up, Beatme Website is about music website, which is invented by Beatme Website’s Group. It can be named Beatme by combining together integrated system with user need. All of the offer like listening and singing, playing device, composing, and gaming are really match with everyone’s need with the modern time.

System Design

Lyric is one of the most important part in Beatme Website. It can be done by HTML5 element and library called, “video.js”. In Beatme Website, a key element of running audio is allowance for "accessibility". This is not just being able to play songs in different browsers or on different platforms, but also providing lyric for its songs. By the way, there are two main point to making the lyric function in Beatme Website. First one is HTML5 element. The HTML5 element in here is video, which is the element to display song files, and it is native support for playing media files. Native support means the HTML markup and the browser can display media files without needing any external plug-in or application. Moreover, in video element it contain track element, which is the file for writing lyric of the song. In addition, video.js is used to display lyric of the song a long with rhyme of the song. Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and lyric, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video. All in all, to make the lyric function, there are two main point, HTML5 and video.js library.

DFD (Data Flow Diagram) 

Before coding the system, DFD (Data Flow Diagram), must has been done first. Here is the DFD (Data Flow Diagram) of the system: 

Administrator The Administrator can:

1) Add song and lyric files

2) Update song and lyric files

3) Delete song and lyric files

 DFD of Administrator

Member

The member can:

1) A register given to be a member

2) Log in to see lyric of song

 

 

 DFD of Member  

Anonymous

 

Anonymous can see the lyric of song. The samples song and lyric will be served to anonymous.

DFD of Anonymous 

Database Design

 

To store data for lyric, the database design is define three tables as below:

a. Tbl_member Table

Tbl_member (member table) is the table that used to store the information about members of Beatme website. 



Tbl_member Table

 

b. Tbl_song Table

Tbl_song (song table) is the table that used to store all the song files in Beatme website and information about songs such as title, year of written, amount of download, amount of share, amount of like, and amount of dislike.



Tbl_song Table

c. Tbl_lyric

Tbl_lyric (lyric table) is the table that used to store lyric file of the song. It is a vtt file which contain the text of lyric of song.

Tbl_lyric Table

 

d. Tbl_artist Table

Tbl_artist (artist table) is the table that is used to store singer’s name.

Tbl_artist Table 

 

e. Tbl_album

Tbl_album (album table) is the table that is used to store album of song.

Tbl_album Table

 

f. Tbl_user Table

Tbl_user (user table) is the table that used to store information about user who used the system of Beatme website. It means that he or she is a person who manage the back end of the website.

Tbl_user Table  

System Implementation  



In this chapter, the author discuss about testing and analysis of lyric in Beatme website. Hence, in this chapter, the author will show the interface of lyric in Beatme system, testing on lyric in the system. It also include IDE (Integrated Development Environment), system hardware and system software which used to build lyric. Finally, the author will conclude the result after testing the system.

Environment Implementation  

 

System hardware, system software, and IDE that used in lyric system are:  1. Operation System: Windows: 7, 32-bit
2. CPU: Itel Core i3: 2.4 Ghz
3. RAM: DDR 3: 2 Gb
4. Database: Microsoft SQL Server 2008
5. Programming Language: ASP.NET using C#
6. IDE: Microsoft Visual Studio 2012
7. Browser (Support HTML5)
8. Web Hosing

Application Implementation  

When use go to Beatme Website, he or she will see the home page of Beatme website, and the view in this page are menu, text box search (user can search by title, artist, album, and mood), and list of top ten songs (for the list of top ten songs, it contain lyric, addtoplaylist, and download).

Home Page of Beatme Website  

System Testing 

 

To complete the lyric function, the author has been work throw as above:

1) To display the media file, the author use HTML5 element called, "video"
2) To display the lyric of the song, track attribute is used in video element: <track kind="subtitles" src="apologize.vtt" srclang="en" label="English" />

 

Lyric Song

 

3) How to make lyric file

Lyric file is a file which used to write lyric of the song.

a. Save lyric file as (.vtt) extension

File lyric is the file that its extension is .vtt. The author used notepad application to write it, and save it as (file name).vtt, select "Save as type" as "All Files", and "Encoding" as "UTF-8".

Extention and Save as type of Lyric File

 

b. Format of lyric file (.vtt file)

WEBVTT

00:00:15,087 --> 00:00:17,000

I'm holding on your rope

00:00:17,084 --> 00.00:22,084

Got me ten feet off the ground

00:00:23.040 --> 00:00:30,040

And I'm hearing what you say but I just can't make a sound

00:00:31,002 --> 00:00:33,002

You tell me that you need me

00:00:34,024 --> 00:00:39,024

Then you go and cut me down, but wait

00:00:40,013 --> 00:00:41,013

You tell me that you're sorry

The first heal line of vtt file must consist WEBVTT letter. After the headline, we call cue which are time and sentence. The time has four part, hour, minute, second and millisecond. Each cue is separated by a line.
For two-line lyric displaying, the format must be used hyphen to the sentence of the cue. It can work first format or second format.
WEBVTT
00:00:15,087 --> 00:00:17,000
I'm holding on your rope
Got me ten feet off the ground
00:00:17,084 --> 00.00:22,084
And I'm hearing what you say but I just can't make a sound
You tell me that you need me

Ananlysis of Testing

When the text had been written in two-line lyric displaying, the rhyme and lyric of the song has worked fine than one-line lyric displaying.
As in description above, the lyric is made by writing manually with the text and starting and stopping time. However, in the future, the author hopes that he can make lyric working automatically along with rhyme of song.

Conclusion

Lyric is one of the most attractive provider in Beatme website. Member of Beatme cannot only listen to music, but he or she can also see lyric of its song. It is such a good thing because the members will feel more enjoyable, while they are listening to any song in Beatme. Sometimes, the member do not want to listen to the rhyme of song, but they want to see its lyric too, especially when he or she have just listened to the song for the first few times. If the members like any music so much, they can sing it with the lyric while they are listening to it. With lyric, member just click lyric button to display the lyric of music. When the music is playing, the lyric will display matching with the rhyme of music stage by stage from begin to the end.

SUGGESTION

To make it easy with the lyric, your computer should use any browser which supports HTML5.