Interaction PHP - JS

**nicolas92c** · 24/01/2015, 22h52

Bonjour,

J'ai un problème pour faire fonctionner un code sous JS (PS; je suis novice

)

J'ai un player audio qui lit un flux streaming à partir du fichier stream.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?PHP 
$stream = ($_GET["stream"]);
readfile($stream);
?>

Sur ma page, un lien JS doit permettre d'enregistrer la variable stream dans stream.php pour que le player lise le flux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html >
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript">
function request() {
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
		}
	};
	xhr.open("GET", "http://stream.php?stream="http://xxxxx.mp3",true);
	xhr.send(null);
}
 
</script>
<input type="button" onclick="request();" value="Exécuter" />
</html>

Mais quand je clique sur le bouton "executer" rien ne se passe..

Quelqu'un aurait une solution ?

Merci

**NoSmoking** · 24/01/2015, 22h59

Bonjour,

xhr.open("GET", "http://stream.php?stream="http://xxxxx.mp3",true);

le mauvais placement des guillemets est normal !?!

**nicolas92c** · 25/01/2015, 11h12

merci pour le retour.

Il s'agit d'une erreur de frappe voici la bonne ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.open("GET", "stream.php?stream="http://xxxxx.mp3"",true);

Mais rien.. En fait je souhaiterais que la variable stream soit enregistrée dans le fichier stream.php

Je ne sais pas si c'est la bonne façon de faire..
merci

**sekaijin** · 25/01/2015, 11h29

T'es sur il n'y a rien qui te choque dans la coloration syntaxique ?

Si l'analyse syntaxique se trompe et produit une coloration incorrecte,
comment l'interprète qui utilise lui aussi un analyseur syntaxique peut il correctement traduite ton code ?

A+JYT

**tdutrion** · 25/01/2015, 11h29

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.open("GET", "stream.php?stream="http://xxxxx.mp3"",true);

Les guillemets sont toujours mal placés, on ne mets pas de guillemets dans une url...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.open("GET", "stream.php?stream=http://xxxxx.mp3", true);

**lysandro** · 25/01/2015, 11h42

Comme le souligne sekaijin, tu devrais avoir des erreurs dans la console de ton navigateur (F12?).

En JS, tu as deux possibilités (en fait quatre, tu peux aussi délimiter une chaine avec des guillements simples) pour écrire des guillements dans une chaine de caractères :

soit ta chaine est délimitée par des guillemets doubles, auquel cas les guillements à l'intérieur doivent être échappés par un anti-slash '\'
var chaine = "ma \"chaine\" avec des \"guillemets\"";
soit tu utilises à la place des guillemets simples
var chaine = "ma 'chaine' avec des 'guillemets'";

Mais là en l'occurence, c'est Théocrite qui a raison.

Par contre, si je comprends ce que tu fais, tu lis le contenu du fichier mp3 que tu envois à ton navigateur au travers de ta requête XMLHttpRequest. Pour lire un flux en streaming, on a généralement besoin d'un "player", et c'est au "player" que tu passes l'url du fichier. Pas le contenu.
En plus le contenu du fichier d'un flux est en "binaire" (par opposition à "texte") et pour le transmettre correctement il faudrait l'encoder en base64 par exemple (donc le transformer en "texte").

**nicolas92c** · 25/01/2015, 12h23

OK merci pour ces détails, j'ai bien corrigé mais je pense avoir un pb de fond.
En fait voici des précision sur mon projet :

J'ai un player unique qui s'affiche bien et dont le code est ci-dessous. Le flux est enreistré dans stream.php. (Si je rentre une url en dur, ca fonctionne) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html>
<script type="text/javascript" src="player_config.js"></script>
<script type="text/javascript">
MRP.insert({
'url':'stream.php',
'codec':'mp3',
'skin':'player_config.xml',
});
</script>
</html>

Sur la même page HTML, plusieurs liens. En cliquant sur un lien, un nouveau flux streaming doit être envoyé au player. Voici le code du lien JS (ici bouton) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html >
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript">
function request() {
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
		}
	};
	xhr.open("GET", "stream.php?stream='http://xxxxxxxx.mp3'",true);
	xhr.send(null);
}
 
</script>
<input type="button" onclick="request();" value="Exécuter" />
</html>

Et ci dessous le code php lu par la ligne 'url' du player :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?PHP 
$stream = $_GET["stream"];
readfile($stream);
?>

Voyez vous une erreur de construction ?
Merci !

**lysandro** · 25/01/2015, 13h04

Envoyé par Théocrite

on ne mets pas de guillemets dans une url...

A part ça, tu utilises apparemment ta page PHP comme fournisseur de flux ... En principe, ce n'est pas à toi de lire le flux mais au player. Tu devrais passer au player, s'il le supporte, l'url du fichier que lui ira lire. Ce que tu fais au travers du chargement initial avec MRP.insert({ "url":"stream.php", ... donc pour changer de flux, suivant l'api du player, tu devras lui indiquer l'url du flux et non son contenu.

**nicolas92c** · 25/01/2015, 13h31

lysandro,
Qu'entends tu par "indiquer l'url du flux et non son contenu" ?

**lysandro** · 25/01/2015, 14h54

L'url du flux c'est l'url du fichier que tu veux que le player lise. Dans ton cas stream.php?stream=http://xxxxxx.mp3.

Dans ton code, tu vas charger toi-même cette url avec ta requête xmlhttp et du coup tu récupères le contenu du flux (du fichier) que tu essayes de passer au player, j'imagine, au travers de callback(xhr.responseText).

Je pense, mais c'est une hypothèse (je n'ai pas trouvé l'api du muse radio player), qu'il faut lui donner seulement l'url, c'est lui qui va s'occuper du chargement et de l'interprétation du flux (du fichier).

Tu ne devrais pas avoir besoin de ta function request() mais seulement d'un truc du genre MRP.setStreamURL("stream.php?stream=http://xxxxxx.mp3"). C'est bidon, c'est juste pour donner une idée. Ce n'est même pas sûr que le player en question supporte des changements de flux.

**nicolas92c** · 25/01/2015, 15h47

En fait, le player arrive à interpreter le fichier stream.php car en mettant en dur une url streaming, le player se lance bien. Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?PHP 
$stream = 'http://xxxx.mp3';
readfile($stream);
?>

Par ailleurs, en modifiant le fichier stream.php avec une autre url, le player se met à jour automatiquement car il y a un rafraichissement automatique.

Du coup je me demande si le code JS est bon..

**sekaijin** · 25/01/2015, 17h32

c'est logique qui ne lise rien
tu ne donne pas le nom du stream à ton player

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
MRP.insert({
'url':'stream.php', //ICI il n'y a pas de stream juste un php qui ne sait pas quoi lire
'codec':'mp3',
'skin':'player_config.xml',
});

A+JYT

**nicolas92c** · 25/01/2015, 18h03

sekaijin,

Dans mon message précédent, je confirme que le player arrive à interpréter le fichier stream.php.

Le tout est que je souhaite que le flux renseigné dans ce fichier stream.php soit une variable et qu'elle change en fonction du lien sur lequel clique l'utilisateur.

**sekaijin** · 25/01/2015, 18h36

Je crois que tu ne comprends pas ce qu'on te dis

il ne s'agit pas de savoir si oui ou non ton fichier php sait lire le steam ou si ton player sais accéder à ton fichier php

il s'agit du fait qu'à aucun moment tu ne donne à ton player le lien du flux.
le player ouvre le lien que tu lui donne et rien d'autre.

tout ça n' arien a voir avec des variables du code ou quoi que ce soit
pour que le player ouvre un flux il FAUT lui donner le lien du flux et rien d'autre.

toit tu donne un lien vers un php qui est conçu pour avoir le nom du flux en paramètre dans l'url
et dans ton player tu donnes l'url de ton php sans indiquer le nom du flux

le php ne peux donc pas charger le flux
il faut être cohérent dans ce que tu fais.

A+JYT

**nicolas92c** · 25/01/2015, 18h39

ok, je vois le raisonnement..
Quelle serait la solution du coup ? vers quoi m'orienter ?

**lysandro** · 25/01/2015, 19h24

Tu peux tenter ça pour changer le flux en cours de lecture

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

MRP.setUrl("stream.php?stream=http://xxxxxx.mp3");

par exemple sur un lien : <a href="#" onclick="MRP.setUrl('stream.php?stream=http://xxxxxx.mp3'); return false;">xxxxxx.mp3</a>.

Mais sans garantie, je n'arrive pas à mettre la main sur une version lisible de MRP.js. C'est ce fichier qui contient l'api (les méthodes/functions disponibles sur le player : MRP.play(), MRP.stop(), etc)

Le code provient du changelog : https://github.com/fbricker/muses/bl.../CHANGELOG.txt

**nicolas92c** · 25/01/2015, 21h44

Merci lysandro, on avance beaucoup mais pas completement

J'ai mis 2 liens de ce type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<html >
<script type="text/javascript">
MRP.setUrl("stream.php?stream=http://stream1.mp3");
</script>
<a href="#" onclick="MRP.setUrl('stream.php?stream=http://stream1.mp3'); return false;">lien1</a>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<html >
<script type="text/javascript">
MRP.setUrl("stream.php?stream=http://stream2.mp3");
</script>
<a href="#" onclick="MRP.setUrl('stream.php?stream=http://stream2.mp3'); return false;">lien2</a>
</html>

Lorsque je clique sur le lien1, le player se lance bien avec le bon streaming. Par contre, lorsque je clique sur le lien2 quand le player diffuse le stream1, rien ne se passe, il continue à diffuser le stream1.

Ca pourrait venir de quoi ?

**NoSmoking** · 25/01/2015, 21h52

As tu essayé de faire un MRP.stop() avant de relancer la suivante ?

**nicolas92c** · 25/01/2015, 22h07

oui j'ai déjà testé de placer un MRP.stop() avant le MRP.setUrl dans les 2 cas mais c'est la même chose..

**nicolas92c** · 26/01/2015, 21h19

Bonjour,

J'ai finalement completé le code de lysandro et ca fonctionne

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<html >
<a href="#" onclick="MRP.stop(); MRP.setUrl('stream.php?stream=http://xxxxxx.mp3'); MRP.play();">mp3</a>
</html>

Merci à tous pour votre implication !

Interaction PHP - JS

JavaScript

Discussions similaires

Partager

Partager