Machine à musique
Mes clients sont des artistes utilisant spip. Ils voulaient un moyen simple de présenter leurs extraits sonores. Dans cette contribution “nous” représente eux et moi.
Le format des extraits est .mp3 , ils sont joints comme documents à un article.
Cet article produit le jukebox est un article “normal” le jukebox n’en utilise que le chapeau , le post-scriptum et les documents mp3 qui lui sont liés.
Objectifs
La simplicité. Bien sûr, spip permet de joindre des mp3, leur lecture n’est alors pas compliquée … si vous avez ce qu’il faut. Nous le voulons en un seul click.
La duplicité Ce click ne doit pas interrompre la “lecture” du site mais bien l’accompagner, donc oui, honte sur nous, nous voulons l’ouvrir dans une autre (unique, petite) fenêtre
La triplicité Ceci doit marcher pour tout un chacun. Les navigateurs n’ayant pas tous tout, c’est pourquoi nous avons finalement aimé cette solution Flash © Macromedia
XSPF Web Music Player (Flash) – Plays MP3 on your website
Music Player
Vraiement très bien fait.
Le truc n’a besoin que de la liste des mp3 en xspf cf. XSPF ou en mode single, seulement la référence du mp3.
3 formats sont disponibles pour le player : button (bouton), slim (mince, avec des controles) et extended (avec une liste et tout)
Cerise pour le gateau, on peut associer une image à chaque mp3 dans ce mode étendu
Dans spip
C’est du 1.8.3 Nous avons utilisé du javascript pour ouvrir le “popup’ , mais ça n’est pas nécessaire, on peut faire dans la page pareil sans script :
function popup(url, titre, hauteur, largeur) {
var fenetre = open(url, titre,
“top=” + Math.round((screen.availHeight-hauteur)/2) +
“,left=” + Math.round((screen.availWidth-largeur)/2) +
“,width=” + largeur + “,height=” + hauteur +
“,toolbar=0,location=0,directories=0,status=0,\
scrollbars=0,copyhistory=0,menuBar=0”);
if (fenetre.innerWidth) {
fenetre.innerWidth=largeur;
fenetre.innerHeight=hauteur;
} else {
fenetre.resizeTo(largeur,hauteur);
}
fenetre.focus();
return fenetre;
}
function jukebox(id, hauteur, largeur) {
if (!id) {
id = window.location.search.match(/id_article=(\d+)/);
if (!id) {
return;
}
id = parseInt(id[1]);
}
if (!largeur) {
largeur = 360;
}
if (!hauteur) {
hauteur = 240;
}
var fenjuk = popup(‘jukebox.php3?id_article=’ + id + ‘&largeur=’ + largeur,
“jukebox”, hauteur, largeur);
}
Nous référons Jukebox.html :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<BOUCLE_article_principal(ARTICLES) {id_article}>
<BOUCLE_morceaux(DOCUMENTS){id_article}{mode=document}{extension==mp3$}{0,1}>
<html lang=”#LANG”>
<head>
<title>[#NOM_SITE_SPIP] [(#_article_principal:TITRE|textebrut)]</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=#CHARSET”>
<link rel=”shortcut icon” href=”squelette-sarka-spip/rblack.ico”>
<style type=”text/css”>
.chapo {
color: #000000;
margin: 0px 10px 0px 10px;
font-weight: bold;
}
.post-scriptum {
color: #000000;
margin: 0px 10px 0px 10px;
padding-top: 10px;
font-size: 100%;
border-top: none;
}
.corps {
margin: auto;
}
.player object {
display: block;
margin: 0 auto;
}
body {
background: silver;
}
</style>
<script type=”text/javascript” src=”squelette-sarka-spip/toggg.js”></script>
</head><body dir=”#LANG_DIR”>
<div>
[<div>(#CHAPO|liens_retours|liens_ouvrants)</div>]
<div>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″
codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0″
width=”<?php echo [(#ENV{largeur})] – 20; ?>” height=”153″>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie”
value=”[(#URL_SITE_SPIP)]/XSPF/xspf_player.swf?autoload=true&playlist_url=[(#URL_SITE_SPIP|urlencode)]%2Fxspf.php3%3Fid_article%3D[(#ENV{id_article})]” />
<param name=”quality” value=”high” />
<embed src=”[(#URL_SITE_SPIP)]/XSPF/xspf_player.swf?autoload=true&playlist_url=[(#URL_SITE_SPIP|urlencode)]%2Fxspf.php3%3Fid_article%3D[(#ENV{id_article})]”
name=”xspf_player” allowscriptaccess=”sameDomain” type=”application/x-shockwave-flash”
quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer”
align=”center” width=”<?php echo [(#ENV{largeur})] – 20; ?>” height=”153″ />
</object>
</div>[<div>(#PS|liens_retours|liens_ouvrants)</div>]
</div></body>
</html>
</BOUCLE_morceaux>
Aucun extrait sonore !
<//B_morceaux>
</BOUCLE_article_principal><:aucun_article:>
<//B_article_principal>
qui appelle XSPF
Pas sur que ça soit optimum tout ça.
Entre autres nous avons utilisé le chapeau et le post-scriptum pour le jukebox associé à un article.
nous n’utilisons que le texte dans l’article lui-même.
à plus tard 🙂 …