Mettre une musique en fonction de l'heureRésolu

Question

Bonjour à tous,

Je vous contacte car j'ai un problème, voilà, j'utilise un joomla site pour mon portfolio, ainsi qu'un template pré-défini. Ce template, me permet de changer de style en fonction de l'heure de la journée, cependant, bien qu'ayant crée les fichiers javascipt pour insérer tel ou tel fond, je n'arrive pas à mettre une musique ou un son en boucle qui fonctionnerai en même temps que l'image, je vous laisse le code pour que vous voyez à quoi cela à l'air et l'amélioration que vous pourriez m'aider à apporter pour ce problème de son :)

window.addEvent('load', function() {
    if (document.body.id == '') {

        if (tempus != false) {
            timeofday = tempus;
            document.body.id=tempus;
        } else {
            datetoday = new Date();
            timenow=datetoday.getTime();
            datetoday.setTime(timenow);
            thehour = datetoday.getHours();

            if (thehour >= 20)
             timeofday = "night";
            else if (thehour >= 17)
             timeofday = "dusk";
            else if (thehour >= 9)
             timeofday = "day";
            else if (thehour >= 5)
             timeofday = "dawn";
            else
             timeofday = "night";

            document.body.id=timeofday;
            
        }
        Cookie.set('dim-tempus', timeofday, {duration: 1/24,path: "/"});
    }
});
 voilà le code mais je ne comprends pas comment insérer le son, si vous pouvez m'aider, je vous serai très reconnaissant...

Cordialement

XtremDuke · Accepted Answer

Re-salut, Ajoute cette portion de code à la fin de ta page Html et remplace comme indiqué tes sources MP3 :

XtremDuke · Answer

Inserer du son en JS, et de manière cross-browser, c'est asser perilleux.
Je te conseilles cependant d'aller jetter un oeuil du côté de scriptaculous. La dernière monture de la bête inclus un fichier 'Sound.js' (2ko) qui permet l'insertion dynamique de son dans un document. Inspires toi de leur méthode ^^

cs_aloyse · Answer

petite question? je le trouve où ? ^^ je suis nul de chez nul en javascript :'( et il est vrai que m'expliquer comment ca marche toussa toussa pour arriver à ce que le son se joue en fonction de l'heure me ravirais :)

cs_aloyse · Answer

Si quelqu'un peut me link le fichier avec le code en question ca m'aiderai beaucoup :'( je vous en supplie, car là mon site ne ressemble plus à rien :'(

XtremDuke · Answer

Voilà le fonctionnement dans les grandes lignes : Tu testes si le client est sous IE ou autre. Pour celà, crée une variable booléenne qui te renverra true ou false suivant le cas : var isIE = !!(window.attachEvent && !window.opera) ? true : false; Ensuite, et suivant la valeur de isIE, tu va inserer : - Une balise si isIE est égale à true : - Une balise

cs_aloyse · Answer

d'accord mais je dois les caler où dans le fichier (ci-dessu) car avec les parenthèses je crois que j'ai fais une belle boulette... Et j'ai essayé aussi de mettre le texte comme ca mais sans succès :

window.addEvent('load', function() {
    if (document.body.id == '') {

        if (tempus != false) {
            timeofday = tempus;
            document.body.id=tempus;
        } else {
            datetoday = new Date();
            timenow=datetoday.getTime();
            datetoday.setTime(timenow);
            thehour = datetoday.getHours();

            if (thehour >= 20)
             timeofday = "night";
             if(timeofday == "night") window.open:("http://aloysebey.free.fr/site/templates/rt_dimensions/images/backgrounds/nuit.html");
            else if (thehour >= 17)
             timeofday = "dusk";
            else if(timeofday == "dusk") window.open:("http://aloysebey.free.fr/site/templates/rt_dimensions/images/backgrounds/matin.html");
            else if (thehour >= 9)
             timeofday = "day";
            else if(timeofday == "day") window.open:("http://aloysebey.free.fr/site/templates/rt_dimensions/images/backgrounds/midi.html");
            else if (thehour >= 5)
             timeofday = "dawn";
            else if(timeofday == "dawn") window.open:("http://aloysebey.free.fr/site/templates/rt_dimensions/images/backgrounds/aprem.html");
            else
             timeofday = "night";
            if(timeofday == "night") window.open:("http://aloysebey.free.fr/site/templates/rt_dimensions/images/backgrounds/nuit.html");

            document.body.id=timeofday;
            
        }
        Cookie.set('dim-tempus', timeofday, {duration: 1/24,path: "/"});
    }
});
-------------------------------------------------
voilà les pages nuit.html etc sont des pages blanches avec un éléments flash en popup qui permet juste de lire le son, cependant ben j'ai du me tromper car non seulement ca marche pas mais en plus j'ai plus l'image bg qui s'affiche... snif.... donc j'ai essayé de mettre des éléments mais sans succès... ch'ui vraiment un boulet du codage :s

cs_aloyse · Answer

ah j'oubliais il faut qu'il soit utilisable sur firefox comme sur internet explorer :s

XtremDuke · Answer

"... les pages nuit.html etc sont des pages blanches avec un éléments flash en popup qui permet juste de lire le son..."

Ha... Alors tes sons sont lus par un objet Flash ? Si c'est le cas oublis tout ce que je t'ai dis.
En gros, ton site ouvre une popup (en fonction de l'heure qu'il est) qui est en fait un lecteur Flash ?!

Essai ca :

function addEvent(oObj, eEvent, fCallback){
    window.attachEvent ? oObj.attachEvent('on'+eEvent, fCallback) : oObj.addEventListener(eEvent, fCallback, _f);
    return true;
}

function showPopup(event){
    if (tempus != false) {
        timeofday = tempus;
        document.body.id=tempus;
        }else{
        var datetoday = new Date();
        var timenow=datetoday.getTime();
        var datetoday.setTime(timenow);
        var thehour = datetoday.getHours();
        var timeofday = new String();        if (thehour >20) timeofday "night";        else if (thehour >17) timeofday "dusk";        else if (thehour >9) timeofday "day";        else if (thehour >5)    timeofday "dawn";
        else timeofday = "night";
        var pageHtml = new String();
        switch(timeofday){
            case "night": pageHtml = "nuit"; break;
            case "dusk": pageHtml = "matin"; break;
            case "day": pageHtml = "midi"; break;
            case "dawn": pageHtml = "aprem"; break;
        }
        document.body.id=timeofday;
        window.open("http://aloysebey.free.fr/site/templates/rt_dimensions/images/backgrounds/"+pageHtml+".html");
    }
    Cookie.set('dim-tempus', timeofday, {duration: 1/24,path: "/"});
}
addEvent(window, "load", showPopup);

XtremDuke · Answer

Petite correction : 

function addEvent(oObj, eEvent, fCallback){
    window.attachEvent ? oObj.attachEvent('on'+eEvent, fCallback) : oObj.addEventListener(eEvent, fCallback, false);
    return true;
}

cs_aloyse · Answer

en fait, les objets sons sont des mp3 à la base, que j'ai convertis en swf, le truc c'est que quoi que je fasse, que ce soit le mp3 ou le swf, impossible de charger le son... Pourtant j'ai utilisé ta 1ere méthode comme la seconde, rien n'y fait, les swf ne sont pas integrer dans un lecteur, mais cependant j'aimerai que la musique ou plutot le son d'ambiance, puisse marcher en continu meme si on change d'onglet, et que cela soit pas remis au début à chaque changement. si tu veux visionner le site pour mieux comprendre (enfin sans le header car la fonction marche toujours pas ^^') je te laisse le lien :

http://aloysebey.free.fr/site

Je te remercie en tout cas pour le temps que tu me consacres :)

cs_aloyse · Answer

ah et autre chose aussi, il faut que le son se charge toujours entre les heures indiquées, donc par exemple :





if (thehour >20) timeofday "night"; :
il faut que le son chargé soit : nuit.html ou nuit.mp3 ou nuit.swf (au choix) se charge dès que l'on ouvre le site jusqu'a la prochaine heure soit :

else if (thehour >5)    timeofday "dawn";



etc, etc...

XtremDuke · Answer

Oups quelques erreurs :

var body =   document .getElementsByTagName('body')[0];

et supprime les deux lignes suivantes :

var timenow =datetoday.getTime();
var datetoday.setTime(timenow);

cs_aloyse · Answer

je le mets donc à la fin de page html de mon index.php? ou alors dans chaque html des sons? genre midi.html?

XtremDuke · Answer

Oublis les pages réservées aux sons. La méthode que je te proposes joue les sons directement ds ta page sans faire appel à une popup.

Il te faut mettre le script a la fin de ton Index.

cs_aloyse · Answer

et est ce que j'oublie le code insérer dans la page javascript?

XtremDuke · Answer

La fonction que je t'ai donné 3 posts au dessus se contente de jouer le son au chargement de la page. Tu peux ignorer tous les autres scripts en rapport avec le son que tu veux jouer.

cs_aloyse · Answer

J'ai essayé point par point les scripts que tu m'as donné et cela marche toujours pas, je suis désemparé à l'idée de te faire perdre du temps mais sache que pour moi tu apportes une aide plus que précieuse et que tes qualités sont indeniablement pleines de bon sens, je suis juste quelqu'un qui apprend à me servir de ce que tu m'apportes et je tiens à te remercier pour tes réponses, j'espère simplement pouvoir trouver la solution :) aller gardons courage ^^

XtremDuke · Answer

Voici l'exemple d'un page Html qui conctionne (du moins sur mon poste). J'ai vu que ta page utilisait JQuery. Aussi, par précaution, j'ai renommé la fonction addEvent en _addEvent pour qu'elle ne rentre pas en conflit avec JQuery. Tu renseignes des mp3 de la façon suivante : case "night": timeMP3 = "nuit.mp3"; break; Est tu sûr de l'emplacement de tes fichiers ? Ici tes MP3 sont déclarés à la racine de ta page Html. A vérifier si ce n'est pas le cas. Si ca ne fonctionne pas, le navigateur te signale-t-il des erreurs ? Je te conseilles d'installer le plugin Firebug pour Firefox que tu trouveras à l'adresse suivante : https://addons.mozilla.org/fr/firefox/addon/1843

cs_aloyse · Answer

pour que tu comprennes mieux comment est gérer la page index.php de mon template je te link le code complet de la page, comme ca tu auras réellement l'ensemble des éléments pour comprendre : (en rouge ce que tu m'as demandé de rajouter) getTemplate() . "/rt_styleswitcher.php"); ?> id ) { initEditor(); } mosShowHead(); // ************************************************* // Change the variables below to adjust the template // // If you have any issues, check out the forum at // http://www.rockettheme.com // // ************************************************* $default_style = "style2"; //[style1... style20] $enable_rokzoom = "true"; // true | false $template_width = "950"; // width in px $secondcol_width = "25%"; // width in px | width in % $thirdcol_width = "25%"; // width in px | width in % $menu_name = "mainmenu"; // mainmenu by default, can be any Joomla menu name $menu_type = "splitmenu"; // moomenu | suckerfish | splitmenu | module $splitmenu_col = "secondcol"; // secondcol | thirdcol $default_font = "default"; // smaller | default | larger $show_pathway = "false"; // true | false // module slider configuration $modules_list = array(array("title"=>"Group 1 Stuff", "module"=>"user7"), array("title"=>"Group 2 Panel", "module"=>"user8"), array("title"=>"Group 3 Collection", "module"=>"user9"), array("title"=>"Group 4 Assortment", "module"=>"user10"), array("title"=>"Group 5 Items", "module"=>"user11")); $module_slider_height = 200; // height in px $max_mods_per_row = 3; // maximum number of modules per row (adjust the height if this wraps) require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_styleloader.php"); require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_tabmodules.php"); require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_utils.php"); ?> "; include_once( "$mosConfig_absolute_path/templates/" . $mainframe->getTemplate() . "/js/ie_suckerfish.js" ); echo " "; endif; ?> class=" "> [ /templates/getTemplate(); ?>/images/logo.png" border="0" alt="" id="logo" />] "> ---- "> "> , , , ---- , , , /templates/getTemplate(); ?>/images/blank.gif" border="0" alt="ABDESIGNER" id="rocket" /> voilà j'espère que l'on va y arriver :)

XtremDuke · Answer

Essai de déplacer le script en fin de document (juste après " ") et remonte moi les erreurs.

Courage...

cs_aloyse · Answer

j'ai essayé mais toujours sans succès, on dirait que la poisse est avec nous lol voilà le code : getTemplate() . "/rt_styleswitcher.php"); ?> id ) { initEditor(); } mosShowHead(); // ************************************************* // Change the variables below to adjust the template // // If you have any issues, check out the forum at // http://www.rockettheme.com // // ************************************************* $default_style = "style2"; //[style1... style20] $enable_rokzoom = "true"; // true | false $template_width = "950"; // width in px $secondcol_width = "25%"; // width in px | width in % $thirdcol_width = "25%"; // width in px | width in % $menu_name = "mainmenu"; // mainmenu by default, can be any Joomla menu name $menu_type = "splitmenu"; // moomenu | suckerfish | splitmenu | module $splitmenu_col = "secondcol"; // secondcol | thirdcol $default_font = "default"; // smaller | default | larger $show_pathway = "false"; // true | false // module slider configuration $modules_list = array(array("title"=>"Group 1 Stuff", "module"=>"user7"), array("title"=>"Group 2 Panel", "module"=>"user8"), array("title"=>"Group 3 Collection", "module"=>"user9"), array("title"=>"Group 4 Assortment", "module"=>"user10"), array("title"=>"Group 5 Items", "module"=>"user11")); $module_slider_height = 200; // height in px $max_mods_per_row = 3; // maximum number of modules per row (adjust the height if this wraps) require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_styleloader.php"); require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_tabmodules.php"); require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_utils.php"); ?> "; include_once( "$mosConfig_absolute_path/templates/" . $mainframe->getTemplate() . "/js/ie_suckerfish.js" ); echo " "; endif; ?> class=" "> [ /templates/getTemplate(); ?>/images/logo.png" border="0" alt="" id="logo" />] "> ---- "> "> , , , ---- , , , /templates/getTemplate(); ?>/images/blank.gif" border="0" alt="ABDESIGNER" id="rocket" /> J'espère que l'on va y arriver

XtremDuke · Answer

Attention, je vois sur ta page que tu n'as pas personnalisé les lignes suivantes :

case "night": timeMP3 =  " mp3/night.mp3 "; break;
case "dusk": timeMP3  = "mp3/dusk.mp3"; break;
case "day": timeMP3 =  " mp3/day.mp3 "; break;
case "dawn": timeMP3  = "mp3/dawn.mp3"; break;

cs_aloyse · Answer

CA MARCHE !!! YOUHOU \o/ cependant, c'est ce que je craignais, chaque fois que je change d'onglet, j'ai la musique qui recharge donc qui coupe et reprends au début... Que dois-je faire ^^

XtremDuke · Answer

Ha bah là, y'a deux solutions :

1- Soit tu utilises un système de frameset avec une frame à 0px de large dans lequel tu met le son. Mais vivement déconseillé car vraiment pas très propre.

2- Soit tu réutilise une popup. Si c'est ta solution, il te suffit de déplacer le script ds une page popup et le tour est joué.

cs_aloyse · Answer

le seul hic avec les popup c'est que cela ca être bloqué par les systèmes mis en place de chaque navigateur :s

XtremDuke · Answer

Et oui... ça peut être très inconvéniant. De plus, c'est pas très joli...

A toi de voir ^^

Mettre une musique en fonction de l'heure

26 réponses

Votre réponse

Discussions similaires