diff --git a/README.md b/README.md index 72108aa..53c8000 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,8 @@ -# Azuracast Radio Overlays +# Overlays -This repository contains simple, ready-to-use browser source overlays for displaying "Now Playing" information from an Azuracast radio station. +This repository serves as a collection of various overlays for streaming and other purposes. +Each subdirectory contains overlays for a specific service or project. -## Features +## Available Overlays -* **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. +* **Azuracast:** Overlays for displaying "Now Playing" information from an Azuracast radio station. \ No newline at end of file diff --git a/azuracast/README.md b/azuracast/README.md new file mode 100644 index 0000000..b6f625b --- /dev/null +++ b/azuracast/README.md @@ -0,0 +1,49 @@ +# Azuracast Overlays + +This directory contains browser source overlays specifically designed 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://overlays.ramforth.net/azuracast/overlay-text-only.html` + * **With Album Art URL:** `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. diff --git a/overlay-text-only.html b/azuracast/overlay-text-only.html similarity index 100% rename from overlay-text-only.html rename to azuracast/overlay-text-only.html diff --git a/overlay-with-album-art.html b/azuracast/overlay-with-album-art.html similarity index 100% rename from overlay-with-album-art.html rename to azuracast/overlay-with-album-art.html