Dernière m.à.j. : 2018-06-17
1. Présentation et enjeux du Script
Ce script va vous permettre de mettre une musique en fond d'une page web. Dans un esprit de respect de l'utilisateur, il faut prévoir :
- un fichier multimédia pas trop lourd, pensez que tous vos visiteurs ne sont pas en haut débit (pour rappel : env. 5 min de téléchargement pour 1 Mo en 56k) ;
- un fichier multimédia qui puisse s'arrêter.
En effet, il y a des gens qui ont pour habitude de "surfer" de site en site, en écoutant de la musique, leur imposer la vôtre ne peut que les faire fuir s'ils ne partagent pas vos goûts musicaux.
2. Protection Juridique
Mettre une musique en fond de page, c'est indirectement partager un fichier multimédia qui est une oeuvre d'un artiste. Gardez en tête que cette technique doit être faite UNIQUEMENT si vous avez le droit de diffuser un fichier.
Enfin, le format de la musique est, en théorie, protégé au même titre que l'oeuvre : ne croyez pas que c'est parce que votre fichier est en MP3 plutôt qu'en WAV, ou en MIDI que vous n'êtes pas soumis aux droits d'auteur.
3. Le script !
Le script que je vous présente est un "simple" javascript qui peut s'activer ou non à tout moment. Il se charge dans une popup, c.à.d. dans une fenêtre indépendante de celle qui affiche votre site : c'est ainsi que la musique n'est pas rechargée entre les changements de pages. Il y a une autre technique, qui est la page de cadres, mais elle pose tellement de soucis dans la navigation que je ne la présente pas. Il a aussi la particularité de tirer au sort une des musiques de la liste, de façon à faire une liste de lecture aléatoire !
Le visiteur doit avoir un module de lecture sur son navigateur pour lire ces fichiers multimédia : Apple QuickTime, ou Windows Media Player.
Ce script s'installe dans 3 fichiers :
- liste_musiques.js : un simple javascript qui contiendra le nom du fichier + le titre de la musique ;
- musique.html : la page popup qui jouera la musique en arrière plan ;
- index.html : la page de votre site qui présentera l'appel à la popup (peu importe son extension, elle peut être en php, ou asp si vous voulez !) par un simple lien (d'ailleurs, cela peut être aussi les autres pages de votre site).
Par simplicité, si je suppose que votre site a l'adresse http://www.votresite.ext/, les fichiers "liste_musiques.js" et "musique.html" seront dans le dossier racine (c.à.d. dans aucun sous dossier sur le FTP), on doit donc pouvoir les afficher en testant les adresses "http://www.votresite.ext/liste_musiques.js" et "http://www.votresite.ext/musique.html". De même, je suppose que vous allez créer un dossier "musiques/" contenant toutes les musiques au même niveau que ces 2 fichiers précédemment créés. On doit donc pouvoir ouvrir "http://www.votresite.ext/musiques/"
3.1. Liste des musiques : http://www.votresite.ext/liste_musiques.js
var nbmusic, day, x, y, z, midi, midi_title;
nbmusic = 6; // mettez ici le nombre de musiques de votre liste de lecture
day = new Date();
z = day.getTime();
y = (z - (parseInt(z/1000,10) * 1000))/10;
x = parseInt(y/100*nbmusic,10) + 1; // ici on tire une musique au sort
// insérez en dessous chacune des musiques avec leur titre :
if (x == (1))
{
midi="musiques/musique_printemps.mp3";
midi_title="Belle musique de printemps !";
}
if (x == (2))
{
midi="musiques/musique_ete.mp3";
midi_title="Summer Dance";
}
if (x == (3))
{
midi="musiques/musique_automne.mp3";
midi_title="Automne";
}
if (x == (4))
{
midi="musiques/musique_hiver.mp3";
midi_title="La neige tombe en hiver";
}
if (x == (5))
{
midi="musiques/musique_paques.mp3";
midi_title="Ecoute les cloches";
}
if (x == (6))
{
midi="musiques/musique_noel.mp3";
midi_title="Petit papa noël";
}
document.write('<embed type="audio/x-mpeg3" src= ' + midi + ' autostart="true" loop="true" ')
document.write('volume="100" align="center" width="70" height="25">')
document.write('<p style="text-align:center;">Titre : ' + midi_title + ' </p> ')
Dans ce fichier Javascript, mettez loop="false" pour ne pas jouer en boucle la musique et autostart="false" si vous ne voulez pas commencer automatiquement la lecture.
3.2. Le fichier qui lira la musique : http://www.votresite.ext/musique.html
<!DOCTYPE html> <!--[if IE 8 ]><html class="ie ie8" lang="fr"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="fr"> <!--<![endif]--> <head> <meta charset="utf-8"> <title>PHP-Astux.info - Sélection musicale</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="liste_musiques.js"></script> </head> <body> <div style="margin:3em; text-align:center;">Changer de musique : simplement <a href="javascript:location.reload();">actualiser la page</a>.</div> </body> </html>
L'important dans ce fichier est l'appel du script liste_musiques.js : il faut faire attention aux adresses des fichiers des musiques. Ici, elles sont toutes dans un sous-dossier nommé "musiques/". Ce fichier est personnalisable, je n'ai pas mis grand chose, à part un Doctype HTML transitional. On peut l'écrire en XHTML, en Strict, lui mettre des CSS, etc. : à votre goût.
Il ne reste plus qu'à charger ce fichier en popup ou en nouvelle fenêtre.
3.3. Appel du fichier musique depuis http://www.votresite.ext/index.html
Cela peut être n'importe quel fichier de votre site, index.html, contact.php, accueil.html ... Il faut y insérer un hyperlien (sur un texte ou une image) qui pointe vers le fichier "musique.html" précédemment créé.
<!-- Ceci est un fichier du site : index.html, ici je fais un lien simple en nouvelle fenêtre --> <p><a href="musique.html" target="_blank">Surfez en musique !</a></p>
ou bien en popup :
<!--
A mettre entre <head> et </head>
-->
<script type="text/javascript">
function popUp(URL)
{
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=480,height=320');");
}
</script>
<!--
A mettre entre <body> et </body>
là où vous voulez mettre le lien
-->
<p><a href="javascript:popUp('musique.html')">Surfez en musique !</a></p>
Conclusion
Ce script vous permettra d'insérer une musique en fond de votre page Web et elle utilisera un lecteur chez le client : Apple QuickTime, par exemple, ou bien Windows Media Player. Gardez toutefois à l'idée que le webmaster n'est pas censé imposer au visiteur une navigation, mais la proposer : le visiteur peut être en bas débit, ou sourd : ainsi il ne faut pas, à mon sens, imposer une musique. De même pensez que le visiteur souhaite venir sur votre site par curiosité ou bien à la recherche d'une information : si votre site met 5 minutes à s'afficher parce qu'il y a une musique de 10 Mo à télécharger obligatoirement (et pour peu que le visiteur n'aime pas cette musique), vous ne ferez que l'inciter à aller voir ailleurs ...
Bonne utilisation !