# 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="/files/oOUxRDeZZEIFo0XECrNn" 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="/files/tl0Bnajmri7JzBcBZEON" 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="/files/YfFfqdnNiazTJWxU5cIK" 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="/files/pt60XSCN8a8gwDUMxfoo" 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.**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://evenings.gitbook.io/evenings-api/guides/how-to-build-a-custom-audio-player-with-framer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.