# How to build a custom audio player with Framer

Evenings allows you to build a custom audio player directly into your website. Here is how you can make a custom live audio player if you are using Framer. 

## Step 01: Setting up Your Environment

1. **Install Framer**: If you haven't already, download and install Framer from the official [Framer website](https://www.framer.com/). Framer offers both a web version and a desktop app for Mac.
2. **Open Your Project**: Start a new project or open an existing one in Framer.

<figure><img src="https://1404790005-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTNYZSJCOGSx4jEGDBWSW%2Fuploads%2FnWhToEE9ThFQyeHfC56q%2FScreenshot%202024-04-07%20at%204.46.16%E2%80%AFPM.png?alt=media&#x26;token=1a1e3719-2ca2-439f-8dff-f5988c697e77" alt=""><figcaption></figcaption></figure>

## Step 02: Adding the Component to Your Project

1. **Create a New Code File**: In Framer, navigate to the **Code** section and create a new code file by clicking the **+** button. Name your file appropriately, for example, `EveningsPlayer.tsx`.
2. **Paste Your Component Code**: Copy the code of your component and paste it into the newly created code file in Framer.
3. **Save the File**: Make sure to save the file after pasting your code.

```jsx
import { useEffect, useState, useRef } from "react"
import { addPropertyControls, ControlType } from "framer"
import { PlayCircle, PauseCircle } from "react-feather"

const getStyles = (props) => ({
    container: {
        color: props.color,
        display: "flex",
        alignItems: "center",
        border: "1px solid white",
        borderColor: props.color,
        padding: "6px 8px",
        cursor: "pointer",
        width: "100%",
    },
    textMargin: {
        marginLeft: "12px",
    },
    audioHidden: {
        display: "none",
    },
})

async function fetchData(slug) {
    try {
        if (slug) {
            const response = await fetch(
                `https://api.evenings.co/v1/streams/${slug}/public`
            )
            const data = await response.json()
            return data
        }
    } catch (error) {
        console.error("Error fetching data: ", error)
        throw error
    }
}

function EveningsPlayer(props) {
    const audioRef = useRef(null)
    const [text, setText] = useState("Offline")
    const [isPlaying, setIsPlaying] = useState(false)
    const [streamUrl, setStreamUrl] = useState("")
    const styles = getStyles(props)

    useEffect(() => {
        fetchData(props.stationSlug)
            .then((data) => {
                if (data.online) {
                    setText(data.name)
                    setStreamUrl(data.streamUrl)
                } else {
                    setText("Offline")
                }
            })
            .catch(() => setText("Offline"))
    }, [])

    useEffect(() => {
        if (isPlaying) {
            audioRef.current?.play()
        } else {
            audioRef.current?.pause()
        }
    }, [isPlaying])

    const togglePlay = () => {
        setIsPlaying(!isPlaying)
    }

    return (
        <div style={styles.container} onClick={togglePlay}>
            {isPlaying ? (
                <PauseCircle size={18} color="currentColor" />
            ) : (
                <PlayCircle size={18} color="currentColor" />
            )}
            <div style={styles.textMargin}>{text}</div>
            <audio src={streamUrl} ref={audioRef} style={styles.audioHidden} />
        </div>
    )
}

addPropertyControls(EveningsPlayer, {
    stationSlug: {
        type: ControlType.String,
        title: "Station Slug",
    },
    color: {
        type: ControlType.Color,
        title: "Color",
        defaultValue: "white",
    },
})

export default EveningsPlayer
```

## Step 03: Using Your Component in the Canvas

1. **Access the Components Panel**: Go to the **Components** panel in Framer, where you'll find your `EveningsPlayer` component listed under the **Code** section.
2. **Drag and Drop**: Click and drag your `EveningsPlayer` component onto the canvas to create an instance of it.

<figure><img src="https://1404790005-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTNYZSJCOGSx4jEGDBWSW%2Fuploads%2FSalsOWVHBnrsKSV256Af%2FScreenshot%202024-04-07%20at%204.47.35%E2%80%AFPM.png?alt=media&#x26;token=452f51b9-c3d7-48d5-8193-4b092993e01a" alt=""><figcaption></figcaption></figure>

3. **Configure Properties**: With the component selected, use the properties panel to set the `Station Slug.` The `Station Slug` field is the URL slug that is appended for your Evenings Player. For example, if your evenings URL is `https://evenings.fm/garage`, your Station Slug will be  `garage`.

<figure><img src="https://1404790005-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTNYZSJCOGSx4jEGDBWSW%2Fuploads%2FQ5pl8RkZBNfgcJKjTm8x%2FScreenshot%202024-04-07%20at%204.33.40%E2%80%AFPM.png?alt=media&#x26;token=970506ea-9d78-4e7d-a8f1-b1a97b2ef0aa" alt=""><figcaption></figcaption></figure>

## Step 04: Preview and Interact

1. **Preview Mode**: Enter Preview mode by clicking the play icon in the top right corner of the Framer interface.
2. **Interact with Your Component**: Click on your `EveningsPlayer` component to test its functionality. It should toggle between play and pause states, displaying the appropriate icon.

<figure><img src="https://1404790005-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTNYZSJCOGSx4jEGDBWSW%2Fuploads%2FfQ4bjpFSxvmlf2VhIEok%2FScreenshot%202024-04-07%20at%204.48.13%E2%80%AFPM.png?alt=media&#x26;token=3cd6ca04-26c6-4213-a87d-d0e0907b9a0f" alt=""><figcaption></figcaption></figure>

By following these steps, you should be able to successfully install and use your custom Framer component within your projects. **That's it! Email <contact@evenings.email> with questions.**