De la musique avant toute chose! (jukebox mp3 - player vidéo)

[SilentPliz]

Pardonnez moi si je poste uniquement en français, ici il fait très très chaud ("on dirait le Suuuuud"), cela rend un peu flemmard. 
Je joins tout de même aussi des templates en anglais dans le "pack".

Les templates distribués dans ce ''pack" sont optimisés pour fonctionner préférentiellement avec les versions beta françaises de HFS

Petite contribution estivale de Mars et de moi-même.

Préambule:

En attendant la prochaine beta, si on mettait un petit jukebox mp3, et un lecteur vidéo sur la page web de notre Serveur préféré (version 2.3 beta 242).
Le tout avec listes de lecture semi-dynamiques.

But secret et subliminal:
Si on pousse tous nos haut-parleurs à fond, on réveillera peut-être rejetto de sa sieste romaine. 

Je sais qu'il y a des templates disponibles sur le forum, embarquant d'autres solutions multimédia; mais celle que je vous propose me semble néanmoins digne d'intérêt.

Les lecteurs utilisés sont:

JW FLV Media Player 4.5 pour la video (format FLV, MP4, et certains fichiers h264).
Ce lecteur accepte aussi des formats audio, que nous n'utiliserons pas ici.

http://www.longtailvideo.com/players/jw-flv-player/

Flash XSPF Jukebox pour la lecture audio mp3:

http://blog.lacymorrow.com/projects/xspf-jukebox/

Je joins en fin de post, un pack contenant ces 2 lecteurs, prêts à être installés, mais cela peut être utile de consulter ces sites, pour charger d'autre skins, plugins, ou connaitre les variables utilisables pour d'autre paramétrages.

La particularité de ces lecteurs, est d'accepter le format de Playliste XSPF (xml), ce qui nous sera bien utile ici.
Il s'agit d'un format libre, ce qui est encore mieux!

http://xspf.org/

------------------------------------------------------------------------------------
Maintenant, entrons dans le vif du sujet:

Pour installer le pack multimedia:

1)

- Décompressez l'archive multimedia.zip dans le répertoire de hfs.exe
Vous vous retrouvez avec un répertoire nommé "multimedia", contenant 5 répertoires et 2 fichiers:

enteteplayer.xml et hfs.events

Vous déplacez ces deux fichier pour qu'ils se retrouvent en compagnie de hfs.exe

2)

Dans HFS (en mode Expert):

- vous faites un clic-droit sur la racine du VFS (home) > Ajouter un répertoire depuis le disque

Vous ajouter le répertoire multimedia vous lui donnez comme Propriétés... > Étiquettes > Pas de Journalisation et Cacher
Vous donnez les permissions en Accès pour les utilisateurs de votre choix.

Vous appliquez, puis validez.

- vous faites un clic-droit sur la racine du VFS (home) > propriétés... > Masques > dans le champ Filtre de Fichiers, vous ajoutez:

;playlist*.*

Ce qui par défaut donne une ligne comme ceci:

\index.htm*;default.htm*;playlist*.*

Vous appliquez, puis validez.

3)

Dans Menu Général > Autres Options > Type d'Objets MIME

Vous ajoutez une nouvelle rangée où vous écrivez comme Masque de fichier: *xspf et comme Description MIME: application/xspf+xml

Vous appliquez, puis validez.

4)

Vous chargez un des templates contenu dans le répertoire multimedia\6 templates-3 anglais-3 français_generator_inclus

Vous sauvegardez vos options, ainsi que votre fichier *.VFS

------------------------------------------------------------------------------------

Utilisation pour les playlistes Utilisateurs:

J'ai interdit l'accès des lecteurs aux utilisateurs anonymes.

Donc connectez-vous sur un Compte utilisateur, essayez "d'uploader" des fichiers *.MP3 ou vidéo *.FLV par exemple, dans un répertoire disposant des autorisations en Accès et Envois.
Vous pourrez bien sûr créer d'autres répertoires, si vous voulez par exemple faire une playliste par album.
Utilisez les icônes en haut de page pour la lecture.

A propos des vignettes (thumbnails):

- Convention pour les images dans les répertoires ou vous placez des fichiers audio:

Une seule image par répertoire/Album, nommée: folder.jpg (folder.jpg est un nom réel, ne donnez pas le nom de votre répertoire au fichier image)

- Convention pour les images dans les répertoires ou vous placez des fichiers vidéo:

Plusieurs images par répertoire sont permises, que vous nommez:

le_nom_du_fichier_vidéo.jpg

------------------------------------------------------------------------------------

Utilisation pour les (2) playlistes globales:

Vous pouvez utiliser deux playlistes globales (audio et vidéo), jouables dans une fenêtre ou un onglet séparé de votre navigateur.
Dans un répertoire ou vous avez créé une playliste (longue de préférence), copiez les fichiers suivants que vous y trouverez:

playlistaudio.xml
playlistaudio.xspf

et/ou

playlistvideo.xml
playlistvideo.xspf

Ces fichiers doivent être copiés dans le sous répertoire "playlistes" du répertoire "multimedia" (là où se trouve hfs.exe, rappelez-vous )

Vous pouvez aussi permettre à tous vos utilisateurs de mettre à jour vos deux playlistes globales (audio et vidéo). Il suffit pour cela de créer 2 répertoires autorisés à tous vos utilisateurs, nommés par exemple:

playlist_audio_maj_globale
playlist_video_maj_globale

Vous y déposerez les mêmes fichiers que vous avez déposés dans le répertoire multimedia/playlistes:

playlistaudio.xml et playlistaudio.xspf dans le répertoire playlist_audio_maj_globale

playlistvideo.xml et playlistvideo.xspf dans le répertoire playlist_video_maj_globale

Il est important de signaler à vos utilisateurs que les fichiers doivent être "uploadés" en "vrac" dans ces deux répertoires.
Seuls les fichiers contenus dans ces répertoires actualiseront les playlistes globales.

Seuls les répertoires utilisateurs permettent les listes multiples dans des répertoires séparés.

Facultatif: Vous pouvez masquer les fichiers que contiendront ces deux répertoires, ainsi leur contenu sera invisible, même après un envoi utilisateur. Seuls les lecteurs multimédia seront disponibles aux utilisateurs, et actualisés par leurs envois!
Pour appliquez cette option, faites un clic-droit sur chacun de ces deux répertoires > Propriétés... > Masques et ajoutez dans le champ Filtre de Fichiers, ceci:

\*.mp3;*.aac;*flv;*mp4;*.jpg;*.h264


Obligatoire: Ensuite vous ajoutez à la fin du fichier hfs.events (mettre les lettres de lecteur et les chemins qui correspondent aux vôtres, bien entendu):

{.copy|E:\playlist_audio_maj_globale\playlistaudio.xml|C:\Serveur HFS\multimedia\playlistes\.}
{.copy|E:\playlist_audio_maj_globale\playlistaudio.xspf|C:\Serveur HFS\multimedia\playlistes\.}
{.copy|E:\playlist_video_maj_globale\playlistvideo.xml|C:\Serveur HFS\multimedia\playlistes\.}
{.copy|E:\playlist_video_maj_globale\playlistvideo.xspf|C:\Serveur HFS\multimedia\playlistes\.}

------------------------------------------------------------------------------------

INFO:
VLC permet de générer également des playlistes au format XSPF, mais vous aurez des retouches sur les chemins à faire, avec Notepad++ par exemple.

Ne paniquez pas devant la longueur de ce post, finalement ce n'est pas très compliqué.

Dans le post suivant, je met quelques copies d'écrans, et le code utilisé dans les templates.

------------------------------------------------------------------------------------------
Mise à jour (20 Octobre 2009)
Le lecteur vidéo JW FLV Media Player évolue vers la version 4.6

[SilentPliz]

Le code embarqué dans les templates (les icônes seules changent suivant le template utilisé... toujours cette @$%[# de transparence avec IE !):

Code: [Select]


{.if |{.and|%user%|{.!=|%user%|anonymous.}.}|
<br />
<center>
  {.if|{.filesize|%folder%playlistaudio.xml.}|{:
<a href="javascript:;" onmousedown="toggleDiv('list');"><IMG alt="" src="/multimedia/icones/iTUnes_32x32.png" title="{.!Audio playlist of.} %folder-name% - {.!Show / Hide MP3 Jukebox.}" alt="{.!Audio playlist of.} %folder-name% - {.!Show / Hide MP3 Jukebox.}" /></a>
  {.repeat|1|&nbsp;.}
  :}/if.}
  <a target="_blank" href="/~audio"><IMG alt="" src="/multimedia/icones/Music-Note-32.png" title="{.!Main Audio Playlist.} - {.!Open the MP3 Jukebox in a new window.}" alt="{.!Main Audio Playlist.} - {.!Open the MP3 Jukebox in a new window.}" /></a>
{.repeat|3|&nbsp;.}
  {.if|{.filesize|%folder%playlistvideo.xml.}|{:
<a href="javascript:;" onmousedown="toggleDiv('video');"><IMG alt="" src="/multimedia/icones/My Computer_32x32.png" title="{.!Video playlist of.} %folder-name% - {.!Show / Hide Video Player.}" alt="{.!Video playlist of.} %folder-name% - {.!Show / Hide Video Player.}" /></a>
  :}/if.}
  {.repeat|1|&nbsp;.}
<a target="_blank" href="/~video"><IMG alt="" src="/multimedia/icones/Movies-48.png" title="{.!Main Video Playlist.} - {.!Open the Video Player in a new window.}" alt="{.!Main Video Playlist.} - {.!Open the Video Player in a new window.}" /></a>

<script language="javascript">
function toggleDiv(list){
if(document.getElementById(list).style.display == 'none'){
document.getElementById(list).style.display = 'block';
}else{
document.getElementById(list).style.display = 'none';
}
}
</script>

<div id="list" style="display:none">      
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="fm_xspf_jukebox_2118358282"
class="flashmovie"
width="700"
height="400">
<param name="movie" value="/multimedia/xspf_jukebox/xspf_jukebox.swf" />
<param name="flashvars" value="skin_url=/multimedia/xspf_jukebox/skins/iTunes/&loadurl=/multimedia/xspf_jukebox/variables.txt&playlist_url=%folder%playlistaudio.xspf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash"
data="/multimedia/xspf_jukebox/xspf_jukebox.swf"
name="fm_xspf_jukebox_2118358282"
width="700"
height="400">
<param name="flashvars" value="skin_url=/multimedia/xspf_jukebox/skins/iTunes/&loadurl=/multimedia/xspf_jukebox/variables.txt&playlist_url=%folder%playlistaudio.xspf" />
<param name="wmode" value="transparent" />
<!--<![endif]-->

<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br />
</div>
</center>

<script language="javascript">
function toggleDiv(video){
if(document.getElementById(video).style.display == 'none'){
document.getElementById(video).style.display = 'block';
}else{
document.getElementById(video).style.display = 'none';
}
}
</script>

<center>
<script type='text/javascript' src='/multimedia/player_video/swfobject.js'></script>

  <div id='video' style="display:none"></div>

  <script type='text/javascript'>
  var s1 = new SWFObject('/multimedia/player_video/player.swf','ply','780','700','9','#');
  s1.addParam('allowfullscreen','true');
  s1.addParam('allowscriptaccess','always');
  s1.addParam('wmode','opaque');
  s1.addParam('flashvars','file=%folder%playlistvideo.xspf&dock=true&plugins=hd-1&hd.file=%folder%playlistvideo.xspf&playlist=bottom&image=%folder%%item-name%.jpg&skin=/multimedia/player_video/skins/snel/snel/snel.swf&bufferlength=6&volume=100&icons=false&backcolor=000000&frontcolor=FFFFFF&lightcolor=b30000');
  s1.write('video');
</script>
</center>
/if.}

Pour les "popups":

Code: [Select]


[audio]
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <link rel="stylesheet" href="/~style.css" type="text/css">
  
  <!--[if lte IE 5.5]>
<style type="text/css">
</style>
  <![endif]-->  
  
  <title>{.!Overall Audio Playlist.}</title>
  </head>
<div id='body'>
<IMG alt="" src="/multimedia/icones/Music-Note-32.png">
<CENTER>
  <hr color=555">
  
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="fm_xspf_jukebox_2118358282"
class="flashmovie"
width="700"
height="400">
<param name="movie" value="/multimedia/xspf_jukebox/xspf_jukebox.swf" />
<param name="flashvars" value="skin_url=/multimedia/xspf_jukebox/skins/iTunes/&loadurl=/multimedia/xspf_jukebox/variables.txt&playlist_url=/multimedia/playlistes/playlistaudio.xspf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash"
data="/multimedia/xspf_jukebox/xspf_jukebox.swf"
name="fm_xspf_jukebox_2118358282"
width="700"
height="400">
<param name="flashvars" value="skin_url=/multimedia/xspf_jukebox/skins/iTunes/&loadurl=/multimedia/xspf_jukebox/variables.txt&playlist_url=/multimedia/playlistes/playlistaudio.xspf" />
<param name="wmode" value="transparent" />
<!--<![endif]-->

<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br />

</CENTER>
  <hr color=555">
  <br />
</div id='body'>
</html>


[video]
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <link rel="stylesheet" href="/~style.css" type="text/css">
  
  <!--[if lte IE 5.5]>
<style type="text/css">
</style>
  <![endif]-->  
  
  <title>{.!Overall Video Playlist.}</title>
  </head>
<div id='body'>
<IMG alt="" src="/multimedia/icones/Movies-48.png">
<hr color=555">
<CENTER>
<div id='video'></div>

<script type='text/javascript' src='/multimedia/player_video/swfobject.js'></script>
  <script type='text/javascript'>
  var s1 = new SWFObject('/multimedia/player_video/player.swf','ply','780','700','9','#');
  s1.addParam('allowfullscreen','true');
  s1.addParam('allowscriptaccess','always');
  s1.addParam('wmode','opaque');
  s1.addParam('flashvars','file=/multimedia/playlistes/playlistvideo.xspf&plugins=hd-1&hd.file=/multimedia/playlistes/playlistvideo.xspf&playlist=bottom&skin=/multimedia/player_video/skins/snel/snel/snel.swf&bufferlength=6&volume=100&icons=false&backcolor=000000&frontcolor=FFFFFF&lightcolor=b30000');
  s1.write('video');
</script>

</CENTER>
<hr color=555">
  <br />
</div id='body'>
</html>



Fichier hfs.events (contenu):

[+upload completed]
{.if|{.and|{.filesize|enteteplayer.xml.}|{.match|mp3;aac;flv;mp4;h264|%item-ext%.}.}|
  {:
  {.switch|%item-ext%|;|mp3;aac|{:{.set|type|audio.}:}
                                    |flv;mp4;h264|{:{.set|type|video.}:}
                                    |.}
  {.append|%folder%playlist{.^type.}.xml|
    <track>
      <location>{.convert|ansi|utf-8|{.replace|&|%26|=|%3D|?|%3F| |%20|%folder%%item-name%.}.}</location>
      <title>{.convert|ansi|utf-8|{.substring||.%item-ext%|%item-name%.}.}</title>
      <creator></creator>
      <album></album>
      <annotation></annotation>
      <info>%folder%</info>
      <image>{.convert|ansi|utf-8|%folder%{.switch|{.^type.}|;|video|{.substring||.%item-ext%|%item-name%.}|folder.}.jpg.}</image>
      <trackNum></trackNum>
      <duration></duration>
    </track>.}
  {.save|%folder%playlist{.^type.}.xspf|{.load|enteteplayer.xml.}
           {.load|%folder%playlist{.^type.}.xml.}
  </trackList>
</playlist>.}
  :}
/if.}

*****************************************

Fichier enteteplayer.xml (contenu):

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Liste de lecture</title>
  <trackList>

[AvvA]

Tu as taffé dis-donc, bravo !

Le sujet m'intéresse bien, comptant proposer des playlists toutes faites à mes futurs hôtes, ça va bien m'avancer.
J'essais de tester ça ce week-end et je repasserai pour te dire si tout s'est bien passé


Et vive le Sud :p

[SilentPliz]

Salut AvvA  

Cela fonctionne bien pour moi. Le seul risque étant que mon "tuto" ne soit pas assez clair... cela tu le saura à "l'usage".  

Je parle de playlistes "semi-dynamiques", car pour l'instant on peut remplir les playlistes, mais si on enlève des fichiers audio ou vidéo, les listes ne sont pas actualisées.

Cela fera peut-être l'objet d'un second épisode un de ces jours... mais c'est une autre histoire.

@bientôt

PS: l'interface de ta GUI est top. J'ai regardé cet aprem.

[AvvA]

Salut SilentPliz ^^

Le tuto m'a semblé clair, je pense pas qu'il y ait de souci

Pour les playlists, c'est déjà très bien l'ajout automatique ^^

La GUI je vais bientôt filer la version suivante, j'y ai refait le 1er onglet du mode facile...
...avec un "schéma" ^^'


@suivre :p

[TCube]

Salut à tous !

A no no sense answer 

Back from a "gothic" to Vienna's cimetary in Austria : Mozart, Beethoven, Strauss, etc. .... Well the hell do we find Classical Music !  

Just kidding !  I've looking to your dynamic (Mp3 and Videos ) playlist last week... back to Paris now I'll take a look again to see the improvements  !

Tip Top SilentPliz  
TC

[SilentPliz]

On dit que le rock est mort (les fans de rock gentillet surtout le disent), le jour où Presley est parti faire son service militaire en Allemagne... moi je crois que la musique classique est morte le jour où on a inventé le Valium.  

Content que tu sois de retour!

[TCube]

On dit que le rock est mort .../...moi je crois que la musique classique est morte le jour où on a inventé le Valium.  
Content que tu sois de retour!

Ouais c'est ça  ... Il y a plus de tombes au cimetière de Vienne (200ha) que d'habitants dans la Capitale Autrichienne !

Pour l'enterrement de Beethoven : 300 000 personnes ont suivi le cortège pendant 17 Klm  à pied.

Dans la musique classique ... rien n'est plus excitant que la dynamique (BPM) - avec le Jazz aussi  )

TC

[SilentPliz]

On dit que le rock est mort .../...moi je crois que la musique classique est morte le jour où on a inventé le Valium.  
Content que tu sois de retour!

Ouais c'est ça  ... Il y a plus de tombes au cimetière de Vienne (200ha) que d'habitants dans la Capitale Autrichienne !

Pour l'enterrement de Beethoven : 300 000 personnes ont suivi le cortège pendant 17 Klm  à pied.

Dans la musique classique ... rien n'est plus excitant que la dynamique (BPM) - avec le Jazz aussi  )

TC

J'ai pas pu m'empêcher de faire un "mot", mais je reconnais qu'il y a des petites merveilles classique. Il faudrait être sourd pour l'ignorer... quoique, même Beethoven le savait.

Je suis très impressionné par ce que tu me dis de l'enterrement de Beethoven... Pour que cela arrive en France, de nos jours, il faudrait au moins que ce soit Frédérique François qui avale une tagliatelle de travers... qui a dit que les temps changent toujours vers le mieux ?

...  (BPM) dynamique ou Tempo? ... tu devais sans doute dire (dB)

[TCube]

SP,
Non en fait le "Byte rate"correspond au débit binaire  : pour  les Mp3 (beurk ! ) toutes les variations dynamiques ('les "crêtes) sont lissées à une certaine  coupure prédéfinie stable et peu volumineuse : 64 / 128 / 320 etc. (pour de raison de taille de fichiers 
Dans ma médiathèque en riping je peux trouver des analyses des CD originaux  en  818 / 914 / 890  / 782 / etc. ....
Mais il est est vrai que je suis un ringard ... j'ai un lecteur /graveur de mini CD portable 
TC

[SilentPliz]

OK pour ton dernier message, tout à fait d'accord...

Mais je maintiens, le BPM (battements par minute) est juste une mesure de tempo... rien à voir avec la qualité d'enregistrement ou de restitution du son.

Quand tu me parlais de dynamique (du classique, jazz) associée avec le mot (BPM), moi j'avais traduis que tu me parlais "d'écart dynamique" qui lui s'exprime en dB... Et là oui, c'est "bougrement" important pour la fidélité de la restitution sonore.

Tu devais sans doute penser (bps), ce que je comprend mieux quand tu me parle ensuite de bitrate.

Mais comme tu dis, une fois que tout cela est passé par la moulinette de la conversion MP3 et autre normalisation, le débat n'a plus grand intérêt.

Sur les CD actuels il peut y avoir des écarts dynamique qui tournent autour de 11 dB (de moyenne) (c'est bien pour écouter de la musique en bagnole  )... quand tu penses qu'un enregistrement de qualité Hi-fi devrait flirter avec les 20dB (de moyenne) d'écart dynamique (les meilleurs dépassent 30 (de moyenne), et ont été souvent produits avec des convertisseurs de moins bonne qualité que ce qui existe maintenant, ce qui laisse à penser que l'on se fout de la fidélité actuellement, pourvu que cela soit bon pour l'Ipod!).

C'est comme pour la conversation, les nouvelles génération se foutent des nuances... même sonores.

Un lien révélateur de ce dont je parle:

http://fredhammersmith.110mb.com/contenu/Dynamique/dynamique_et_musique.htm

@++

[TCube]

Salut SP !
Très bon le lien !
On dirait que que les "morts vivants" ont plus de dynamiques que les acteurs actuels du "Trip-Hop" (Portishead, Chemical Brothers, Massive Attack, Burial, etc..)
Quelle déconvenue !
TC

[SilentPliz]

Je viens de faire "sauter" mon post par erreur.

Je sais plus ce qu'il y avait dessus.

[SilentPliz]

Mise à jour 08 10 2009

• Pack mis à jour avec les templates étendus et optimisés pour la version beta française de HFS.
  
  
• A partir de hfs247_FR.exe
  
  Le "pack" multimedia:
  
  http://hfsupgradefrench.webhop.org/xspf/multimedia.zip
  

[SilentPliz]

Mise à jour (20 Octobre 2009)
Le lecteur vidéo JW FLV Media Player évolue vers la version 4.6

http://hfsupgradefrench.webhop.org/xspf/multimedia.zip