Nouveau lecteur mp3
Terminées Verrouilléee En cours

Un nouveau lecteur mp3 est intégré au site. Le but principal était de pouvoir continuer à naviguer sans interrompre la lecture. Pour ce faire j'ai utiliser les iframes. Le site principal est chargé dans la frame "mainframe" et les lecteur dans la frame "player".
Plusieurs problèmes à résoudre :
1 - Charger les données relatives au mp3 à jouer dans le player
Pour n'avoir qu'un fichier à modifier lors de l'ajout d'un mix j'ai créé un fichier "listedesmix.php" que j'importe dans la page player.php

//importation de la table des mix
include 'listedesmix.php';

cette page liste des mix est une table (array) que je génère avec une page Excel.

array("nommix1","nomfichier1.mp3","nomimage1.jpg","Artiste","Titre","chemin article1","Catégorie1","Date","réserve1","réserve2"),
"nommix2"=>array("nommix2","nomfichier2.mp3","nomimage2.jpg","Artiste","Titre","chemin article2","Catégorie2","Date","réserve1","réserve2"),
...
);
?>

je récupère ensuite les variables par rapport à $track, qui est mon nom du mix (= au nom dans l'article joomla):

$track = $mix[$track][0];
$file = $mix[$track][1];
$pochette = $mix[$track][2];
$artist = $mix[$track][3];
$title = $mix[$track][4];
$article = $mix[$track][5];
$category = $mix[$track][6];
$date = $mix[$track][7];

Ces variables me servent ensuite pour "construire le lecteur".
Si la variable track n'est pas trouvée dans la table on procède alors à l'ouverture du dernier mix en date et la création d'un message d'erreur:

if(isset($mix[$track][0]) ){
	// le mix est trouvé dans la table tout va bien
}else{
	$errormessage = 'Mix <'.$track.'> pas trouvé dans la table; ouverture du dernier en date: ';
	//recherche du dernier mix da la table
	$track = array_pop(array_keys($mix));
	$errormessage = $errormessage.$mix[$track][0];
}



2 - Charger le player uniquement dans un frame
La page principale du player est /player.index.php. Cette page contient les 2 frames (principal en haut et player en bas). Mais si on est sur une page musique /site/music/... alors il faut ouvrir cette même page dans la frame principal.
Pour ce faire le lien "play" dans mes articles est modifié en fonction du titre de la page en javascript avec onclick="javascript:LinkDJMoRoPlayer()" :

function LinkDJMoRoPlayer(){
	var url = document.location.href
// = extraction du nom mix dans le chemin de l'article
	var track = url.substr(url.indexOf('-', url.lastIndexOf('/'))+1)  //
    if (top == self){	//test si on n'est pas dans un iframe
		document.getElementById('playerlink').target = "_top";
		document.getElementById('playerlink').href = "http://www.djmoro.com/player/index.php?track="+track;
	}else{
		document.getElementById('playerlink').target = "player";
		document.getElementById('playerlink').href = "http://www.djmoro.com/player/player.php?track="+track;
	}
	}
	

Si on est dans une frame on ouvre player.php?track=nomdutrack dans le target "player" et sinon ouvre index.php?track=nomdutrack avec target "top" (= fenêtre principale).
Pour ouvrir la page de départ dans la frame principal dans index.php je récupère l'adresse de la page appelante.


$referer = $_SERVER['HTTP_REFERER'];
$home = 'djmoro.com';
if (strpos($referer, $home)) {
//ouverture depuis djmoro.com/site donc réutiliser l'adresse source pour l'afficher dans le frame
$url = $referer;
//recherche du nom de l'article musique dans l'adresse url si la variable player est toujours vide
if (empty($player)){
	// Extraction du texte à partir d'après le premier "-" après le dernier / dans l'url: "abcdefg/yy-categorie/xx-article" donne "article" (même si article contient des "-")
	$player = substr ($url,strpos  ($url,"-", strrpos ($url,"/"))+1); //+1 car substr commence à compter depuis 0
}
}else{
// ouverture de player/index.php depuis ailleurs que djmoro.com -> redefinition du frame principal vers djmoro.com
$url = "http://www.djmoro.com".$principal;
// la variable player doit être définie dans les variables php (index.php?track="xyz") si non elle sera vide
}



donc url sera mon chemin dans la frame principal et player le chemin dans la frame player

3 - Cacher montrer le player pour plus de place sur les petits écrans
Je crée un bouton dans index.php qui cache / montre la div qui contient le frame player:

button id="Bouton"  


Le problème est que si le player est caché et que j'en ouvre un nouveau il faudrait l'afficher... donc dans player.php je vérifie qu'il est visible, sinon je le rends visible:

	if (window.getComputedStyle(parent.document.querySelector('#playerdiv')).display=='none'){ 
	parent.document.querySelector("#playerdiv").style.display="block";
	parent.document.getElementById("Bouton").innerHTML = "Cacher le lecteur";
	parent.document.getElementById("Bouton").style.bottom="130px";
	}

Réponses (2)


  • Yann Anderson Solution acceptée
    Marco t'es LE MAITRE ! ♡
  • Marco Ruggiero Solution acceptée
    Encore qq modifications:
    - lorsque du navigue après l’ouverture du player et tu cliques sur "fermer" récupération de l'adresse courante du frame principal
    
    function closeplayer() {
    document.getElementById('closeplayer').href = parent.document.getElementById("mainframe").contentWindow.location.href;
    }
    

    NB: ce code fonctionne seulement si il s'agit du même domaine entre le parent et le iframe; dans mon cas c'est toujours djmoro.com. Dans le cas contraire la page d'accueil est ouverte.
    - lorsque il y a un ? après le nom de l'article musique (par exemple après avoir voté) -> suppression du ? et de ce qui vient après pour récupérer la variable du mix.
    par exemple 2015-1?abc -> 2015-1
    
    if (strpos($track, '?') !== false) { 
    	$track = substr ($track,0,strpos($track, '?'));}
    
Soyez le premier à répondre à cette discussion.

Statistiques


  • Démarré par Marco Ruggiero
  • lundi 27 mars 2017
  • 128 vues
  • 2 Participants
  • 2 réponses

Participants