diff options
Diffstat (limited to 'src/app/about')
| -rw-r--r-- | src/app/about/page.tsx | 155 |
1 files changed, 116 insertions, 39 deletions
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index dd5f35b..881e5a2 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -1,6 +1,6 @@ "use client"; -import React from 'react'; -import styled, { createGlobalStyle } from 'styled-components'; +import React from "react"; +import styled, { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { @@ -81,69 +81,146 @@ const AboutPage: React.FC = () => { <Title>About</Title> <Subtitle>What is this player?</Subtitle> <Paragraph> - This player is capable of simultaneously playing back a lyric file (LRC), a main video/audio file, a SRV3 YouTube Timed Text, and a backing audio file. - <br />The idea is that this helps with not only karaoke but also checking how well a LRC or SRV3 file syncs with the main video/audio. + This player is capable of simultaneously playing back a + lyric file (LRC), a main video/audio file, a SRV3 YouTube + Timed Text, and a backing audio file. + <br /> + The idea is that this helps with not only karaoke but also + checking how well a LRC or SRV3 file syncs with the main + video/audio. </Paragraph> <Subtitle>How to use this player?</Subtitle> <Paragraph> - You'll need to prepare a few files for the media you want to play back first. - <br />Theoretically you can mix/match any of the files below since the main video/audio is all that's mandatory for playback. - <br />In this guide I'll assume that you're after a karaoke experience, and want the works. - <br /><br />To add any files to the player simply drag it onto the right part of the player page. - <br />EVERYTHING IS RAN LOCALLY, NO FILES ARE EVER UPLOADED TO ANY SERVERS. + You'll need to prepare a few files for the media you + want to play back first. + <br /> + Theoretically you can mix/match any of the files below since + the main video/audio is all that's mandatory for + playback. + <br /> + In this guide I'll assume that you're after a + karaoke experience, and want the works. + <br /> + <br /> + To add any files to the player simply drag it onto the right + part of the player page. + <br /> + EVERYTHING IS RAN LOCALLY, NO FILES ARE EVER UPLOADED TO ANY + SERVERS. </Paragraph> <Subtitle>1. Main video/audio file</Subtitle> <Paragraph> - Note: I've renamed the second button seen in the demos from Video to Media to avoid confusion since it can support audio/video files + Note: I've renamed the second button seen in the demos + from Video to Media to avoid confusion since it can support + audio/video files </Paragraph> <Paragraph> - This is the file that you want to play back. It can be a video or an audio file. - <br />Supported formats: mp4, webm, ogg, mp3, wav, flac, and more. - <br />If you choose to use an audio file here, the right part of the player will not show a video preview. - <br /> <br />A good way would be to download some video from YouTube. You may need to make adjustments to the offset later depending on how well the LRC file syncs with the video. - <br /> How you do that will be up to you, but I recommend using <a href="https://github.com/yt-dlp/yt-dlp">yt-dlp</a> to download the video. + This is the file that you want to play back. It can be a + video or an audio file. + <br /> + Supported formats: mp4, webm, ogg, mp3, wav, flac, and more. + <br /> + If you choose to use an audio file here, the right part of + the player will not show a video preview. + <br /> <br />A good way would be to download some video from + YouTube. You may need to make adjustments to the offset + later depending on how well the LRC file syncs with the + video. + <br /> How you do that will be up to you, but I recommend + using <a href="https://github.com/yt-dlp/yt-dlp"> + yt-dlp + </a>{" "} + to download the video. </Paragraph> <Subtitle>2. Lyric File (LRC)</Subtitle> <Paragraph> - This is the file that contains the lyrics of the song you want to sing. - <br />An example LRC file is shown below... + This is the file that contains the lyrics of the song you + want to sing. + <br /> + An example LRC file is shown below... </Paragraph> - <Preformatted dangerouslySetInnerHTML={{ __html: lyrics.replace(/\n/g, '<br/>') }} /> + <Preformatted + dangerouslySetInnerHTML={{ + __html: lyrics.replace(/\n/g, "<br/>"), + }} + /> <Paragraph> - The player will highlight the current line of the lyrics as the main media progresses. + The player will highlight the current line of the lyrics as + the main media progresses. <br /> - If you need a LRC file, a good way is to rip it from Spotify using <a href="https://github.com/akashrchandran/syrics">Syrics</a>. + If you need a LRC file, a good way is to rip it from Spotify + using{" "} + <a href="https://github.com/akashrchandran/syrics"> + Syrics + </a> + . </Paragraph> - <br/> - <br/> + <br /> + <br /> <Paragraph> - At this point you should already be able to play back the main media and have the lyrics highlighted as the media progresses. - <br />Depending on how well the LRC file syncs with the main media, you may need to adjust the main offset labelled as "Offset (±ms)" + At this point you should already be able to play back the + main media and have the lyrics highlighted as the media + progresses. + <br /> + Depending on how well the LRC file syncs with the main + media, you may need to adjust the main offset labelled as + "Offset (±ms)" </Paragraph> <Video controls> - <source src="https://files.catbox.moe/mfaei6.mp4" type="video/mp4" /> + <source + src="https://files.catbox.moe/mfaei6.mp4" + type="video/mp4" + /> </Video> <Subtitle>3. Instrumental/Vocals (Audio 2)</Subtitle> <Paragraph> - If you only wanted one or the other, simply add that as the main media then you're done - <br />There are a ton of tools online to remove this but you'll want to make sure you get the instrumental track in an audio format (mp3, wav, etc.) - <br />Then hover over the right side of the player, click the "Audio #2" button, and find your instrumental track. - <br /><br />(TIP!) I suggest going back and setting the main media in step 1 (Media button) in the previous step to a vocal only video/audio. - <br /> This will make it significantly easier to offset the 2 tracks. You can always mux a video file on top of that if you want visuals too! - <br/>Ultimately it doesn't matter which "slot" the instrumental or "vocals" go into, it's just better to have them separated! - <br/><br/>Now adjust the offset using the numerical inputs, the "Sync" button will adjust Audio 2 relative to the main media. - <br/>I suggest positioning the playhead at 00:00 and then adding the secondary audio; this will make adjustments much easier. - <br/><br/> - Now you should be able to control the balance between both of these files (which one is louder) by using the slider! + If you only wanted one or the other, simply add that as the + main media then you're done + <br /> + There are a ton of tools online to remove this but + you'll want to make sure you get the instrumental track + in an audio format (mp3, wav, etc.) + <br /> + Then hover over the right side of the player, click the + "Audio #2" button, and find your instrumental + track. + <br /> + <br /> + (TIP!) I suggest going back and setting the main media in + step 1 (Media button) in the previous step to a vocal only + video/audio. + <br /> This will make it significantly easier to offset the + 2 tracks. You can always mux a video file on top of that if + you want visuals too! + <br /> + Ultimately it doesn't matter which "slot" the + instrumental or "vocals" go into, it's just + better to have them separated! + <br /> + <br /> + Now adjust the offset using the numerical inputs, the + "Sync" button will adjust Audio 2 relative to the + main media. + <br />I suggest positioning the playhead at 00:00 and then + adding the secondary audio; this will make adjustments much + easier. + <br /> + <br /> + Now you should be able to control the balance between both + of these files (which one is louder) by using the slider! </Paragraph> <Subtitle>4. YouTube Timed Text</Subtitle> <Paragraph> - If the YouTube video you downloaded has subtitles (sometimes they look really cool and fancy), you can download that using yt-dlp - for use in the player as well. - <br/><br/>Unfortunately there is no way to adjust the offset for this, it'll play according to the main media. + If the YouTube video you downloaded has subtitles (sometimes + they look really cool and fancy), you can download that + using yt-dlp for use in the player as well. + <br /> + <br /> + Unfortunately there is no way to adjust the offset for this, + it'll play according to the main media. </Paragraph> <Video controls> - <source src="https://files.catbox.moe/ir6bs3.mp4"/> + <source src="https://files.catbox.moe/ir6bs3.mp4" /> </Video> <BackLink href="/">Back to player</BackLink> </Container> |