diff --git a/README.md b/README.md index 144528d..b906fc1 100644 --- a/README.md +++ b/README.md @@ -48,9 +48,22 @@ That's why I made **Songscribe**, a tool for jumpstarting the transcription proc ## Quick Start -You can get started with Songscribe by visiting [songscribe.xyz](https://songscribe.xyz). - ->

Currently, the API backend powering the audio isolation and audio to MIDI conversion is not hosted anywhere (the machine learning models are a bit too intensive for free hosting solutions).

This means you will have to run the API locally. Extensive documentation on how to do so have been provided for you here for this reason.

+You can get started transcribing with Songscribe by visiting **[songscribe.xyz](https://songscribe.xyz)**. + +Here's a quick overview of how to use Songscribe: + +- Upload the song you want to transcribe + - File Upload + - YouTube Link +- Choose the preset that best suits the song you're transcribing + - **Solo** (1 instrument) + - **Duet** (vocals, no vocals) + - **Small Band** (vocals, drums, bass, and other instruments) + - **Full Band** (vocals, drums, bass, guitar, piano, and other instruments) +- Optionally, select the tempo and the start time and end time of the song to be transcribed +- Click the **Transcribe** button +- Adjust the MIDI parameters to regenerate the transcription for each instrument to your liking +- Click the **Export** button to create the final score and download all files generated from the session
@@ -58,7 +71,7 @@ You can get started with Songscribe by visiting [songscribe.xyz](https://songscr Here is a quick breakdown of all the main technologies used to create Songscribe. -Frontend: +**[Frontend](https://github.com/gabe-serna/songscribe)**: - React - Next.js @@ -69,15 +82,16 @@ Frontend: - **[wavesurfer.js](https://github.com/katspaugh/wavesurfer.js)**- Waveform Visualization - **[Flat Embed](https://github.com/FlatIO/embed-client)**- Embedded sheet music viewer -Backend: +**[Backend](https://github.com/gabe-serna/songscribe-api)**: - Python - Libraries: - **[Moseca](https://github.com/fabiogra/moseca)**- Instrument separation - - **[Spotify Basic Pitch](https://github.com/spotify/basic-pitch)**- Audio to MIDI conversion + - **[Basic Pitch](https://github.com/spotify/basic-pitch)**- Audio to MIDI conversion + - **[ADTOF](https://github.com/MZehren/ADTOF)**- Drum transcription
## Feedback and issues -Please file feedback and issues over on [Github Issues](https://github.com/gabe-serna/songscribe/issues/new). +Please file feedback and issues over on [Github Issues](https://github.com/gabe-serna/songscribe/issues/new). All feedback is welcome! diff --git a/app/DemoSection.tsx b/app/DemoSection.tsx index f6ef6e6..5205a14 100644 --- a/app/DemoSection.tsx +++ b/app/DemoSection.tsx @@ -57,7 +57,7 @@ export default function DemoSection() { return (

See it in Action! diff --git a/app/ImpactSection.tsx b/app/ImpactSection.tsx index cb1e477..5f55a30 100644 --- a/app/ImpactSection.tsx +++ b/app/ImpactSection.tsx @@ -24,12 +24,12 @@ export default function ImpactSection() {
- Submit + Transcribe diff --git a/app/globals.css b/app/globals.css index 28b7b40..e0a7e48 100644 --- a/app/globals.css +++ b/app/globals.css @@ -185,11 +185,50 @@ a, margin-right: 0; } -::-webkit-scrollbar { +:not(body)::-webkit-scrollbar { width: 12px; } -::-webkit-scrollbar-thumb { +:not(body)::-webkit-scrollbar-thumb { + background-color: #78716c; + border-radius: 3px; +} + +/* Hide default scrollbar */ +html::-webkit-scrollbar { + display: none; + width: 0; +} + +body { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +/* Custom Scrollbar */ +.custom-scrollbar { + position: fixed; + right: 0; + top: 0; + width: 12px; + height: 100vh; + z-index: 999; + opacity: 0; + transition: opacity 0.3s; + @media (max-width: 768px) { + display: none; + } +} + +.custom-scrollbar.visible { + opacity: 1; +} + +.custom-scrollbar-thumb { + position: absolute; + top: 0; + right: 0; + width: 100%; background-color: #78716c; border-radius: 3px; } diff --git a/app/layout.tsx b/app/layout.tsx index 7486ce1..c66b251 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -43,11 +43,11 @@ export default function RootLayout({ enableSystem disableTransitionOnChange > -
+
{children}
diff --git a/app/page.tsx b/app/page.tsx index d304177..e1f60b9 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -13,7 +13,7 @@ export default async function Home() {

@@ -32,7 +32,7 @@ export default async function Home() {

diff --git a/components/CustomScrollbar.tsx b/components/CustomScrollbar.tsx new file mode 100644 index 0000000..69a4307 --- /dev/null +++ b/components/CustomScrollbar.tsx @@ -0,0 +1,58 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; + +export default function CustomScrollbar() { + const [scrollbarHeight, setScrollbarHeight] = useState(0); + const [scrollbarTop, setScrollbarTop] = useState(0); + const [isVisible, setIsVisible] = useState(false); + const timeoutRef = useRef(); + + useEffect(() => { + const updateScrollbar = () => { + const windowHeight = window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; + const scrollTop = window.scrollY; + + const scrollbarHeight = (windowHeight / documentHeight) * windowHeight; + const scrollbarTop = (scrollTop / documentHeight) * windowHeight; + + setScrollbarHeight(scrollbarHeight); + setScrollbarTop(scrollbarTop); + + setIsVisible(true); + + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + + timeoutRef.current = setTimeout(() => { + setIsVisible(false); + }, 1000); + }; + + window.addEventListener("scroll", updateScrollbar); + window.addEventListener("resize", updateScrollbar); + updateScrollbar(); + + return () => { + window.removeEventListener("scroll", updateScrollbar); + window.removeEventListener("resize", updateScrollbar); + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + }; + }, []); + + return ( +
+
+
+ ); +} diff --git a/components/SmoothScroll.tsx b/components/SmoothScroll.tsx index d4dd1b4..e09b03d 100644 --- a/components/SmoothScroll.tsx +++ b/components/SmoothScroll.tsx @@ -2,6 +2,7 @@ import Lenis from "@studio-freight/lenis"; import { useEffect } from "react"; +import CustomScrollbar from "./CustomScrollbar"; export default function SmoothScroll({ children, @@ -30,5 +31,10 @@ export default function SmoothScroll({ }; }, []); - return <>{children}; + return ( + <> + {children} + + + ); } diff --git a/components/navbar.tsx b/components/navbar.tsx index eaf6f25..8a66f90 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -27,11 +27,11 @@ export function Navbar() { return (