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. 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.

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.

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.

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.

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.

By following these steps, you should be able to successfully install and use your custom Framer component within your projects. That's it! Email [e-mail] with questions.