Restructure repository and update READMEs
This commit is contained in:
49
azuracast/README.md
Normal file
49
azuracast/README.md
Normal file
@@ -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.
|
||||
66
azuracast/overlay-text-only.html
Normal file
66
azuracast/overlay-text-only.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Now Playing (Text Only)</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#song-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#artist {
|
||||
font-size: 18px;
|
||||
}
|
||||
#annotation {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="song-info">
|
||||
<div id="title"></div>
|
||||
<div id="artist"></div>
|
||||
<div id="annotation">radio.ramforth.net</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const nowPlayingUrl = 'https://radio.ramforth.net/api/nowplaying/1';
|
||||
|
||||
function updateNowPlaying() {
|
||||
fetch(nowPlayingUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const song = data.now_playing.song;
|
||||
document.getElementById('title').textContent = song.title;
|
||||
document.getElementById('artist').textContent = song.artist;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching Now Playing data:', error);
|
||||
document.getElementById('title').textContent = 'Error';
|
||||
document.getElementById('artist').textContent = 'Could not fetch data';
|
||||
});
|
||||
}
|
||||
|
||||
// Update every 5 seconds
|
||||
setInterval(updateNowPlaying, 5000);
|
||||
|
||||
// Initial update
|
||||
updateNowPlaying();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
80
azuracast/overlay-with-album-art.html
Normal file
80
azuracast/overlay-with-album-art.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Now Playing</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#now-playing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#album-art {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#song-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#artist {
|
||||
font-size: 18px;
|
||||
}
|
||||
#annotation {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="now-playing">
|
||||
<img id="album-art" src="" alt="Album Art">
|
||||
<div id="song-info">
|
||||
<div id="title"></div>
|
||||
<div id="artist"></div>
|
||||
<div id="annotation">radio.ramforth.net</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const nowPlayingUrl = 'https://radio.ramforth.net/api/nowplaying/1';
|
||||
|
||||
function updateNowPlaying() {
|
||||
fetch(nowPlayingUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const song = data.now_playing.song;
|
||||
document.getElementById('title').textContent = song.title;
|
||||
document.getElementById('artist').textContent = song.artist;
|
||||
document.getElementById('album-art').src = song.art;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching Now Playing data:', error);
|
||||
document.getElementById('title').textContent = 'Error';
|
||||
document.getElementById('artist').textContent = 'Could not fetch data';
|
||||
});
|
||||
}
|
||||
|
||||
// Update every 5 seconds
|
||||
setInterval(updateNowPlaying, 5000);
|
||||
|
||||
// Initial update
|
||||
updateNowPlaying();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user