AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Musiques sur vos forums (player directement intégré)

    Partagez
    avatar
    CaraDelevngnie
    FémininAge : 18Messages : 366

    le Dim 19 Mar 2017 - 21:48

    Bonjour, bonsoir les Utopistes,
    Aujourd'hui je suis très fière de vous partager ma première trouvaille en matière de code (même si en réalité le code et moi ça fait deux...).
    Il s'agit d'un générateur de code assez simpliste qui vous permettra d'ajouter une barre au-dessus ou en-dessous de votre forum afin de partager des musiques qui pourraient mettre vos membres dans l'ambiance ! Voici à quoi cela ressemble :

    Image en taille réelle
    Ce code est souvent utilisé par les membres de Tumblr pour mettre des musiques sur leur blog et en chipotant un peu, j'ai trouvé comment mettre le code sur forum ! Bref, assez de blabla, je vous partage l'astuce.

    Pour cela rien de plus simple, il vous suffit de vous rendre sur ce site : http://scmplayer.co/ après cela il ne vous reste qu'à bien suivre les instructions du site. Mais pour ceux qui ne parle pas très bien l'anglais je vous donne quelques mots d'explication.
    1- La première étape va être de choisir le design de votre barre, le site en affiche quelques unes, mais si vous ne trouvez pas votre bonheur, il y en a plus de 4000 disponibles, pour cela il faut cliquer sur 4000+ Custom Skins

    2- Après cela, il vous faut choisir les musiques que vous souhaitez mettre. Pour cela, vous devez vous rendre sur Youtube et copier le lien de la musique et le coller dans Song URL. À gauche, n'oubliez pas d'indiquer le titre de la musique.

    3- Dernière étape, choisir si vous souhaitez que la musique se lance toute seule ou non, le volume et l'endroit où vous souhaitez que la barre s'affiche (au-dessus ou en-dessous).

    Une fois tout cela fait, vous obtiendrez un code ressemblant à celui-ci :
    Code:
    <!-- SCM Music Player http://scmplayer.co -->
    <script type="text/javascript" src="http://scmplayer.co/script.js"
    data-config="{'skin':'http://static.tumblr.com/yprousi/5lgm4r80i/code.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'All Is Full Of Love','url':'https://www.youtube.com/watch?v=u0cS1FaKPWY&ab_channel=Bj%C3%B6rk'},{'title':'You & Me','url':'https://www.youtube.com/watch?v=_zPlr-o-YEQ&ab_channel=Boris'},{'title':'Sail','url':'https://www.youtube.com/watch?v=JaAWdljhD5o&ab_channel=Nanalew'}]}" ></script>
    <!-- SCM Music Player script end -->
    Et c'est là qu'on arrive dans la partie "la plus délicate", même si elle est en réalité très simple (preuve en est j'ai réussi à la trouver toute seule).
    Rendez-vous dans les Templates > Overall_header.
    Vous devez coller le code fourni juste en-dessous de
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
    Enregistrez et n'oubliez pas de valider, et le tour est joué !

    Voili voilou, j'espère que ce petit tuto vous aura plu et qu'il vous sera utile pour égayer vos forums !
    Je tiens à remercier Gravity pour m'avoir guidée jusqu'ici (d'ailleurs j'espère que j'ai posté au bon endroit, sinon je m'en excuse).

    L'astuce de Marie pour avoir ceci sur Invision :
    @Marie a écrit:OMG!!! Mais c'est mieux que spotify!!! (Même si j'aime bien le son de spotify comparer à youtube...)

    Merci du tuyau! :love:

    Je me permet de rajouter pour ceux qui sont sous Invision:

    Templates: Overall_header.

    Vous cherchez cette partie:

    Code:
    <!-- END hitskin_preview -->

    Vous mettez le code juste après et le tour est jouer! :ange:

    Merci encore de ce partage. :)


    Dernière édition par CaraDelevngnie le Lun 20 Mar 2017 - 18:13, édité 2 fois



    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Dim 19 Mar 2017 - 23:05

    OMG!!! Mais c'est mieux que spotify!!! (Même si j'aime bien le son de spotify comparer à youtube...)

    Merci du tuyau! :love:

    Je me permet de rajouter pour ceux qui sont sous Invision:

    Templates: Overall_header.

    Vous cherchez cette partie:

    Code:
    <!-- END hitskin_preview -->

    Vous mettez le code juste après et le tour est jouer! :ange:

    Merci encore de ce partage. :)



    /

    Kit fait par Arpège. Merci! :love:
    avatar
    Nihil Scar Winspeare
    Messages : 4799

    le Lun 20 Mar 2017 - 0:49

    Coucou !

    Merci pour ton partage :hudada:

    Eventuellement ce que je peux te proposer c'est de le déplacer dans cette section si tu veux : http://www.never-utopia.com/f51-tutoriels-forumactif
    Il y a d'autres tutos du même genre, et il y a surement plus de membres qui ne codent pas qui passent là bas (donc il sera vu par plus de personnes !)

    Si tu veux rendre l'explication facilement compatible avec toutes les versions, c'est effectivement plus simple comme Marie l'a dit de se baser sur une variable présente sur toutes les versions. Le body est aussi présent partout mais un peu différent dans son apparence. Comme ça personne n'est laissé de côté, ni phpbb2, ni phpbb3, ni les tas d'autres versions :hug:

    Par exemple mettre :

    Vous devez coller le code fourni juste avant cette ligne là :
    Code:
    <!-- BEGIN hitskin_preview -->

    Je ne sais pas si c'est encore d'actualité, mais à l'époque où c'était à la mode sur les fow', il y avait quelques bugs avec l'url qui ne se mettait pas à jour parfois (surtout après la redirection automatique quand on postait un message) et d'autres petits bugs. Il y a en a toujours ou pas ? :hum:

    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Lun 20 Mar 2017 - 2:14

    Coucou Nil!

    Personnellement, j'ai rien du tout sous Invision et ce que je trouve bien de cette astuce, la musique te suis partout même si tu changes de page même au panneau d'admin! ^^ La musique ne recommence pas du tout à chaque changement de page. Bref, que du bonheur.

    Par contre, sur Insvision pour l'avoir tester tout de suite après body et avant Histkin, ça n'a pas fonctionner donc il faut absolument le mettre après Histkin.





    /

    Kit fait par Arpège. Merci! :love:
    avatar
    CaraDelevngnie
    FémininAge : 18Messages : 366

    le Lun 20 Mar 2017 - 18:11

    Merci les amis, je vais donc changer ce message d'endroit et éditer avec ton conseil Marie Wink



    avatar
    Nihil Scar Winspeare
    Messages : 4799

    le Lun 20 Mar 2017 - 19:02

    Hello, j'ai donc déplacé le topic au bon endroit, merci pour le partage :lovebomb:

    De mon côté ça marche impec sur toutes les versions si on met avant BEGIN hitskin_preview x) , mais l'important c'est que ça marche pour tout le monde ^^

    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 0:04