SpotifyWidgetはサイトで特定の人の聞いている音楽をサムネイル付きでリアルタイムで見せることができます。タップするとspotifyに飛び詳細がわかります。企業内の個人プロフやポートフォリオサイトに実装することで、その人のキャラクターがわかります。リンクインバイオにおすすめ機能です。
SpotifyWidgetについて
クイックスタート & API設定
APIキーの取得方法(無料・約1分で完了):
last.fm/api/account/createにアクセスします。アプリケーション名と概要(例:「Taro」など)を任意で入力し、送信します。
発行されたAPIキーをコピーし、プロパティパネルにそのまま貼り付けます。
即座に接続: このウィジェットは、ライブ音楽データを取得するために「Last.fm APIキー」と「Last.fmユーザーID(ユーザー名)」が必要です。
なぜユーザーIDが必要なのか?: ユーザーIDを指定することで、ウィジェットが誰の再生履歴(Scrobble履歴)を追跡・表示すべきかを正確に識別します。
主な特徴
リアルタイム同期: カスタマイズ可能な更新間隔により、「再生中の楽曲」ステータスとトラック履歴を即座に更新します。
没入感のある背景演出: アルバムアートから動的に生成される、なめらかなアニメーションのメッシュグラデーション機能を搭載。
選べる3つのレイアウト: ビジュアル重視の「Grid」、詳細なテキストを表示する「List」、コンパクトな「Minimal」の3種類をシームレスに切り替え可能。あらゆるセクションにフィットします。
スムーズなインタラクション: Framer Motionと完全連携し、レスポンシブなホバーアニメーションとエレガントなツールチップを実現。
100% Canvas & SSR対応:
useIsStaticRendererを使用して完全に最適化されており、エディタ内でも本番環境でも極めてスムーズなパフォーマンスを発揮します。



