gsavio / player-shoutcast-html5 Goto Github PK

Alguém sabe me dizer como resolvo esse erro de Cors? Sempre acontece isso com esse player. Observem na imagem em anexo. A mensagem do erro se refere ao "acess control allow origin" que não está presente.

Can anyone tell me how to solve this Cors error? This always happens with this player. Look at the attached image. The error message refers to "access control allow origin" which is not present.

we have followed all the guides here, curl is all running we know that as our other sites display song feeds ok
here is the link https://maxxradio.net/player/ we are just at a loss now as we dont know how to solve this please help asap

As I mentioned in the previous "Issue" the updated code does not work, it does not connect to the streaming server.
The above code worked until yesterday, now it doesn't show metadata.
ERROR:
Uncaught TypeError: Cannot read property 'replace' of undefined at XMLHttpRequest.xhttp.onreadystatechange (script.js:372)
LINE 372 script.js
let song = data.currentSong.replace(/'/g, '\'');

EDIT:
This problem is because PHP or cURL fails on the side of my hosting.

As the above code stopped working, I have used the updated one, but it doesn't work.
It doesn't even allow you to connect to the streaming server!
Now neither old nor new code works :/

olá eu tentei fazer com que o nextsong funcionasse mas não conseguir. tem como vc me ajudar?

testei isso:
$nextSong = filter_input(INPUT_GET, 'next', FILTER_VALIDATE_BOOLEAN);
if(!empty($url)) {
if($historic) {
$urls[] = $url . '/7.html';
$urls[] = $url . '/played';
if($nextSong) $urls[] = $url . '/nextsong';

	$curl = curl_multi_init();
	foreach($urls as $key => $value){
		$ch[$key] = curl_init($value);
		curl_setopt($ch[$key], CURLOPT_RETURNTRANSFER, true);
		curl_setopt($ch[$key], CURLOPT_USERAGENT, 'Mozilla/5.0');
		curl_multi_add_handle($curl, $ch[$key]);
	}
	
	do {
	curl_multi_exec($curl, $running);
	curl_multi_select($curl);
	} while ($running > 0);
	
	foreach(array_keys($ch) as $key){
		curl_multi_remove_handle($curl, $ch[$key]);
		$content[] = curl_multi_getcontent($ch[$key]);
	}

	$data = $content[0];

	if($nextSong) {
		$nextSongName = (isset($content[2])) ? explode('-', $content[2]) : '';

		if(isset($nextSongName[1])) {
			$array['nextSong'] = ['artist' => $nextSongName[0], 'song' => $nextSongName[1]];
		} else {
			$array['nextSong'] = ['artist' => '', 'song' => $nextSongName[0]];
		}
	}

	// Put the songs name between <music> tag
	$pagina = str_replace('</td><td>', '<music>', $content[1], $count);

	$playedSongs = explode('<music>', $pagina);

	// Remove unrelacionated content
	unset($playedSongs[0]);
	unset($playedSongs[1]);
	unset($playedSongs[2]);

	foreach($playedSongs as $song) {
		// Get the name of the song
		$cutStr = strpos($song, '</td></tr>');
		$playedSong = substr($song, 0, $cutStr);
		
		// Separate artist from song
		$songData = explode('-', $playedSong);
		$songNameHistoric = (!empty($songData[1])) ? trim($songData[1]) : '';
		
		// Put in the principal array
		$array['songHistory'][] = ['artist' => rtrim($songData[0]), 'song' => $songNameHistoric];
	}
	
	curl_multi_close($curl);
} else {
	$curl = curl_init($url . '/7.html');

	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl, CURLOPT_USERAGENT, 'Mozilla/5.0');
	
	$data = curl_exec($curl);
	
	curl_close($curl);
}

e mais isso:

const next = true;

this.refreshHistoric = function (info, n) {
    var $nextDiv = document.querySelectorAll('#nextSong article');
    var $songName = document.querySelectorAll('#nextSong article .music-info .song');
    var $artistName = document.querySelectorAll('#nextSong article .music-info .artist');

    // Default cover art
    var urlCoverArt = 'img/bg-capa.jpg';

    // Get cover art for song history
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            var data = JSON.parse(this.responseText);
            var artworkUrl100 = (data.resultCount) ? data.results[0].artworkUrl100 : urlCoverArt;

            document.querySelectorAll('#nextSong article .cover-historic')[n].style.backgroundImage = 'url(' + artworkUrl100 + ')';
        }
        // Formating characters to UTF-8
        var music = info.song.replace(/'/g, '\'');
        var songHist = music.replace(/&/g, '&');

        var artist = info.artist.replace(/'/g, '\'');
        var artistHist = artist.replace(/&/g, '&');

        $songName[n].innerHTML = songHist;
        $artistName[n].innerHTML = artistHist;

        // Add class for animation
        $nextDiv[n].classList.add('animated');
        $nextDiv[n].classList.add('slideInRight');
    }
    xhttp.open('GET', 'https://itunes.apple.com/search?term=' + info.artist + ' ' + info.song + '&media=music&limit=1', true);
    xhttp.send();

    setTimeout(function () {
        for (var j = 0; j < 2; j++) {
            $nextDiv[j].classList.remove('animated');
            $nextDiv[j].classList.remove('slideInRight');
        }
    }, 2000);
}

tambem mudei aqui e nada:

var d = new Date();

// Requisition with timestamp to prevent cache on mobile devices
xhttp.open('GET', 'api.php?url=' + URL_STREAMING + '&historic=' + HISTORIC + '&next=' + NEXT + '&t=' + d.getTime(), true);
xhttp.send();

}

Recently Played Doesnt Follow The Icy metadata it only changes when you're streaming Live.

It Stays The SAME WHEN YOU ARE NOT STREAMING.

Muito bom, pode aparecer o nome do Album?
Obrigado pelo seu trabalho.

edit: a melhor maneira de meter é usando:

<?php include 'player/index.html'; ?>

é que não me esta a resultar.
https://i.imgur.com/eNvhwzT.png

Vagalume API 503 Service Unavailable

I have opened an issue on the projetc, but as I have read this app is discontinued.

If someone comes up with an alternative to vagalume it would be a good idea to share it.

Antes de mais, excelente player! Obrigado pelo trabalho e por disponibilizar.

A minha questão é a seguinte.
Existe forma de através do browser do smartphone o audio começar com autoplay?
Como está, o utilizador é forçado a clicar no botão PLAY.

Mais uma vez obrigado.

its by open the page and when i will play musik its also no musik!

The api.php throws this error. My streaming url is http://stream.zeno.fm/fq3qwvw6g2zuv /https://node-22.zeno.fm/fq3qwvw6g2zuv?rj-ttl=5&rj-tok=AAABer6OGz8AbMikoN0kj6reQg/ https://radiobarcelona.000webhostapp.com/php/player-shoutcast-html5-master/

Warning: file_get_contents(http://stream.zeno.fm/status-json.xsl): failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found in /storage/ssd5/134/15667134/public_html/php/player-shoutcast-html5-master/api.php on line 149

Warning: Cannot modify header information - headers already sent by (output started at /storage/ssd5/134/15667134/public_html/php/player-shoutcast-html5-master/api.php:149) in /storage/ssd5/134/15667134/public_html/php/player-shoutcast-html5-master/api.php on line 207

Warning: Cannot modify header information - headers already sent by (output started at /storage/ssd5/134/15667134/public_html/php/player-shoutcast-html5-master/api.php:149) in /storage/ssd5/134/15667134/public_html/php/player-shoutcast-html5-master/api.php on line 208
{"error":"Failed to fetch data"}

Hey Guys, just found https://api.streamafrica.net/host/

it helps host your api.php file for free forever if you plan on using a free html static hosts like cloudflare pages or netify etc.

How To?

just copy the github raw file Url of the api.php and go to https://api.streamafrica.net/host/ paste it there and you get your free php file for hosting, comes with a URL and path/ No CORS problem, Add the full URL inside the script.js file in this Line

and replace it with https://api.streamafrica.net/host/upload/1541.php or the link you had when you uploaded the php file from github. Change the .log file name in the api.php file and make sure to make it unique if you plan on keeping history

WORKING EXAMPLE : https://streamafrica-net.pages.dev/lofi/lofi/

Example for the code line edit is :

xhttp.open('GET', 'https://api.streamafrica.net/host/upload/1541.php?url=' + URL_STREAMING + '&streamtype=' + STREAMING_TYPE + '&historic=' + HISTORIC + '&next=' + NEXT_SONG + '&t=' + d.getTime(), true); xhttp.send();}

Any one want to collaborate and use Deezer Artwork API ?

hello
i don't get why the cover aren't updating sometines or missing sometimes or not showing at all
when is on my HTTPS server ( https://www.syndicatedhiphop.tk/player/ )
but on my regular website no issue maybe sometimes
the cover just doesn't update( http://dirty.networkmechanics.co.uk/player/ )
same on mobile device (Android)
but funny thing when i do it with Brave browser in private navigation thru TOR
https://www.syndicatedhiphop.tk/player/ work better
been trying bunch of stuff i going dumb now
but i think is something to do with itunes api getting the cover art
then somewhere in the script
the display of the cover art image isn't on https maybe
if someone have a idea
thank you

Hello, thank you for sharing wonderful player.

But I'm having issue not showing meta data at all (now playing and previous ones). I can hear my stream so url setting should be fine. How to solve this?

I'm using shoutcast v2. I don't get both api keys yet. My stream url is http://freebird.ddns.net:8050
AAC+ 64k
player url : http://www.freebirdradio.net/64kplayer/

Thank you.

Olá amigo primeiramente muito obrigado por compartilhar seu conhecimento. Parabéns pelo script.

Ele caiu como uma luva para meu projeto Android com webservice e estou utilizando seu player como home na web.

Amigo a minha dúvida seria a seguinte mesmo usando uma url válida a capa do álbum nome do artista e música não é exibido nem mesmo a letra. Como é recepcionado o nome da música? Lembrando que já criei a chave de api do vagalume mas não mostra a letra, em qualquer url que tenha testado somente na url de stream que disponibilizou no exemplo.

Olá, parabéns pelo excelente trabalho.

O Player não esta mostrando a capa e nome da musica atual ou recentes:

Everything worked fine until a few hours ago.
Now the player has been blocked by CORS.
Not only on my site, but also on the @FabioTech site which was working fine: https://fabiotech.github.io/radio/

I Once Issued A Problem About This And What I've figured out is,

You Get Null Values When You Have A Single Stream. Running On Icecast Or Shoutcast.

Any Way To Fix This? Thanks

DEMO : https://boxradio.net/player/zeno/
Source Code : https://boxradio.net/player/zeno.zip

to set up your station for it edit the script.js file with your credentials
you will see a var named 'zenoid' and replace it with your stream link mount example 'cfqla0proqwtv' --> this can
be found here https://stream.zeno.fm/cfqla0proqwtv
and change the rest of the info to fit your needs, next edit the style.css and replace urls that starts with https://ucarecdn.com/ to your station logo.

Improvements.
Artwork Finder Built In House. Uses Both Deezer & Itunes API.
Artwork API Endpoint : https://api.streamafrica.net/search.php?query=song-title
No PHP Files to host so you can use netlify, vercel or any other serverless hosting services.

I have cloned the project again, I have configured my shoutcast v2 radio and now it does not play anything.
The new error refers to CORB.

From what I read in the link shown in the chrome console: https://www.chromestatus.com/feature/5629709824032768
Cross-Origin Read Blocking (CORB) is an algorithm that can identify and block dubious cross-origin resource loads in web browsers before they reach the web page. CORB reduces the risk of leaking sensitive data by keeping it further from cross-origin web pages. In most browsers, it keeps such data out of untrusted script execution contexts. In browsers with Site Isolation, it can keep such data out of untrusted renderer processes entirely, helping even against side channel attacks like Spectre.

sometimes this error is displayed when trying to access the api. You can play the audio even if the script cannot access the api in the event of an http request error. Because the ip and port data are passed to the player normally

Hello
i'm really happy to have found this player
i just found out about it and the original script ain't avaible to download
i found it in one off the issue thread
then i found couples files been edited the config.js and the script.js
i did a remix of all those info i found i added it to 2 differents server

the 1st is regular http without cURL
http://dirty.networkmechanics.co.uk/masterog
on this one everything work beside the refresh ervery couples seconds
making look on shoutcast like multiple listeners

2nd https with cURL
https://syndicatedhiphop.tk/masterog
nothing work but for this one i think it come from my settings on my apache maybe

but if i could make the one working so far stop to refresh every second be great

thank you

Hi

I have installed shoutcast but I am unable to get this player to work, can listen to the stream though.
Link: http://172.105.48.178/play.html

Thank You

There are error in Vagalume API. They dont work anymore ?

(https://prnt.sc/19fx1h7)

Good Morning,
First of all, thank you for this fantastic player. I have been using it for more than a year and it is the best I have had, both in appearance and function.
I would like to know if there is a possibility to change the iTunes cover search engine and to look for the cover in my own folder uploaded to the server. The problem is that the album that is playing is not always well displayed. In this way, it would show the cover that I have saved in that folder.
I have been doing different tests, but not being a programmer I have not been able to achieve it.
Thank you so much for everything.

Buenos días,
Primero darte las gracias por este reproductor fantástico. Llevo más de un año usándolo y es el mejor que he tenido, tanto en apariencia como funcional.
Me gustaría saber si hay posibilidad de cambiar el buscador de carátulas de Itunes y que busque la carátula en mi propia carpeta subida al servidor. El problema es que no siempre se muestra bien la carátula que está sonando. De esta forma, mostraría la caratula que yo he guardado en esa carpeta.
He estado haciendo diferentes pruebas, pero al no ser programador no he sido capaz de conseguirlo.
Muchas gracias por todo.

Uploaded It On my cyberpanel powered bt litespeed web server.

index html works well but api get metadata hardly works, all i get it null values

Any suggestion for work with icecast server?
Metadata and album art not working.

Fico feliz em ver devs trabalhando nesse meio de radio muito bom o projeto :)

Se não achar ruim postei seu link em um forum para o pessoal acompanhar

This only happens with some songs (not all) and I don't understand why.

Access to XMLHttpRequest at 'https://itunes.apple.com/search?term=Adrian%20Gurvitz%20Classic&media=music&limit=1' from origin 'https://xxx.tk' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://www.classica.radiofandango.com.br' that is not equal to the supplied origin.

(*)FIXED:
To all those who have this problem, I have solved it by cleaning all the browser data (cookies, navigation, etc ...) in an advanced way.
In the settings / privacy menu, choosing time interval: All the time.

Suppose the song name contains the character "-".
Example: D.OZi - Ganas de vivir (feat. Ken-Y)

Separating the artist from the song name results:
Artist: D.OZi
Song: Ganas de vivir (feat. Ken

I have fixed it by modifying 3 lines of api.php.

Original code:
$nextSongName = (isset($content[2])) ? explode('-', $content[2]) : '';
// Separate artist from song
$songData = explode('-', $playedSong);
// Separate artist from song
$currentSong = explode('-', $playingNow);

Modified code:
$nextSongName = (isset($content[2])) ? explode('-', $content[2], 2) : '';
// Separate artist from song
$songData = explode('-', $playedSong, 2);
// Separate artist from song
$currentSong = explode('-', $playingNow, 2);

In this way explode divides string only at the first occurrence of the character "-".

Primeiro, quero parabenizar pelo grande player. Tenho vários player que usam o Itunes como referencia para as capas mais nenhum acontece esse problema que esse acontece, várias vezes acontece dele não trocar a imagem ficando a imagem do cantor anterior e só atualizando depois. Em anexo tem um print do que estou me referindo.

First, I want to congratulate the great player. I have several players that use Itunes as a reference for the covers, but none of this problem happens, this happens, several times it happens that he does not change the image, getting the image of the previous singer and only updating later. Attached is a print of what I am referring to.

Hi!

I have installed and configured this on my webhost, the sound is on but the information & covers are off. How to solve this?

I have both Shoutcast and Icecast servers.

Thank you!

I noticed that today the streaming in Shoutcast is no longer working with the functions that capture cover, artist and song name.

Capa e informações do streaming não funcionam (Shoutcast)

Olá Guilherme!
Notei que hoje o streaming via Shoutcast não está mais funcionando as funções que capturam capa, artista e nome da música.

Obrigado pela atenção :)

Hello,
I have a problem with shoutcast nothing is displayed so I test the modifes that juanamm said but impossible I pence that it comes from the api.php

here is the test url: https://morning.servheberge.fr/player/

The script works great, but a number of my album covers aren't showing up as they aren't in the database or don't match the naming structure and some of the artist/song titles are off.

In Centova Cast I have the proper titles and album covers linked for every single item and its available in both the XML and JSON feeds for my stream (data -> item -> track -> imageurl).

Is there a way to pull that node for the background/album cover instead of the iTunes query?

Hi,
thank you for the player! It's awesome! I have configured the player and working fine with other browsers, but not with Safari. No meta data from shoutcast and play button doesn't respond. Any ideas, please?
Thank you in advance

Currently all configuration must be done within the script.js file. To make things easier and also allow to change HTML contents like meta-tags via config, it would be cool, to have all configuration at the same place for both PHP and JavaScript.

In the end, I want to be able to update my running player installation using the recent git version without any manual changes to the code. Just keeping my local configuration file and maybe the station logo.

Hi,

I think i have tried everything now. Shoutcast server up and running.

Html5 player can see what song is playing and also get the album art. But it keep saying Error on communicate to server everytime i press the Play button. I get no sound at all. i have tried in config to set both http and with https. With ip, localhost and 127.0.0.1, domainname.. no success

Both tried it locally and on external server.

PHP 7.3.19-1~deb10u1
curl 7.64.0-4+deb10u1 amd64

Anyone have a clue?

Hello and thank you so much for your work.
I use a old version of your work and it works ok on my Working Test

A few week ago I download the last version and try it... but only the sound is playing on my Not Working Test

I use the same configuration data in both.

I notice in the Second version it only recognize my stream if I finish with "http://mystream:port/stream"

I'm not good in scripting/programing but there is something different in the .js config files eg:

• Old version (it works):
  // URL of SHOUTCast streaming without / on the final, eg: http://streaming.com:8080
  const URL_STREAMING = "http://mystream:port";
  you end with --> ;
• New version (don't work):
  // URL of streaming without / on the final, eg: http://streaming.com:8080
  'url_streaming': 'http://mystream:port/stream',
  you end with --> ,

Thank you
Talvez na próxima te possa explicar em Português se quiseres.
:-)

Hello there,
Cover art and song name not showing when try to play stream mounted on https://directory.shoutcast.com/ or http://dir.xiph.org/
there error in api.php when try to parse for example https://streamingv2.shoutcast.com/status-json.xsl?mount=/example

I just stumbled upon this pretty neat piece of software and found it quite cool!
Unfortunately I'm currently running our radio stream using an Icecast Server, so I had to do several adjustments to the original code in order to also support Icecast.

What I got running:

• Icecast audio stream
• Current Song details
• Song history (with local file cache)

As soon as I got time, I'll try to implement the Icecast support as a simple config switch and do a pull request.