")'
}} />
Song Finder
{children}
);
}
function IdleView() {
return (
Tap to identify
Make sure music is playing in your current tab.
);
}
function ListeningView() {
const [bars, setBars] = useState(() => Array.from({ length: 13 }, () => Math.random()));
useEffect(() => {
const id = setInterval(() => setBars(Array.from({ length: 13 }, () => 0.25 + Math.random() * 0.75)), 170);
return () => clearInterval(id);
}, []);
return (
{[0, 1, 2].map(i => (
))}
{bars.map((h, i) => (
))}
Listening
Analyzing audio sample
);
}
function ResultView() {
const r = SAMPLE_RESULT;
return (
{r.title}
{r.artist}
{r.album} · {r.year}
{[
{ label: 'Open in Spotify', mark:
},
{ label: 'Open in Apple Music', mark:
},
{ label: 'Open in YouTube', mark:
},
].map(s => (
{s.mark}
{s.label}
))}
);
}
function HistoryView() {
return (
{SAMPLE_HISTORY.map((item, i) => (
{item.title}
{item.artist}
))}
);
}
function AutoCyclingPopup() {
const SEQ = [
{ name: 'idle', dur: 3800 },
{ name: 'listening', dur: 3300 },
{ name: 'result', dur: 5600 },
{ name: 'history', dur: 4400 },
];
const [idx, setIdx] = useState(0);
useEffect(() => {
const id = setTimeout(() => setIdx(i => (i + 1) % SEQ.length), SEQ[idx].dur);
return () => clearTimeout(id);
}, [idx]);
const screen = SEQ[idx].name;
return (
setIdx(screen === 'history' ? 0 : 3)} showHistory={screen === 'history'}>
{screen === 'idle' && }
{screen === 'listening' && }
{screen === 'result' && }
{screen === 'history' && }
{SEQ.map((s, i) => (
))}
);
}
function ChromeIcon({ size = 18 }) {
return (
);
}
function Landing() {
return (
Chrome extension
Name any song
playing in your tab.
Song Finder listens to the audio in your current tab and identifies the track in seconds — then opens it in Spotify, Apple Music, or YouTube.
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
);