51 lines
2.5 KiB
Markdown
51 lines
2.5 KiB
Markdown
# Azuracast Overlays
|
|
|
|
This directory contains browser source overlays specifically designed for displaying "Now Playing" information from an Azuracast radio station.
|
|
|
|
## Important Note
|
|
|
|
The files hosted on `https://overlays.ramforth.net/azuracast/` are for **reference and demonstration purposes only**. For the latest versions, deployment instructions, and to customize these overlays for your own use, please clone the main `Overlays` Gitea repository. Users are expected to deploy these files themselves.
|
|
|
|
## 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.
|
|
|
|
## 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 (Reference):** `https://overlays.ramforth.net/azuracast/overlay-text-only.html`
|
|
* **With Album Art URL (Reference):** `https://overlays.ramforth.net/azuracast/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. |