### Start Local Development Server (Bash)

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Command to start the local development server using npm. This is typically used for previewing changes during development. It requires npm to be installed and the project's dependencies to be set up.

```bash
npm start
```

--------------------------------

### Install @uimaxbai/am-lyrics Package

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Installs the @uimaxbai/am-lyrics web component using npm. This command is recommended for React users or those who prefer local installations over CDN.

```bash
npm install @uimaxbai/am-lyrics # For react users and those crazy enough to not use the CDN
```

--------------------------------

### Install Project Dependencies with Yarn or Bun (Bash)

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Instructions for installing project dependencies using either Yarn or Bun. These package managers are recommended over npm for faster installation times. The commands are straightforward and require no specific input other than executing them in the project's root directory.

```bash
yarn install
bun i
```

--------------------------------

### Install React and @lit/react Dependencies

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

This bash command installs the necessary React and Lit React bridge packages. Ensure these are installed to avoid errors when using the `AmLyrics` component within a React application.

```bash
npm install react @lit/react
```

--------------------------------

### Install @uimaxbai/am-lyrics via NPM

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Install the Apple Music web components package using npm for integration into projects using module bundlers. This provides access to the component for use in various JavaScript frameworks.

```bash
npm install @uimaxbai/am-lyrics
```

```javascript
// Vanilla JavaScript import
import '@uimaxbai/am-lyrics';

// React import
import { AmLyrics } from '@uimaxbai/am-lyrics/react';

// Direct class import (for extending or custom registration)
import { AmLyrics } from '@uimaxbai/am-lyrics';
```

--------------------------------

### Install @lit-labs/nextjs Adapter

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/next.md

Installs the `@lit-labs/nextjs` package, which provides server-side rendering capabilities for Lit web components within a Next.js application. This is a prerequisite for using web components with Next.js SSR.

```bash
npm i @lit-labs/nextjs
```

--------------------------------

### Manual Lyrics Playback Control with requestAnimationFrame

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Implements manual control over lyrics timing using `requestAnimationFrame` for precise synchronization, suitable for scenarios without a standard HTML5 audio element. It allows starting, resetting, and seeking lyrics playback by managing song start times and system timestamps.

```javascript
import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';

let animationFrameId;
let songStartTime = 0;
let systemStartTime = 0;

function stopAnimation() {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = null;
  }
}

function animate() {
  const amLyrics = document.querySelector('am-lyrics');
  if (!amLyrics) return;

  const elapsedTime = Date.now() - systemStartTime;
  amLyrics.currentTime = songStartTime + elapsedTime;

  animationFrameId = requestAnimationFrame(animate);
}

function startPlayback() {
  stopAnimation();
  songStartTime = 0;
  systemStartTime = Date.now();
  animate();
}

function handleLineClick(e) {
  stopAnimation();
  songStartTime = e.detail.timestamp;
  systemStartTime = Date.now();
  animate();
}

function resetPlayback() {
  stopAnimation();
  const amLyrics = document.querySelector('am-lyrics');
  if (amLyrics) {
    amLyrics.duration = -1; // Trigger reset
  }
  songStartTime = 0;
}

document.addEventListener('DOMContentLoaded', () => {
  const amLyrics = document.querySelector('am-lyrics');
  const startButton = document.querySelector('#start-button');
  const resetButton = document.querySelector('#reset-button');

  if (amLyrics) {
    amLyrics.addEventListener('line-click', handleLineClick);
  }
  if (startButton) {
    startButton.addEventListener('click', startPlayback);
  }
  if (resetButton) {
    resetButton.addEventListener('click', resetPlayback);
  }
});

// HTML structure needed for this script:
// <am-lyrics
//   song-title="Uptown Funk"
//   song-artist="Mark Ronson"
//   query="Uptown Funk Mark Ronson"
// ></am-lyrics>
//
// <button id="start-button">Start</button>
// <button id="reset-button">Reset</button>
```

--------------------------------

### Control Apple Music Lyrics Playback and Metadata

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/demo/index.html

This JavaScript code manages the 'am-lyrics' web component. It provides functionality to load song metadata (title, artist, duration), start and stop lyrics playback, and reset the component. It uses `requestAnimationFrame` for smooth animation and handles user interactions like clicking on lyrics lines to seek.

```javascript
import '../dist/src/am-lyrics.js';

let animationFrameId;
let songStartTime = 0;
let systemStartTime = 0;

function stopAnimation() {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = null;
  }
}

function animate() {
  const amLyrics = document.querySelector('am-lyrics');
  if (!amLyrics) return;

  const elapsedTime = Date.now() - systemStartTime;
  amLyrics.currentTime = songStartTime + elapsedTime; // Convert to milliseconds

  animationFrameId = requestAnimationFrame(animate);
}

function startPlayback() {
  stopAnimation();
  songStartTime = 0;
  systemStartTime = Date.now();
  animate();
}

function handleLineClick(e) {
  stopAnimation();
  songStartTime = e.detail.timestamp;
  systemStartTime = Date.now();
  animate();
}

function handleLoadMetadata() {
  const titleInput = document.querySelector('#title-input');
  const artistInput = document.querySelector('#artist-input');
  const durationInput = document.querySelector('#duration-input');
  const queryInput = document.querySelector('#query-input');
  const amLyrics = document.querySelector('am-lyrics');

  if (!amLyrics) return;

  const title = titleInput?.value.trim() ?? '';
  const artist = artistInput?.value.trim() ?? '';
  const queryText = queryInput?.value.trim() ?? '';
  const durationText = durationInput?.value.trim() ?? '';
  const durationMs = durationText ? Number(durationText) : NaN;

  if (titleInput) {
    amLyrics.songTitle = title;
  }
  if (artistInput) {
    amLyrics.songArtist = artist;
  }

  if (!Number.isNaN(durationMs) && durationMs > 0) {
    amLyrics.songDurationMs = durationMs;
  } else if (durationText === '') {
    amLyrics.songDurationMs = undefined;
  }

  const fallbackQuery = queryText || [title, artist].filter(Boolean).join(' ');
  if (fallbackQuery) {
    amLyrics.query = fallbackQuery;
  } else {
    amLyrics.query = '';
  }

  amLyrics.isrc = '';
  amLyrics.musicId = '';
}

function resetPlayback() {
  stopAnimation();
  const amLyrics = document.querySelector('am-lyrics');
  if (amLyrics) {
    // Set duration to -1 to trigger reset
    amLyrics.duration = -1;
  }
  songStartTime = 0;
}

document.addEventListener('DOMContentLoaded', () => {
  const amLyrics = document.querySelector('am-lyrics');
  const loadButton = document.querySelector('#load-button');
  const startButton = document.querySelector('#start-button');
  const resetButton = document.querySelector('#reset-button');
  const titleInput = document.querySelector('#title-input');
  const artistInput = document.querySelector('#artist-input');
  const queryInput = document.querySelector('#query-input');
  const durationInput = document.querySelector('#duration-input');

  if (amLyrics) {
    amLyrics.addEventListener('line-click', handleLineClick);
  }

  if (titleInput && amLyrics?.songTitle) {
    titleInput.value = amLyrics.songTitle;
  }
  if (artistInput && amLyrics?.songArtist) {
    artistInput.value = amLyrics.songArtist;
  }
  if (queryInput && amLyrics?.query) {
    queryInput.value = amLyrics.query;
  }
  if (durationInput && typeof amLyrics?.songDurationMs === 'number') {
    durationInput.value = String(amLyrics.songDurationMs);
  }

  if (loadButton) {
    loadButton.addEventListener('click', handleLoadMetadata);
  }
  if (startButton) {
    startButton.addEventListener('click', startPlayback);
  }
  if (resetButton) {
    resetButton.addEventListener('click', resetPlayback);
  }
});
```

--------------------------------

### Basic HTML Integration for Lyrics Component

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Demonstrates how to initialize the am-lyrics Web Component directly in HTML, setting essential song metadata and styling properties. It requires importing the component script and then using the custom am-lyrics tag with attributes.

```html
<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';
</script>

<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  song-album="Uptown Special"
  song-duration="269000"
  query="Uptown Funk Mark Ronson"
  current-time="0"
  highlight-color="#f00"
  hover-background-color="#e0e0e0"
  font-family="'Inter', Arial, sans-serif"
  autoscroll
  interpolate
></am-lyrics>
```

--------------------------------

### Dynamic Metadata Loading for Apple Music Lyrics Component

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Demonstrates how to dynamically load song metadata for the am-lyrics web component using plain HTML and JavaScript. This allows updating the song title, artist, duration, and search query without re-initializing the component. It relies on the am-lyrics component being imported via CDN.

```html
<div>
  <input id="title-input" type="text" placeholder="Song title" />
  <input id="artist-input" type="text" placeholder="Artist" />
  <input id="query-input" type="text" placeholder="Search query (e.g. Title - Artist)" />
  <input id="duration-input" type="number" placeholder="Duration (ms)" />
  <button id="load-button">Load lyrics</button>
</div>

<am-lyrics></am-lyrics>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';

  function handleLoadMetadata() {
    const titleInput = document.querySelector('#title-input');
    const artistInput = document.querySelector('#artist-input');
    const durationInput = document.querySelector('#duration-input');
    const queryInput = document.querySelector('#query-input');
    const amLyrics = document.querySelector('am-lyrics');

    if (!amLyrics) return;

    const title = titleInput?.value.trim() ?? '';
    const artist = artistInput?.value.trim() ?? '';
    const queryText = queryInput?.value.trim() ?? '';
    const durationText = durationInput?.value.trim() ?? '';
    const durationMs = durationText ? Number(durationText) : NaN;

    // Set song metadata (triggers lyrics fetching)
    amLyrics.songTitle = title;
    amLyrics.songArtist = artist;

    if (!Number.isNaN(durationMs) && durationMs > 0) {
      amLyrics.songDurationMs = durationMs;
    }

    // Fallback query for Apple Music API
    const fallbackQuery = queryText || [title, artist].filter(Boolean).join(' ');
    if (fallbackQuery) {
      amLyrics.query = fallbackQuery;
    }

    // Clear previous identifiers
    amLyrics.isrc = '';
    amLyrics.musicId = '';
  }

  document.addEventListener('DOMContentLoaded', () => {
    const loadButton = document.querySelector('#load-button');
    if (loadButton) {
      loadButton.addEventListener('click', handleLoadMetadata);
    }
  });
</script>
```

--------------------------------

### Format Project Code (Bash)

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Command to automatically fix linting and formatting errors in the project. This is a convenient way to ensure code style consistency. It utilizes tools like Prettier or ESLint's auto-fix capabilities.

```bash
npm run format
```

--------------------------------

### Lint Project Code (Bash)

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Command to scan the project for linting and formatting errors. This command helps maintain code quality and consistency across the project. It relies on the project's configured linting tools, typically ESLint.

```bash
npm run lint
```

--------------------------------

### Configure next.config.js for Lit SSR

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/next.md

Updates the `next.config.js` file to integrate the `@lit-labs/nextjs` adapter. This ensures that web components are correctly handled during the server-side rendering process in Next.js.

```javascript
// next.config.js
const withLitSSR = require('@lit-labs/nextjs')();

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Add your own config here
  reactStrictMode: true,
};

module.exports = withLitSSR(nextConfig);
```

--------------------------------

### Integrate AmLyrics Component in React

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

This React component demonstrates how to use the `AmLyrics` component. It includes setting up an audio player, syncing its `currentTime` with the `AmLyrics` component for scrolling, and handling line clicks to seek the audio. The `'use client'` directive is crucial for Next.js environments.

```jsx
'use client'; // VERY IMPORTANT!!!

import React, { useState, useCallback, useRef, useEffect } from 'react';
import { AmLyrics } from '@uimaxbai/am-lyrics/react';

export default function App() {
  const [currentTime, setCurrentTime] = useState(0);
  const audioRef = useRef<HTMLAudioElement>(null);

  // Sync audio player time with the component
  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    let animationFrameId: number;

    const updateCurrentTime = () => {
      setCurrentTime(audio.currentTime * 1000);
      animationFrameId = requestAnimationFrame(updateCurrentTime); // Use requestAnimationFrame to prevent choppy scrolling
    };

    const handlePlay = () => {
      animationFrameId = requestAnimationFrame(updateCurrentTime);
    };

    const handlePause = () => {
      cancelAnimationFrame(animationFrameId);
    };

    const handleTimeUpdate = () => {
      setCurrentTime(audio.currentTime * 1000); // Convert to milliseconds
    };

    audio.addEventListener('play', handlePlay);
    audio.addEventListener('pause', handlePause);
    audio.addEventListener('timeupdate', handleTimeUpdate);

    return () => {
      cancelAnimationFrame(animationFrameId);
      audio.removeEventListener('play', handlePlay);
      audio.removeEventListener('pause', handlePause);
      audio.removeEventListener('timeupdate', handleTimeUpdate);
    };
  }, []);

  // Handle line clicks to seek the audio
  const handleLineClick = useCallback((event: Event) => {
    const customEvent = event as CustomEvent<{ timestamp: number }>;
    const audio = audioRef.current;
    if (audio) {
      audio.currentTime = customEvent.detail.timestamp / 1000; // Convert to seconds
      audio.play();
    }
  }, []);

  return (
    <div>
      <audio ref={audioRef} src="/uptown_funk.flac" controls />
        <AmLyrics
          songTitle="Uptown Funk"
          songArtist="Mark Ronson"
          query="Uptown Funk Mark Ronson"
          currentTime={currentTime}
          onLineClick={handleLineClick}
          autoScroll
          highlightColor='#fff'
        />
    </div>
  );
}

```

--------------------------------

### React Integration for Apple Music Lyrics

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Integrates the AmLyrics component into a React application using the @lit/react wrapper. It demonstrates state management for audio playback time and handling user interactions like clicking on lyrics to seek. Dependencies include React, @lit/react, and the am-lyrics component.

```bash
npm install @uimaxbai/am-lyrics react @lit/react
```

```jsx
'use client'; // Required for Next.js

import React, { useState, useCallback, useRef, useEffect } from 'react';
import { AmLyrics } from '@uimaxbai/am-lyrics/react';

export default function App() {
  const [currentTime, setCurrentTime] = useState(0);
  const audioRef = useRef<HTMLAudioElement>(null);

  // Sync audio player time with the component using requestAnimationFrame
  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    let animationFrameId: number;

    const updateCurrentTime = () => {
      setCurrentTime(audio.currentTime * 1000);
      animationFrameId = requestAnimationFrame(updateCurrentTime);
    };

    const handlePlay = () => {
      animationFrameId = requestAnimationFrame(updateCurrentTime);
    };

    const handlePause = () => {
      cancelAnimationFrame(animationFrameId);
    };

    const handleTimeUpdate = () => {
      setCurrentTime(audio.currentTime * 1000);
    };

    audio.addEventListener('play', handlePlay);
    audio.addEventListener('pause', handlePause);
    audio.addEventListener('timeupdate', handleTimeUpdate);

    return () => {
      cancelAnimationFrame(animationFrameId);
      audio.removeEventListener('play', handlePlay);
      audio.removeEventListener('pause', handlePause);
      audio.removeEventListener('timeupdate', handleTimeUpdate);
    };
  }, []);

  // Handle line clicks to seek the audio
  const handleLineClick = useCallback((event: Event) => {
    const customEvent = event as CustomEvent<{ timestamp: number }>;
    const audio = audioRef.current;
    if (audio) {
      audio.currentTime = customEvent.detail.timestamp / 1000;
      audio.play();
    }
  }, []);

  return (
    <div>
      <audio ref={audioRef} src="/uptown_funk.flac" controls />
      <AmLyrics
        songTitle="Uptown Funk"
        songArtist="Mark Ronson"
        songAlbum="Uptown Special"
        query="Uptown Funk Mark Ronson"
        currentTime={currentTime}
        onLineClick={handleLineClick}
        autoScroll
        interpolate
        highlightColor='#007aff'
        hoverBackgroundColor='#f5f5f5'
        fontFamily="'Inter', sans-serif"
      />
    </div>
  );
}

```

--------------------------------

### Configure next.config.ts for Lit SSR

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/next.md

Updates the `next.config.ts` file to integrate the `@lit-labs/nextjs` adapter. This is the TypeScript equivalent of configuring `next.config.js` for Lit SSR support.

```typescript
import type { NextConfig } from "next";

const withLitSSR = require('@lit-labs/nextjs')();

const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: true
};

module.exports = withLitSSR(nextConfig);
```

--------------------------------

### Usage of am-lyrics Web Component

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Demonstrates how to use the <am-lyrics> web component in HTML, setting various properties such as song title, artist, duration, and appearance customization. The 'autoscroll' and 'interpolate' attributes enable dynamic features.

```html
<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  song-album="Uptown Special"
  song-duration="269000"
  query="Uptown Funk Mark Ronson"
  current-time="0"
  duration=""
  highlight-color="#f00"
  hover-background-color="#e0e0e0"
  hide-source-footer="false"
  font-family="'Inter', Arial, sans-serif"
  autoscroll
  interpolate
></am-lyrics>
```

--------------------------------

### Standalone Lyrics Playback and Search with JavaScript

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

This HTML and JavaScript snippet shows how to use the `AmLyrics` web component directly in HTML. It includes functions for managing the lyrics timing, handling line clicks to seek playback, and searching for songs. Event listeners are set up for the 'DOMContentLoaded' event to ensure elements are available.

```html
<script>
  let animationFrameId;
  let songStartTime = 0;
  let systemStartTime = 0;

  function stopAnimation() {
    if (animationFrameId) {
      cancelAnimationFrame(animationFrameId);
      animationFrameId = null;
    }
  }

  function animate() {
    const amLyrics = document.querySelector('am-lyrics');
    if (!amLyrics) return;

    const elapsedTime = Date.now() - systemStartTime;
    amLyrics.currentTime = songStartTime + elapsedTime;

    animationFrameId = requestAnimationFrame(animate);
  }

  function startPlayback() {
    stopAnimation();
    songStartTime = 0;
    systemStartTime = Date.now(); // Use dates instead of setInterval() for more accuracy
    animate();
  }

  function handleLineClick(e) {
    stopAnimation();
    songStartTime = e.detail.timestamp;
    systemStartTime = Date.now();
    animate();
  }

  function handleSearch() {
    const searchInput = document.querySelector('#search-input');
    const amLyrics = document.querySelector('am-lyrics');
    if (searchInput && amLyrics) {
      // Expect "Title - Artist" in the search field for optimal LyricsPlus results
      const userInput = searchInput.value.trim();
      const [titlePart = '', artistPart = ''] = userInput
        .split(' - ')
        .map(part => part.trim());

      amLyrics.songTitle = titlePart || userInput;
      amLyrics.songArtist = artistPart;
      amLyrics.query = userInput;
      amLyrics.isrc = '';
      amLyrics.musicId = '';
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    const amLyrics = document.querySelector('am-lyrics');
    const searchButton = document.querySelector('#search-button');
    const startButton = document.querySelector('#start-button');

    if (amLyrics) {
      amLyrics.addEventListener('line-click', handleLineClick);
    }

    if (searchButton) {
      searchButton.addEventListener('click', handleSearch);
    }

    if (startButton) {
      startButton.addEventListener('click', startPlayback);
    }
  });
</script>
```

--------------------------------

### Include am-lyrics via CDN

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Includes the am-lyrics web component by referencing its minified JavaScript file from a CDN. This method is suitable for quick integration without a build process.

```html
<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';
</script>
```

--------------------------------

### Synchronize Lyrics with HTML Audio Element (HTML, JavaScript)

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

This snippet demonstrates how to synchronize lyrics displayed by the am-lyrics web component with a standard HTML audio element. It listens for time updates from the audio player to update the lyrics' current time and handles clicks on lyric lines to seek the audio player. No external dependencies are required beyond the am-lyrics component itself.

```html
<audio id="audio-player" src="path/to/your/song.mp3" controls></audio>
<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  query="Uptown Funk Mark Ronson"
></am-lyrics>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const amLyrics = document.querySelector('am-lyrics');
    const audioPlayer = document.querySelector('#audio-player');

    if (amLyrics && audioPlayer) {
      // Update lyrics time when audio time updates
      audioPlayer.addEventListener('timeupdate', () => {
        // The component expects time in milliseconds
        amLyrics.currentTime = audioPlayer.currentTime * 1000;
      });

      // Seek audio when a lyric line is clicked
      amLyrics.addEventListener('line-click', (e) => {
        // The event detail contains the timestamp in milliseconds
        audioPlayer.currentTime = e.detail.timestamp / 1000;
        audioPlayer.play();
      });
    }
  });
</script>
```

--------------------------------

### Dynamically Import Web Component in React

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/next.md

Demonstrates how to dynamically import a custom web component (`AmLyrics`) within a React component in Next.js. This approach, using `next/dynamic` with `ssr: false`, prevents hydration mismatches by only rendering the component on the client-side.

```tsx
// Put me at the start of the file: above the React example in README.md.
import dynamic from 'next/dynamic';

const AmLyrics = dynamic(
  () => {
    // Dynamically import the custom element
    import('@uimaxbai/am-lyrics/am-lyrics.js');
    // Then import the React component
    return import('@uimaxbai/am-lyrics/react').then((mod) => mod.AmLyrics);
  },
  { ssr: false }
);
```

--------------------------------

### CSS Custom Properties for Styling am-lyrics

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Customize the appearance of the am-lyrics component using CSS variables. This allows for consistent theming across your application. Supported variables include highlight colors and hover backgrounds. Dark mode is supported via media queries.

```html
<style>
  am-lyrics {
    /* Primary highlight color for active lyrics */
    --am-lyrics-highlight-color: #007aff;

    /* Hover background color */
    --hover-background-color: #f5f5f5;

    /* Alternative highlight color (fallback) */
    --highlight-color: #000;

    /* Container styling */
    width: 100%;
    max-width: 600px;
    height: 500px;
    margin: 0 auto;
    font-size: 16px;
  }

  /* Dark mode styling */
  @media (prefers-color-scheme: dark) {
    am-lyrics {
      --am-lyrics-highlight-color: #0a84ff;
      --hover-background-color: #2c2c2e;
      color: #ffffff;
    }
  }
</style>

<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  query="Uptown Funk Mark Ronson"
  current-time="0"
  autoscroll
  interpolate
></am-lyrics>
```

--------------------------------

### CSS Custom Properties for am-lyrics Styling

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Shows how to customize the appearance of the <am-lyrics> web component using CSS custom properties (variables). These properties allow for overriding default highlight colors, hover backgrounds, and other visual aspects.

```css
am-lyrics {
  /* Highlight color for active lyrics */
  --am-lyrics-highlight-color: #007aff;
  
  /* Hover background color (fallback) */
  --hover-background-color: #f5f5f5;
  
  /* Alternative highlight color (fallback) */
  --highlight-color: #000;
}
```

--------------------------------

### Handle am-lyrics 'line-click' Event

Source: https://github.com/uimaxbai/apple-music-web-components/blob/main/README.md

Captures the 'line-click' event from the am-lyrics component to obtain the timestamp of the clicked lyric line. This allows for seeking playback to the corresponding part of the song.

```javascript
amLyrics.addEventListener('line-click', (event) => {
  console.log('Seek to:', event.detail.timestamp); // timestamp in milliseconds
});
```

--------------------------------

### Synchronize Lyrics with HTML5 Audio Element

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Connects the am-lyrics component to an HTML5 audio element for seamless time synchronization and click-to-seek functionality. It uses event listeners to update the lyrics' current time based on audio playback and to control the audio player when a lyric line is clicked.

```html
<audio id="audio-player" src="song.mp3" controls></audio>
<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  query="Uptown Funk Mark Ronson"
></am-lyrics>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';

  document.addEventListener('DOMContentLoaded', () => {
    const amLyrics = document.querySelector('am-lyrics');
    const audioPlayer = document.querySelector('#audio-player');

    if (amLyrics && audioPlayer) {
      // Sync lyrics time with audio playback (component expects milliseconds)
      audioPlayer.addEventListener('timeupdate', () => {
        amLyrics.currentTime = audioPlayer.currentTime * 1000;
      });

      // Handle line clicks to seek audio to specific timestamp
      amLyrics.addEventListener('line-click', (e) => {
        audioPlayer.currentTime = e.detail.timestamp / 1000;
        audioPlayer.play();
      });
    }
  });
</script>
```

--------------------------------

### Search Lyrics by Apple Music ID

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Query lyrics using a specific Apple Music song identifier. Lyrics are fetched exclusively from the Apple Music backup endpoint when this ID is used, as the LyricsPlus provider does not support it. The 'highlight-color' can also be customized.

```html
<am-lyrics
  music-id="1440650428"
  highlight-color="#fa243c"
></am-lyrics>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';

  // When using music-id alone, lyrics are fetched exclusively from Apple Music backup
  // LyricsPlus provider does not support Apple Music IDs
</script>
```

--------------------------------

### Search Lyrics by ISRC Code

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Identify songs precisely using their International Standard Recording Code (ISRC). The component falls back to using the 'query' attribute if the ISRC lookup fails. Ensure the ISRC is accurate for reliable song matching.

```html
<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  isrc="GBARL1400076"
  query="Uptown Funk Mark Ronson"
></am-lyrics>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';

  // ISRC is used to verify correct song match from lyrics providers
  // Component will still fall back to query if ISRC lookup fails
</script>
```

--------------------------------

### Hide Source Attribution Footer

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Remove the footer that displays the lyrics provider attribution (e.g., LyricsPlus or Apple Music). This is useful for embedded applications where branding is managed separately, providing a cleaner interface.

```html
<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  query="Uptown Funk Mark Ronson"
  hide-source-footer="true"
></am-lyrics>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';

  // Hides the footer showing lyrics source (LyricsPlus or Apple Music)
  // Useful for embedded implementations where branding is handled elsewhere
</script>
```

--------------------------------

### Disable Word Interpolation Animation

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Turn off the word-by-word animation for highlighting lyrics, resulting in simpler line-by-line highlighting. This can reduce visual complexity and potentially improve performance on less powerful devices.

```html
<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  query="Uptown Funk Mark Ronson"
  current-time="0"
  autoscroll
  interpolate="false"
></am-lyrics>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';

  // With interpolate="false", entire lines highlight at once without word animation
  // Reduces visual complexity and may improve performance on lower-end devices
</script>
```

--------------------------------

### Disable Auto-Scroll Behavior in am-lyrics

Source: https://context7.com/uimaxbai/apple-music-web-components/llms.txt

Disable the automatic scrolling of lyrics to the currently playing line. This allows users to manually scroll through lyrics during playback. User manual scrolling temporarily pauses auto-scroll for 2 seconds when enabled.

```html
<am-lyrics
  song-title="Uptown Funk"
  song-artist="Mark Ronson"
  query="Uptown Funk Mark Ronson"
  current-time="0"
  interpolate
></am-lyrics>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';

  // Without 'autoscroll' attribute, lyrics won't auto-scroll to active line
  // Users can still scroll manually to read ahead or behind current position
  // User manual scrolling temporarily pauses auto-scroll for 2 seconds when enabled
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.