diff --git a/README.md b/README.md index b1e21fc..72108aa 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,49 @@ -# AzuraCast-Radio-Overlays +# Azuracast Radio Overlays +This repository contains simple, ready-to-use browser source overlays for displaying "Now Playing" information from an Azuracast radio station. + +## Features + +* **Two Overlay Variants:** + * `overlay-text-only.html`: A clean, text-only overlay showing the current song title and artist. + * `overlay-with-album-art.html`: An overlay that includes the album art for the current song. +* **Easy to Customize:** The overlays are simple HTML and CSS files that can be easily modified to match your stream's branding. +* **Lightweight:** The overlays are designed to be lightweight and efficient, so they won't consume unnecessary resources. + +## Usage + +### OBS Studio: Browser Source Setup + +To add one of the overlays to your OBS Studio scene, follow these steps: + +1. **Choose an Overlay:** Decide whether you want to use the text-only overlay or the one with album art. + * **Text-only URL:** `https://gitea.ramforth.net/ramforth/AzuraCast-Radio-Overlays/raw/branch/main/overlay-text-only.html` + * **With Album Art URL:** `https://gitea.ramforth.net/ramforth/AzuraCast-Radio-Overlays/raw/branch/main/overlay-with-album-art.html` + +2. **Add a Browser Source:** In OBS Studio, right-click in the "Sources" panel and select "Add" -> "Browser". + +3. **Configure the Source:** + * Give the source a name (e.g., "Azuracast Overlay"). + * In the "URL" field, paste the URL of the overlay you chose. + * Set the "Width" and "Height" to your desired dimensions (e.g., 400x150). + * Click "OK". + +4. **Position the Overlay:** You can now resize and position the overlay within your scene as needed. + +### OBS Studio: Media Source Setup + +To add the radio stream itself to your OBS scene, you can use a "Media Source". This will allow you to play the radio audio directly in your stream. + +1. **Add a Media Source:** In OBS Studio, right-click in the "Sources" panel and select "Add" -> "Media Source". + +2. **Configure the Source:** + * Give the source a name (e.g., "Radio Stream"). + * Uncheck the "Local File" box. + * In the "Input" field, paste the following URL: `https://radio.ramforth.net/listen/lo-fi/radio.mp3` + * Click "OK". + +3. **Manage Audio:** You can now control the volume of the radio stream from the "Audio Mixer" panel in OBS. + +## Customization + +To customize the overlays, you can fork this repository and edit the HTML and CSS files directly. You can change the fonts, colors, layout, and more to match your stream's branding.