[Résolu] Pseudo-Streaming audio (<object>)

[GritNatZ]

J'ai pas de couple IE / WMP sous la main pour tester les mélanges entre <object> et <embed> ... Je vais voir ce que je peux faire avec Firefox...

Merci pour ton aide précieuse.

Je suis arrivé à mes fins pour l'instant.

 

J'ai finalement composé un code cross-browsers

(Opera, FireFox, Netscape, Mozilla, et I.E.)

et le 'streaming' fonctionne.

 

Cependant toute suggestion d'optimisation

ou d'allègement sera la bienvenue

<object
classid = "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
type = "audio/mpeg"
style = "width:400px;height:63px;position:absolute;bottom:20px;left:27px;z-index:30;"
>
 <param name = "URL" value = "<?php echo isset($_GET['tit'])? 'mp3/' . $_GET['tit'] . '.mp3' : ''; ?>" /> 
 <param name = "autoStart" value = "true" />
 <script type = "text/javascript">
	embed_base_str = '<embed id = "player" ';//Creation du code de base pour la balise <embed></embed>
	embed_base_str += 'src = "<?php echo isset($_GET['tit'])? 'mp3/' . $_GET['tit'] . '.mp3' : ''; ?>" ';
	embed_base_str += 'type="application/x-mplayer2" autostart = "1" showcontrols = "1"'; 
	embed_base_str += 'ShowStatusBar = "1" enabled = "true" ';
	embed_base_str += 'style = "width:400px;height:65px;position:absolute;z-index:30;';

	if(nav != 'ie' && nav != 'ope'){//test le nom du navigateur
	 	embed_end_str = 'bottom:0px;left:0px;" ></embed>';
		//embed_end_str = fin du code pour la balise <embed></embed> selon le nom du navigateur
	 	document.write(embed_base_str + embed_end_str);
 }else{
	 	embed_end_str = 'bottom:20px;left:27px;" ></embed>';
	 	document.write(embed_base_str + embed_end_str);
 }
 </script>

 	</object>

 

Pour tester en live, c'est ici

Seuls les trois premiers titres sont dispo.

Le site est en construction

Modifié le 5 novembre 2005 par GritNatZ

[KewlCat]

Pour info, la balise <embed> est dépréciée

(juste pour le cas où tu aurais voulu avoir une page qui passe au validateur W3C)

 

Autre truc, j'ai effectivement l'affichage d'une zone de texte toute vide (vachement utile !) sous IE alors qu'avec Mozilla et Firefox ça marche nickel sous Windows et sous Linux. Ma page de tests est là, s'il y en a qui se sentent l'envie d'essayer...

<object width="640" height="480" data="audio.mp3" type="audio/mpeg">	   
  <param name="controller" value="true" />								  
</object>

Je suis content que tu aies trouvé une solution qui fonctionne, mais c'est vrai que ça m'énerve un peu de pas avoir trouvé la solution qui soit valide W3C et qui fonctionne chez tout le monde... (surtout que ton bout de JavaScript est un peu exagéré à mon avis puisque tu peux déterminer côté serveur le navigateur et inclure la balise <embed> dans le document, mais bon... si ça marche...)

C'est comme ça ! ...

[GritNatZ]

1- Pour info, la balise <embed> est dépréciée

(juste pour le cas où tu aurais voulu avoir une page qui passe au validateur W3C)

...

2- ça m'énerve un peu de pas avoir trouvé la solution qui soit valide W3C et qui fonctionne chez tout le monde... (surtout que ton bout de JavaScript est un peu exagéré à mon avis, mais bon... si ça marche...)

C'est comme ça ! ...

 

1- Merci pour l'info, j'aimerais effectivement

composer du code valide W3C.

Je ne savais pas que cette balise était dépréciée.

 

2- Si tu veux je peux enlever la mention [Résolu] ;

je vais le faire d'ailleurs.

Et pour le Javascript, c'est tout ce que j'ai trouvé

dans l'urgence et pour arriver à mes fins :

Pouvoir diffuser des extraits écoutables pendant leur téléchargement.

 

Parcontre, chez moi, je n'ai aucun problème d'affichage

d'une zone texte vide sous I.E. ; l'affichage est propre

avec une barre de status

 

J'ai essayé ton lien.

Sur Mozilla, il ne se passe rien.

Sur Opera, FireFox et I.E., le fichier se télécharge

mais ne joue pas pendant le même temps.

Sur Netscape : Additional plugins are required to display all the media on this page.

 

Je n'ai pas attendu la fin du téléchargement

je ne sais donc pas si le fichier s'ouvre au final.

[KewlCat]

Ton bout de JavaScript, tout ce qu'il fait, c'est changer style.bottom et style.left à 0,0 (respectivement 20,27) quand le navigateur est autre que IE ou Opera.

Au pire (en restant en JavaScript) tu pourrais procéder de cette façon :

<embed id = "player" src = "<?php echo isset($_GET['tit'])? 'mp3/' . $_GET['tit'] . '.mp3' : ''; ?>" 
type="application/x-mplayer2" autostart = "1" showcontrols = "1"
ShowStatusBar="1" enabled="true"
style="{ width:400px; height:65px; position:absolute; z-index:30; bottom:0px; left:0px; }">
</embed>
<script type="text/JavaScript"> // <![CDATA[
 if(nav == 'ie' || nav == 'ope'){
var player = document.getElementById("player");
player.style.bottom = "20px";
player.style.left = "27px";
 }
 // ]]>
</script>

(Oui, je hais les document.write() par-dessus tout)

 

Sur mon site, sous Windows j'ai le plugin Quicktime qui prend la main et qui me permet de lire le fichier au fur et à mesure, et sous Linux c'est mplayer qui le lit.

Evidemment, comme je suis en local, ça fausse les calculs :-/

[GritNatZ]

J'ai déja essayé quelque chose de similaire

à ton code, en DHTML, mais ça ne marche pas.

 

L'objet player n'a pas de propriétes

me dit la console javascript.

 

Pour l'instant il n'y que mon usine à gaz

qui réponde à mes criètres en termes de

fonctionnalité et d'affichage.

 

Pour quoi c'est faire les

// <![CDATA[

...

// ]]>

Au cas ou le navigateur ne supporte pas le JavaScript ??

Modifié le 5 novembre 2005 par GritNatZ

[KewlCat]

C'est une balise XML qui fait en sorte que le contenu de la balise <script> ne soit pas parsé par erreur (je me suis déjà retrouvé devant une erreur "balise <a> non fermé" alors que je faisais un bête "if (b < a) { ..." !). C'est beaucoup plus propre que les <!-- et --> qu'on voit parfois...

De la sorte, un navigateur X(HT)ML ne voit qu'une balise <script>, un TextNode contenant " // ", une balise CDATA (donc des données propres au script, dans lesquelles il ne va pas fourrer son nez), et une balise de fin de script !

Evidemment, ce genre de blague dépend de si tu as donné un DOCTYPE à ta page Web ou non... (ainsi que de la fragilité du parseur HTML du navigateur...)

 

C'est bizarre que la console t'annonce que l'objet "player" n'a pas de propriétés puisque c'est l'id qu'on donne à notre objet <embed>... Est-ce que tu as un autre élément sur la page qui porterait cet id ?

[GritNatZ]

1- C'est une balise XML qui fait en sorte que le contenu de la balise <script> ne soit pas parsé par erreur...

 

2- C'est bizarre que la console t'annonce que l'objet "player" n'a pas de propriétés puisque c'est l'id qu'on donne à notre objet <embed>... Est-ce que tu as un autre élément sur la page qui porterait cet id ?

 

1- Merci pour l'explication

 

2- Non, j'utilise toujours des id uniques (pas de doublons)

pour eviter les conflits avec javascript par exemple

et parceque un id doit quoiqu'il en soit être unique.

 

Il m'a même été impossible de positionner les éléments

<OBJECT> et <EMBED> par le biais d'une feuille de style.

Il n'y a apparement que l'attribut style qui permette

de positionner précisément ces 2 éléments.

[GritNatZ]

Ton bout de JavaScript, tout ce qu'il fait, c'est changer style.bottom et style.left à 0,0 (respectivement 20,27) quand le navigateur est autre que IE ou Opera.

Au pire (en restant en JavaScript) tu pourrais procéder de cette façon :...

 

Mea culpa

Ton code fonctionne bien

Je crois qu'a force d'essais,

j'ai du oublier de décommenter les lignes

de l'id #player dans ma feuille de style.

Zappés les document.write

 

 

<object
class = "player"
classid = "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
type = "audio/mpeg"
>
<param name = "URL" value = "<?php echo isset($_GET['tit'])? 'mp3/' . $_GET['tit'] . '.mp3' : ''; ?>" /> 
<param name = "autoStart" value = "true" />
<param name = "bufferingTime" value = "5" />

<embed id = "player" class = "player"
	src = "<?php echo isset($_GET['tit'])? 'mp3/' . $_GET['tit'] . '.mp3' : ''; ?>"
	type="application/x-mplayer2" 
	autostart = "1" 
	showcontrols = "1"
	ShowStatusBar = "1" 
>
</embed>

<script type = "text/javascript">
	var player = document.getElementById('player');
	if (nav != 'ope' && nav != 'ie'){
		player.style.bottom = '0px';
		player.style.left = '0px';
	}
 </script>

</object>

Avec mes excuses

 

Sinon, j'ai un soucis avec Mozilla.

La version affchée du media player

est la version 6.4.09.1130 (media player classic)

alors que sous Opera, FireFox, Netscape et I.E.,

c'est la version 9.00.00.3250.

Et de plus la lecture des morceaux

sous Mozilla ne se fait pas en 'streaming'

(le morceau est téléchargé totalement avant lecture).

Est-ce dû à la version du player affichée par Mozilla ?

Modifié le 7 novembre 2005 par GritNatZ

[KewlCat]

Excuses acceptées

 

Apparemment ton problème vient du fait que tu as les plugins WMP pour IE et Opéra, et les plugins MPC pour Mozilla...

 

Concernant le comportement des plugins MPC (lecture pendant/après téléchargement), je ne saurais te dire...

[GritNatZ]

Apparemment ton problème vient du fait que tu as les plugins WMP pour IE et Opéra, et les plugins MPC pour Mozilla...

 

Pourtant l'attribut classid ne définit-il

pas la version du plugin à utiliser ?

 

Ce qui est étonnant, c'est que FireFox

qui est issus de la technologie Mozilla

utilise le plugin WMP ainsi que Netscape.