Update cover image and switch lyrics API integration
Replaced cover.png with cover.jpeg and updated CSS references. Changed radio name, streaming URL, and API endpoint in script.js. Removed Vagalume lyrics API integration in favor of using lyrics from RadioAPI.me, simplifying the lyrics fetching logic.
Este commit está contenido en:
@@ -94,9 +94,7 @@ To change the number of history items displayed, edit `js/script.js` and modify
|
|||||||
|
|
||||||
## 🌐 API Integration
|
## 🌐 API Integration
|
||||||
|
|
||||||
This player uses [RadioAPI.me](https://radioapi.me) for metadata. Get your API endpoint from their service.
|
This player uses [RadioAPI.me](https://radioapi.me) for metadata and its lyrics. Get your API endpoint from their service.
|
||||||
|
|
||||||
For lyrics functionality, get a Vagalume API key from [Vagalume API](https://api.vagalume.com.br/docs/).
|
|
||||||
|
|
||||||
## 🐛 Troubleshooting
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
|
|||||||
@@ -333,7 +333,7 @@ main {
|
|||||||
#currentCoverArt {
|
#currentCoverArt {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url("../img/cover.png") no-repeat center;
|
background: url("../img/cover.jpeg") no-repeat center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
transition: background-image 1s ease;
|
transition: background-image 1s ease;
|
||||||
}
|
}
|
||||||
@@ -588,7 +588,7 @@ input[type="range"]::-moz-range-thumb {
|
|||||||
.cover-historic {
|
.cover-historic {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background: url("../img/cover.png") no-repeat center;
|
background: url("../img/cover.jpeg") no-repeat center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|||||||
BIN
img/.DS_Store
vendido
BIN
img/.DS_Store
vendido
Archivo binario no mostrado.
BIN
img/cover.jpeg
Archivo normal
BIN
img/cover.jpeg
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 28 KiB |
BIN
img/cover.png
BIN
img/cover.png
Archivo binario no mostrado.
|
Antes Anchura: | Altura: | Tamaño: 621 KiB |
108
js/script.js
108
js/script.js
@@ -1,13 +1,10 @@
|
|||||||
const RADIO_NAME = "Game! Radio"
|
const RADIO_NAME = "Afrofusion Rap"
|
||||||
|
|
||||||
// Change Stream URL Here, Supports, ICECAST, ZENO, SHOUTCAST, RADIOJAR ETC.... DOES NOT SUPPORT HLS
|
// Change Stream URL Here, Supports, ICECAST, ZENO, SHOUTCAST, RADIOJAR ETC.... DOES NOT SUPPORT HLS
|
||||||
const URL_STREAMING = "https://play.streamafrica.net/gameradio"
|
const URL_STREAMING = "https://play.streamafrica.net/afrofusionrap"
|
||||||
|
|
||||||
// NEW UNIFIED API ENDPOINT
|
// NEW UNIFIED API ENDPOINT
|
||||||
const API_URL = "https://prod-api.radioapi.me/metadata/51a50466-49b7-444c-9a4a-4caf0a1aff64"
|
const API_URL = "https://prod-api.radioapi.me/metadata/92f09a6d-37f1-4c10-bf2a-018bf03136fc"
|
||||||
|
|
||||||
// Visit https://api.vagalume.com.br/docs/ to get your API key
|
|
||||||
const API_KEY = "18fe07917957c289983464588aabddfb"
|
|
||||||
|
|
||||||
// Loading state management
|
// Loading state management
|
||||||
let isInitialLoad = true
|
let isInitialLoad = true
|
||||||
@@ -19,8 +16,10 @@ const currentSongData = {
|
|||||||
artist: "",
|
artist: "",
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
|
|
||||||
|
|
||||||
var page = new Page()
|
var page = new Page()
|
||||||
page.changeTitlePage()
|
page.changeTitlePage()
|
||||||
page.setVolume()
|
page.setVolume()
|
||||||
@@ -34,7 +33,6 @@ window.onload = () => {
|
|||||||
// Initial data fetch
|
// Initial data fetch
|
||||||
getStreamingData()
|
getStreamingData()
|
||||||
|
|
||||||
|
|
||||||
// Interval to get streaming data in milliseconds
|
// Interval to get streaming data in milliseconds
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
getStreamingData()
|
getStreamingData()
|
||||||
@@ -287,72 +285,48 @@ function Page() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.refreshLyric = (currentSong, currentArtist) => {
|
this.refreshLyric = (lyrics) => {
|
||||||
// Show lyrics loading
|
// Show lyrics loading
|
||||||
showLyricsLoading()
|
showLyricsLoading()
|
||||||
|
|
||||||
var xhttp = new XMLHttpRequest()
|
var openLyric = document.getElementsByClassName("lyrics")[0]
|
||||||
xhttp.onreadystatechange = function () {
|
|
||||||
// Hide lyrics loading
|
// Hide lyrics loading
|
||||||
|
setTimeout(() => {
|
||||||
hideLyricsLoading()
|
hideLyricsLoading()
|
||||||
|
}, 500)
|
||||||
|
|
||||||
if (this.readyState === 4 && this.status === 200) {
|
if (lyrics && lyrics.trim() !== "") {
|
||||||
var data = JSON.parse(this.responseText)
|
// Remove skeleton loading from modal
|
||||||
|
const lyricsLoading = document.querySelector(".lyrics-loading")
|
||||||
|
if (lyricsLoading) lyricsLoading.style.display = "none"
|
||||||
|
|
||||||
var openLyric = document.getElementsByClassName("lyrics")[0]
|
const lyricElement = document.getElementById("lyric")
|
||||||
|
if (lyricElement) {
|
||||||
|
lyricElement.innerHTML = lyrics.replace(/\n/g, "<br />")
|
||||||
|
}
|
||||||
|
|
||||||
if (data.type === "exact" || data.type === "aprox") {
|
if (openLyric) {
|
||||||
var lyric = data.mus[0].text
|
openLyric.style.opacity = "1"
|
||||||
|
openLyric.setAttribute("data-toggle", "modal")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (openLyric) {
|
||||||
|
openLyric.style.opacity = "0.3"
|
||||||
|
openLyric.removeAttribute("data-toggle")
|
||||||
|
}
|
||||||
|
|
||||||
// Remove skeleton loading from modal
|
var modalLyric = document.getElementById("modalLyrics")
|
||||||
const lyricsLoading = document.querySelector(".lyrics-loading")
|
if (modalLyric) {
|
||||||
if (lyricsLoading) lyricsLoading.style.display = "none"
|
modalLyric.style.display = "none"
|
||||||
|
modalLyric.setAttribute("aria-hidden", "true")
|
||||||
|
}
|
||||||
|
|
||||||
const lyricElement = document.getElementById("lyric")
|
const backdrop = document.getElementsByClassName("modal-backdrop")[0]
|
||||||
if (lyricElement) {
|
if (backdrop) {
|
||||||
lyricElement.innerHTML = lyric.replace(/\n/g, "<br />")
|
backdrop.remove()
|
||||||
}
|
|
||||||
|
|
||||||
if (openLyric) {
|
|
||||||
openLyric.style.opacity = "1"
|
|
||||||
openLyric.setAttribute("data-toggle", "modal")
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (openLyric) {
|
|
||||||
openLyric.style.opacity = "0.3"
|
|
||||||
openLyric.removeAttribute("data-toggle")
|
|
||||||
}
|
|
||||||
|
|
||||||
var modalLyric = document.getElementById("modalLyrics")
|
|
||||||
if (modalLyric) {
|
|
||||||
modalLyric.style.display = "none"
|
|
||||||
modalLyric.setAttribute("aria-hidden", "true")
|
|
||||||
}
|
|
||||||
|
|
||||||
const backdrop = document.getElementsByClassName("modal-backdrop")[0]
|
|
||||||
if (backdrop) {
|
|
||||||
backdrop.remove()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var lyricsElement = document.getElementsByClassName("lyrics")[0]
|
|
||||||
if (lyricsElement) {
|
|
||||||
lyricsElement.style.opacity = "0.3"
|
|
||||||
lyricsElement.removeAttribute("data-toggle")
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
xhttp.open(
|
|
||||||
"GET",
|
|
||||||
"https://api.vagalume.com.br/search.php?apikey=" +
|
|
||||||
API_KEY +
|
|
||||||
"&art=" +
|
|
||||||
currentArtist +
|
|
||||||
"&mus=" +
|
|
||||||
currentSong.toLowerCase(),
|
|
||||||
true,
|
|
||||||
)
|
|
||||||
xhttp.send()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -528,7 +502,7 @@ function getStreamingData() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Update lyrics
|
// Update lyrics
|
||||||
page.refreshLyric(song, artist)
|
page.refreshLyric(data.lyrics || "")
|
||||||
|
|
||||||
// Update history if available
|
// Update history if available
|
||||||
if (data.history && data.history.length > 0) {
|
if (data.history && data.history.length > 0) {
|
||||||
@@ -717,16 +691,16 @@ function decimalToInt(vol) {
|
|||||||
function initializeHistoryItems() {
|
function initializeHistoryItems() {
|
||||||
const historyContainer = document.getElementById("historicSong")
|
const historyContainer = document.getElementById("historicSong")
|
||||||
const HISTORY_ITEMS_COUNT = 5
|
const HISTORY_ITEMS_COUNT = 5
|
||||||
|
|
||||||
if (historyContainer) {
|
if (historyContainer) {
|
||||||
// Clear any existing items
|
// Clear any existing items
|
||||||
historyContainer.innerHTML = ""
|
historyContainer.innerHTML = ""
|
||||||
|
|
||||||
// Generate history items
|
// Generate history items
|
||||||
for (let i = 0; i < HISTORY_ITEMS_COUNT; i++) {
|
for (let i = 0; i < HISTORY_ITEMS_COUNT; i++) {
|
||||||
const historyItem = document.createElement("article")
|
const historyItem = document.createElement("article")
|
||||||
historyItem.className = "history-item"
|
historyItem.className = "history-item"
|
||||||
|
|
||||||
historyItem.innerHTML = `
|
historyItem.innerHTML = `
|
||||||
<div class="cover-historic">
|
<div class="cover-historic">
|
||||||
<div class="cover-loading-spinner"></div>
|
<div class="cover-loading-spinner"></div>
|
||||||
@@ -740,7 +714,7 @@ function initializeHistoryItems() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
|
||||||
historyContainer.appendChild(historyItem)
|
historyContainer.appendChild(historyItem)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Referencia en una nueva incidencia
Block a user