Étiquette : Musique

Tutoriels

Comment faire de bonnes mélodies sur FL Studio ?

  • par

J’ai choisi le logiciel FL Studio pour mon tuto car il mélange musique et informatique qui sont deux de mes passions. Il existe d’autres logiciels de ce genre comme Ableton, Logic pro ( essentiellement sur Mac) et d’autres encore. Ce logiciel a pour but de créer des instrumentales dans le genre musical que l’on veut (rap, housse, reggae, électro …) ou bien se démarquer en créant de nouveaux styles musicaux . Cette liberté musicale apporte de la créativité et de l’originalité aux utilisateurs de ce logiciel. Dans ce tuto nous allons nous intéresser à une partie bien précise de l’instrumentale, les mélodies.

Teaser du tutoriel

Interfaces

L’interface de FL Studio peut paraître assez compliqué à comprendre mais elle est en réalité assez simple. Lorsque vous lancez votre logiciel vous arriverez sur cette page ci-dessous.

Les parties qui nous intéressent pour les mélodies sont le piano roll ( piano déroulant ), le Channel Track, et le mixeur.

Le Piano roll nous servira de repère pour faire les mélodies.

VST et piano roll

Pour créer les mélodies nous aurons besoin d’un VST (Virtual Studio Technology) qui est une bibliothèque numérique avec des sons d’instrument pour pouvoir faire nos mélodies nous aurons besoin de choisir un instrument. Pour cela il faut se diriger vers le Channel rack.

Il existe différents types de VST, certains sont payants et d’autres sont gratuits et déjà téléchargés lors de l’installation du logiciel comme :
– Sakura
– FL Keys
– Sytrus

Il faudra donc choisir un VST et pour cela il faut cliquer sur le + du Channel rack qui ouvrira la liste de tous les presets installés

La création de mélodie

Pour la mélodie il faudra se diriger dans le piano roll où nous commencerons par choisir une gamme, par exemple pour faire une mélodie de type orientale il faudra utiliser une gamme mineure harmonique, pour des mélodies plus chill il faudra plutôt utiliser une gamme majeure harmonique. FL Studio possède une fonctionnalité assez intéressante qui est que lorsque vous choisissez votre gamme vous n’avez qu’à cliquer sur une note pour que votre accords soit crée.

Pour choisir votre gamme il faudra cliquer sur le boutons ci-dessous qui ouvrira un menu avec des gammes différentes que vous pourrez utiliser.

Maintenant passons à la mélodie en elle même, pour débuter il est préférable de choisir 4 accords, essayez-en plusieurs et prenez ceux qui vous conviennent le mieux. J’ai pris comme exemple ces 4 accords qui me serviront de base pour notre mélodie.

Il faut ensuite rajouter des notes qui sonnent bien avec vos accords . Vous pouvez aussi réduire la taille de vos notes pour dynamiser davantage votre mélodie.

Humaniser sa mélodie

Pour rendre sa mélodie plus naturelle, il existe quelques presets préalablement installés que l’on peut retrouver facilement grâce à des commandes comme Alt + R qui ouvre le Randomizer (outil qui permet la randomisation du panoramique, de la vélocité et de la hauteur) ou Alt + S qui ouvre le Strumizer ( il décale le timing et la vélocité des notes individuelles dans les accords pour humaniser la mélodie).

Pour utiliser ces deux presets vous n’avez qu’à tourner les boutons Time, Tension, Velocity. Modifiez-les selon vos envies.

Transposition

Pour finir, vous pouvez changer de tonalité pour voir si votre mélodie sonne mieux. Pour cela vous devez sélectionner toutes vos notes à l’aide de la commande Alt + A et vous n’aurez qu’à faire glisser vos notes vers le haut ou vers le bas.

Mixage

Mixer vos mélodies vous servira à donner plus de textures à votre instrumental grâce à plusieurs outils comme la reverb (réverbération), les EQ ( équaliseur) qui servent à modifier les fréquences sonores
de vos mélodies. Pour se rendre dans le mixeur cliquer sur le bouton ci-dessous.

Nous allons nous intéresser à la partie droite de ce menu, c’est là où nous pourrons ajouter les effets. Il faudra cliquer sur l’un des slots vide pour choisir l’effet que vous voudrez ajouter.

  • Fruity Reverb : Ce plugin comporte plusieurs variateurs, nous nous intéresserons surtout à Mid, Side, Delay et Size. Les boutons Mid et Side sont utilisé pour traiter les sons mono ou stéréo (si vous ne comprenez pas la différence laissez-les tel quel). Ensuite le bouton Delay sert à donner de la profondeur à notre mélodie ( attention de ne pas trop en mettre). Pour finir le variateur size sert à simuler la taille de la pièce que vous souhaitez pour créer un effet compressé ou autre.

  • Equaliseur : ce plugin rajoute un effet permettant d’atténuer ou d’amplifier certaines fréquences d’un signal audio, il est difficile à utiliser c’est pour cela que je ne ferai qu’évoquer le nom de cet outil. Il est très utilisé par les beatmaker (personne créant des instrumentales pour des chanteurs rappeurs…).

Création Personnel

Voici un exemple de mélodie que vous pourrez réaliser lorsque vous maitriserez mieux le logiciel.

Tutoriels

Faire des drums sur FL studio !

FL Studio est un logiciel de production de musique. Nous pourrions croire que ce logiciel est plutôt simple à utiliser en voyant l’interface, mais non, FL Studio est plus technique qu’on ne le pense. C’est pour cette raison que j’ai décidé d’écrire ce tutoriel ! Et aussi, car la musique c’est ma passion. Dans ce tutoriel, nous allons voir, comment faire des drums (ce sont les percussions) classiques.

Lien de la vidéo et à la fin, la prod réalisée pendant ce tutoriel !

Je vais essayer de vous montrer un maximum d’astuces qui vous permettrons de débuter sur FL Studio !

Ouverture du logiciel et quelques explications :

Dès l’ouverture du logiciel, vous arriverez sur cette page :

Comme vous pouvez le constater, sur cette page, nous avons beaucoup d’informations.

Je vais vous expliquer les plus utiles !

Tout d’abord, nous pouvons voir, un nombre 130.000, ceci est le BPM (Battement Par Minute) de la prod. Cela est indispensable pour la rapidité de la musique. A coté, le bouton « play » permet le lancement de la prod. Nous avons 2 touches : « song » et « pat ».

Si vous appuyez sur « song » la prod sera jouée dans la playlist, où nous pouvons voir toutes les « Tracks ». Alors que si vous appuyez sur « pat », la prod sera jouée dans un pattern (le motif rythmique de base).

Ici, nous pouvons voir que le curseur qui était dans la playlist n’est plus là, il est dans le pattern !

Pour aller dans le pattern, rien de plus simple : vous avez juste à cliquer sur le bouton au milieu des 6 sur lequel il y a 3 barres verticales à coté du 1 :

Voilà là vous êtes dans le pattern ! Pour ajouter un instrument, vous devez appuyer sur le + et choisir un VST qui vous plaît. Mais dans ce tutoriel, nous allons nous concentrer uniquement sur les drums.

Explication des drums :

Tout d’abord, il faut définir le style de musique qu’on veut produire, nous, nous allons faire de la trap, c’est un genre de style musicale associé au rap. Dans les drums, nous retrouvons très souvent : une snare ou un clap qui sont considérés comme la caisse claire, un hi-hat qui est le charleston fermé, un open hat qui est le charleston ouvert, une inter-snare, un kick qui est la grosse caisse, une 808 qui est la basse. Nous pouvons aussi retrouver aussi des percs, ce sont souvent des bruits percussifs parfois étrange qui ramène du mouvement à la prod.

Pour ajouter une percussion, il faut aller dans la liste de noms à gauche, puis appuyer sur « Packs », puis sur « Drum kit ».

Sur ma capture d’écran, il a y a beaucoup de « Drums kits » qui sont ouverts car j’ai acheté plusieurs « Drum kit » de beatmakers (personne qui fait des prods) de qualité car les « Drums kits » de base de FL Studio ne sont pas les plus qualitatifs mais pour débuter ils sont assez performants.

Après avoir choisi l’élément qui vous convient, vous avez plus qu’à glisser l’élément en-dessous du « Sampler » ! Puis cliquez sur le pattern de l’élément ! Vous allez arriver à cela :

Et là rien de plus simple, vous avez juste à cliquer où vous voulez sur ce qu’on appelle le « Piano roll » et l’élément se placera, et clique droit sur l’élément si vous voulez le supprimer.

Choix du BPM ?

Pour l’exemple de cette prod, nous allons laisser le BPM à 130.000 qui est un rythme adapté pour la trap. Le BPM se choisit dans la plupart des cas avant de commencer à ajouter des élément que cela soit mélodiques ou percussifs.

Les drums !

Donc pour la snare, tous les 3 temps car nous faisons une prod trap, ce qui donne :

La « velocity » c’est le volume de l’élément, vous pouvez le baisser ou l’augmenter.

Pour ajouter un élément, vous avez juste à fermer avec la petite croix en dessous du bouton vert puis vous glissez votre élément en dessous de l’élément déjà rajouter.

Ensuite, passons aux hi-hats, c’est tout les 1/2 temps, pour donner un rythme à la prod :

Pour donner du vivant, vous pouvez jouer avec la vélocité, en bougeant les barres vertes, comme ceci :

Juste en faisant cela, ça donne tout de suite un rythme à la prod, cela donne un rythme humain contrairement à l’image d’au-dessus où le rythme est très robotique, très droit.

Ensuite, nous pouvons rajouter un open hat, tous les 2 temps, en jouant avec la vélocité ce qui donne :

Après cela, l’inter-share qui donne vraiment un rythme à la prod, le placement est assez particulier, vous pouvez aussi un peu baisser la vélocité comme ceci, voici ce que cela donne :

Puis, vous pouvez poser les kicks, la vélocité il ne faut pas qu’elle soit trop basse car c’est un élément phare de la prod. Le kick, vous pouvez le poser un peu où vous voulez, il faut juste que cela ne soit pas à contre temps, un exemple d’un placement de kick simple :

Et là tout de suite, cela donne vraiment un rythme à la prod.

La 808 !

Dans une prod, le choix de la basse est très important. Il y a plusieurs critères à prendre en compte:

  • Il faut que la basse ne soit pas trop aigu et grave.
  • Il faut qu’elle suive les notes fondamentales de la mélodie sinon on dit que la basse est « off keys » et cela ne sonne pas bien.
  • Il faut que la basse prenne assez de place sur la prod.
  • Il ne faut pas qu’il y est d’interférence entre le kick et la basse, et entre la mélodie et la basse.

Nous, nous allons choisir une basse de base de FL studio, qui n’est pas la meilleure des basses mais qui fait le boulot pour cette prod.

Pour cela, vous appuyez sur la petite croix, en-dessous du bouton vert, donc vous allez arriver à ça :

Puis, vous allez appuyer sur le + et chercher un VST qui se nomme « Sytrus » c’est un VST de base de FL Studio, donc cherchez bien il est obligatoirement sur votre logiciel !

Quand vous l’avez trouvé, cliquez dessus, vous allez arriver à cela :

Puis vous allez cliquer sur « Presets » et cherchez « Bass » :

Et à ce moment là, vous allez cliquer sur « Deep 3 », cela va vous donner ceci :

Vous avez plus qu’à cliquer sur la petite croix du VST:

Pour ensuite aller dans le « Piano roll » et faire une ligne de basse, je vous conseille une ligne de basse comme ceci :

Vous avez fini vos drums type trap !

L’enregistrement de la prod :

A ce moment là, vous avez presque fini : il vous manque plus qu’à faire quelques manipulations.

Tout d’abord, fermez le pattern en appuyant sur la petite croix :

Puis glissez le « pattern 1 » que nous voyons à gauche sur la « Track 1 » :

Puis ctrl B, jusqu’à 17 mesures car c’est le temps d’un couplet :

Ensuite, ctrl S, pour enregistrer, puis nommez la prod au nom que vous voulez :

Puis appuyez sur « Save ». Votre prod est enregistrée !

L’enregistrement de la prod en mp3 :

Pour l’enregistrer en mp3, rien de plus simple, ctrl R puis appuyez sur « Save », vous allez arriver à ceci :

Appuyez sur « Start » et votre prod sera enregistré en mp3 ! Vous pouvez fermer le logiciel, chercher la prod pour l’envoyer à votre téléphone, par mail ou par airdrop si c’est un Mac !

Lien d’une prod faites par moi !

Voilà ce tutoriel est maintenant fini ! J’espère qu’il vous aura aider à la compréhension de FL Studio et que la prod faites pendant ce tutoriel vous aura plus !

Tutoriels

Comment enregistrer une chanson à partir de plusieurs pistes…

  • par

Vous êtes un musicien solo et souhaitez créer un morceau qui sonne comme celui d’un grand groupe ? La plateforme musicale BandLab est faite pour vous ! Vous pourrez créer votre propre musique à partir de plusieurs pistes audio, y ajouter des effets sonores et même la partager avec vos abonnés ! Ne perdez plus de temps, et laissez place à votre inspiration…

Qu’est ce que BandLab ?

BandLab est une plateforme de musique gratuite créée en 2015 qui fonctionne comme un réseau social. Elle permet aux artistes de collaborer les uns avec les autres et de partager leur travail avec les auditeurs. BandLab est utilisée pour l’enregistrement ainsi que pour l’édition numérique d’enregistrements audio. Elle est accessible en se rendant sur son site Web ou en téléchargeant ses applications de bureau (MacOs et Windows) et mobiles (Android et iOS).

Premiers pas sur BandLab

Pour commencer, après avoir téléchargé l’application ou vous être rendus sur le site, il va falloir vous créer un compte. Vous pourrez y renseigner votre nom ou pseudo, votre âge et la musique que vous aimez écouter ou jouer. De plus, il existe une fonctionnalité très pratique pour insérer des liens vers vos contenus musicaux, si vous en avez, sur d’autre plateformes musicales telles Deezer ou Spotify. Il est possible de mettre votre profil en privé afin que seul vos abonnés puissent avoir accès à votre contenu.

Une fois votre compte activé, vous allez pouvoir commencer à créer votre musique. Pour cela, il vous suffit simplement d’appuyer sur le bouton « créer » se trouvant en haut à droite, puis sur « nouveau projet ».

Création de votre projet

Vous voila ensuite dans votre nouvel espace de travail !

Comme vous pourrez le constater, c’est à vous d’insérer vos pistes audios à l’endroit prévu à cet effet.

Vous pouvez enregistrer votre instrument via un enregistreur numérique ou tout simplement depuis votre téléphone portable. Ensuite, il vous suffit simplement d’appuyer sur « déposer une boucle ou un fichier audio/MIDI » puis de sélectionner votre fichier audio.

Libre à vous d’ajouter le nombre de pistes que vous souhaitez !

A présent, vous pouvez raccourcir vos pistes audio, les faire débuter à différents moments, les diviser, modifier leur volume… Toutes ces options sont réalisables pour chaque piste de façon indépendante.

Pour cela, sélectionner la piste que vous souhaitez modifier puis faites un clic droit. Vous pouvez alors choisir les différentes options pour travailler votre piste audio.

Focus sur le travail du volume :

Il est aussi possible de rectifier le volume en l’augmentant, le diminuant ou en le faisant ressortir du coté gauche ou droit de la sortie audio. Tout d’abord, sélectionner la piste concernée, puis penchez vous sur les réglages se trouvant à gauche de la piste. Pour modifier le volume, faites glisser le curseur vers la droite pour l’augmenter et vers la gauche pour le diminuer. Si vous préférez que la piste sélectionnée ressorte plus d’un côté que de l’autre, tourner le curseur (en forme de cadran) vers L (left) pour une sortie à gauche et inversement avec R (right).

Il est aussi possible de mettre une piste en mode « Solo » afin de n’écouter que cette dernière (appuyez sur le S). Au contraire, pour la mettre en « Muet » afin d’avoir un rendu sans la piste sélectionnée, appuyez sur M.

Ajout d’effets :

De plus, si l’envie vous prend, vous pouvez vous amuser à ajouter des effets sur votre piste (style classique, rap moderne, robot, reverb…) en appuyant soit sur « AutoPitch » soit sur « Effets » en bas à gauche de votre écran.

Il est aussi possible d’ajouter une autre source extérieure (voix, clap…) sur cette même piste en vous rendant sur « Source » pour l’enregistrer directement sur la piste.

Pour changer la hauteur (tonalité) ou la vitesse (tempo) d’une piste, rendez vous sur le bouton « Editeur ».

Si votre création contient des paroles, vous pouvez aussi vous rendre sur « Paroles/Notes » en bas à droite du poste de travail, afin de les ajouter. Ainsi, elles apparaitront sur votre post BandLab et défileront en même temps que la chanson.

Enfin, la touche « BandLab Sounds » qui est juste à côté permet de rajouter des boucles ou extraits de musique déjà créés par BandLab !

Pour finir, lorsque vous êtes satisfait du résultat final et souhaitez le partager, il vous suffit d’appuyer sur le bouton « Publier » en haut à droite pour que vos auditeurs y aient accès.

Il est toutefois possible d’enregistrer votre création si vous souhaitez l’améliorer à un autre moment ou simplement la garder pour vous en appuyant sur « Enregistrer », à gauche de « Publier ».

Accéder à vos projets

Une fois revenu au fil d’actualité de BandLab, il vous suffit d’appuyer sur « Bibliothèque » pour accéder à vos différents projets et sélectionner celui qui vous intéresse.

Vous pouvez alors l’ajouter à vos favoris, partager le lien sur tout autre type de réseaux sociaux, le télécharger sur votre ordinateur ou votre téléphone, le publier si cela n’est pas encore fait ou tout simplement le modifier à nouveau comme vous avez pu le faire précédemment en vous rendant sur « Studio ».

Vous voilà maintenant prêt à créer votre morceau avec BandLab, à vous de découvrir les astuces et modifications qui vous plaisent le plus…

Laissez place à votre imagination !

Tutoriels

Présentation du logiciel Ableton Live 11

  • par

Notre objectif sur ce tutoriel et de présenter le logiciel sur lequel nous allons travailler qui se nomme Ableton Live 11 pour créer un début de morceaux, en utilisant des boucles et des pistes audio. Tout en vous expliquant pas à pas chaque fonctionnalité pour créer une production musicale à partir de boucle.

1- Qu’est-ce que Ableton Live 11 ?

 Ableton Live est un séquenceur musical logiciel professionnel pour OS X et Windows lancé par Ableton en 1999. Live est un outil permettant la composition et l’arrangement musical, mais sa conception et son ergonomie sont surtout destinées à une utilisation en concert.

  1.1- Les deux différentes interfaces d’Ableton Live 11

Ableton Live 11 est un logiciel de musique qui permet de jouer en Live un morceau avec l’interface session, qu’on peut observer ci-dessous:

Ableton a aussi une autre interface cette interface se nomme « arrangement » où toute la partie de composition musicale se déroule; (la composition est aussi disponible dans l’interface session qui est plus compréhensible lorsque vous débutez sur le logiciel)

2- Explication du tempo, du BPM, de la notion de temps et des séquences

Cette partie est indispensable pour comprendre comment est formée la musique, comment elle fonctionne.

Chaque élément se complète et a un rôle important.

Il faut savoir que la musique fonctionne sur plusieurs règles importantes:

  • Le tempo
  • Le BPM
  • Le temps
  • Les séquences

2.1- Le tempo

En musique, le tempo est la vitesse à laquelle le musicien va jouer la musique. Tempo signifie « temps » en italien. Le terme « pulsation » est aussi employé ainsi que celui de « mouvement ». Le tempos va indiquer le rythme du morceau (joué lentement ou rapidement).

2.2- Le BPM

Le BPM signifie en musique “battement par minute”. C’est l’unité de mesure du tempo afin de calculer la vitesse d’un morceau. Un battement (appelé aussi “temps”) est l’unité de mesure standard d’un morceau de musique. Chaque morceau possède sa propre signature rythmique. Autrement dit chaque morceau à son propre tempo.

2.3- Le temps

En musique, le temps est l’unité de mesure de la durée musicale. La durée réelle des temps peut varier d’une œuvre musicale à l’autre, et c’est le tempo qui va fixer, pour un passage musical donné, la durée exacte des temps, (le temps peut être rapide un moment donné du morceau comme lent).

Le temps fonctionne sur 4 temps qui signifie 1 mesure en musique.

2.4- Les séquences

En musique dans la notion de temps il existe des séquences, une séquence est composée de 32 temps. Dans la production musicale nous devons respecter cette séquence, c’est-à-dire qu’à la fin de chaque 32 temps, un nouvel élément musical se passe (un nouvel instrument rentre dans le morceau, ou un autre en sort).

3- La composition d’un morceau à partir de boucle, sur des pistes audio

3.1- La piste audio

Tout d’abord qu’est-ce qu’une piste audio et à quoi va t’elle nous servir?

Les pistes audio vont nous permettre de déposer nos boucles d’instruments, de rythmique (batterie), de voix, etc. dans Ableton Live 11

3.2- Les boucles

En musique, une boucle est une séquence musicale destinée à être répétée indéfiniment. La boucle est typique de la musique électronique.

Par exemple, vous pouvez écouter le morceaux Around The World des Daft Punk où on entend des sons qui se répètent tout au long du morceau.

Ableton Live 11 nous propose des boucles toutes faites directement sur le logiciel, nous pouvons aussi en trouver sur Internet disponible gratuitement en téléchargement.

3.3- La composition

Nous commençons d’abord par mettre en place la rythmique: un kick (grosse caisse de la batterie) tape sur chaque temps

Nous allons rentrer une caisse claire (qui se nomme snare) elle va taper 1 temps sur deux contrairement au kick.

  En dernier lieu nous rentrerons un hit-hat (les mini cymbales de la batterie) qui tapera sur chaque micro temps (encore plus rapide que le kick)

Pour trouver toutes ces rythmiques que j’ai positionnées, il suffit de se rendre dans l’onglet de gauche de l’interface intitulé « batterie ».

Voilà, nous venons de poser nos bases pour la rythmique, l’essentiel à avoir pour la structure du morceau. Nous allons ensuite mettre en place une mélodie simple que nous retrouvons dans les onglets ‘Sons », « Sample », et « Clips ».

Ici j’ai déposé ma mélodie dans la piste audio, nous remarquons que cette boucle est composée de 16 temps donc la moitié d’une séquence de 32 temps, il faudra la jouer deux fois pour pouvoir ensuite rentrer une autre boucle.

Dans un morceau il y a des moments où nous retirons le kick pour faire comme une pause dans le morceau, cette évènement s’appelle le « break ». L’image ci-dessous nous montre une partie où il n’y a plus de kick, où il ne reste plus que la snare, les hit-hat et notre mélodie:

Ici on peut remarquer que j’ai mis un break entre chaque séquence (il n’est absolument pas obligatoire de faire des breaks aussi régulièrement). En général dans la plupart des morceaux on retrouve deux breaks tout au long du morceau.

Après avoir mis ma rythmique, ma mélodie, je peux rajouter d’autres mélodies en parallèle. Par exemple, pendant un break, dans la continuité du morceau pour le faire évoluer, ou encore libre à votre inspiration !

Vous avez maintenant les bases essentielles pour faire un morceau avec des boucles, il ne vous reste plus qu’à développer votre morceau. Voici mon résultat final (il n’est pas nécessaire de trop faire évoluer le morceau, souvent une dizaine de scène suffit !)

Projets

De la musique ? Oui, mais pas que.

Envie d’écouter de la musique avec style ? Le Web regorge de site Internet sans aucune utilité, comme les Cookies Clickers, les sites vierges, ou Parcoursup. Et bien, je peux fièrement annoncer que mon site est l’un d’entre eux, mais ne paniquez pas ! Avec mon site, vous pourrez mettre de la musique (téléchargée au préalable, il faut pas déconner non plus), et l’écouter sereinement, sans crainte. Mais le plus important c’est que vous pourrez écouter votre musique… avec style et bagou.

Ce site, qui est constitué d’une seule et unique page, est constitué de 4 programmes différents, que j’ai intégré a ma page html, et nous allons les détailler un par un.

1 La souris animée

Sur mon site, nous avons une petite boule animée qui suit la souris, avec un temps de retard.Retour ligne automatique
Cette souris est animée grâce a deux petits codes css et javascript, que je me permet d’afficher ici, car il est vraiment petit, et simple a afficher (pour les codes plus long, je prendrais des extraits).

D’abord le Javascript ;

const cursor = document.querySelector('.cursor');
 
document.addEventListener('mousemove', e => {
    cursor.setAttribute('style', 'top:'+(e.pageY - 20)+"px; left:"+(e.pageX - 20)+"px;")
})
 
document.addEventListener('click', ()=>{
    cursor.classList.add('expand');
 
    setTimeout(()=>{
        cursor.classList.remove("expand");
    }, 500);
})

Comme on a dit, le « setTimeout » sert a initialiser le retard du curseur, pour donner cette impression de ralenti. Retour ligne automatique
Le « cursor.setAttribute » place le cercle animée a la pointe du curseur, et pas au milieu, ce qui se passerait si cette commande n’aurait pas été la.

Le CSS :

.cursor {
    width: 40px;
    height: 40px;
    border: 1px dashed white;
    border-radius: 50%;
    position: absolute;
    animation: Anim1 1s infinite alternate;
  pointer-events: none;
}
 
.cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5px;
    height: 5px;
    background: crimson;
    border-radius: 50%;
}
 
.expand {
    animation: Anim2 .5s;
    background: crimson;
    border: 1px solid crimson;
}
@keyframes Anim1 {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(0.7) rotate(190deg);
    }
}
 
@keyframes Anim2 {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(2);
    }
    100%{
        transform: scale(1);
        opacity:0;
    }
}

Le curseur est crée grâce a ".cursor", est le curseur après-clic est crée grâce à ".cursor::before"

L’animation du cercle lorsqu’il est statique est générée ici :

les "@keyframes" s’en occupent, en le faisant tourner, et en le faisant respirer.

Evidemment, pour que la souris fonctionne, il ne faut pas oublier de déclarer la souris dans le html, grâce a cette unique ligne : <div class="cursor"></div>
Bref, la souris est surtout un élément esthétique (comme si il n’y en avait pas assez…), et ne demande pas beaucoup d’analyse, c’est un code relativement simple, ou du moins compréhensible, ce qui n’est clairement pas le cas des codes suivants (bon courage).

2 Le background avec les lignes animées

On parlait d’élément esthétiques, bah en voila un autre.

Ces lignes, qui donnent du dynamisme au site, sont générées uniquement en CSS (sans compter la déclaration dans le HTML).

Le HTML :

<div class="lines">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

On peut remarquer que chaque ligne est indépendantes, ce n’est pas juste un background animé.

Le CSS :

.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
}
.lines .line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.lines .line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #ffffff), to(#ffffff));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  -webkit-animation: run 7s 0s infinite;
          animation: run 7s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.lines .line:nth-child(1) {
  margin-left: -25%;
}
.lines .line:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.lines .line:nth-child(3) {
  margin-left: 25%;
}
.lines .line:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
 
@-webkit-keyframes run {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}
 
@keyframes run {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

Ici aussi, l’animation des lignes est juste une histoire de délais : pour que les lignes soit décalées, un délai de 2 seconde est donné a la première ligne, et un délai de 2.5 est donnée a la troisième ligne.

On peut d’ailleurs le voir quand on lance le site : la deuxième ligne, celle qui n’a pas de délai, descend en première, suivi de la première est de la troisième .

Grace a « webkit », le navigateur gère (presque) tout seul les animations, et cela est moins lourd dans le code.

Bref, je ne vais pas tout détailler, mais cet effet apporte tellement au site (sans être ironique pour le coup), quand on lance une musique, on a l’impression que les lignes bougent en rythme.

Passons au programme majeur du site.

3 Le spectre audio + le bouton d’upload

Alors, faisons un point.

Il est hors de question que j’explique le code ligne par ligne, déjà parce que c’est long, et puis j’avoue que je n’y comprend pas grand chose, c’est hors de mes capacités. Je vais expliquer comment marche le bouton, mais je vais très peu parler des spectres audio.

Le bouton est juste un… bouton. SAUF que, il permet d’uploader le mp3, pour, de 1 lancer la musique, et de 2, initialiser le spectre audio.

Ce code Javascript, est ce qui permet au site de récupérer la musique, via le bouton :

input();
                shade.init();
                document.getElementById("input").addEventListener("change", function(e){
                        document.getElementsByClassName('label')[0].innerText = e.target.files[0].name;
                        fileReader = new FileReader();
                        fileReader.readAsArrayBuffer(e.target.files[0]);
                        music.init();
                       
                }.bind(this), false);

Le "input" demande le fichier choisi, et le "getElement" récupère le fichier, pour l’upload dans le site. Le "innerText" permet de donner au bouton le nom du fichier, et le fait de choisir un nouveau fichier, écrase le précédent, comme nous le montre "fileReader = new FileReader() ;".
Enfin, "music.init" lance la musique sur le navigateur.

Pour ce qui est des deux spectres audio, tout ça est contrôlé par de nombreuuuses formules mathématiques, voici un petit exemple du Javascript :

color : function(){
                        var r = [false, Math.floor(Math.random() * shade.data.max)],
                        g = [false, Math.floor(Math.random() * shade.data.max)],
                        b = [false, Math.floor(Math.random() * shade.data.max)];
                        setInterval(function(){
                               
                                if(r[1] === shade.data.max) r[0] = true;
                                if(r[1] === shade.data.min) r[0] = false;
                                if(r[0] === false) r[1]++;
                                if(r[0] === true) r[1]--;
 
                                if(g[1] === shade.data.max) g[0] = true;
                                if(g[1] === shade.data.min) g[0] = false;
                                if(g[0] === false) g[1]++;
                                if(g[0] === true) g[1]--;
 
                                if(b[1] === shade.data.max) b[0] = true;
                                if(b[1] === shade.data.min) b[0] = false;
                                if(b[0] === false) b[1]++;
                                if(b[0] === true) b[1]--;
 
                                for(var i = 0; i <= 1; i++){
                                        colour = 'rgba('+r[1]+','+g[1]+','+b[1]+',0.8)';
                                        ctx[i].fillStyle = colour;
                                        document.getElementsByClassName('label')[0].style.setProperty('border-color', colour,'');

A ce que j’ai compris, ceci sert a régler les couleurs , car oui, les couleurs réagissent aussi a la musique, et ça, c’est quand même plutôt cool.

Les teintes r (rouge), g (vert), et b(bleu), évoluent au rythme des « shades », qui sont a mon avis les variations du spectre audio.

Bref, ce code rajoute quand même au site tout son charme, et arrachera surement un « wow » a vos amis, si vous en avez.

Passons au dernier programme, tout simple, symbole de l’ego surdimensionné du programmeur :

4 La signature du beau développeur

Tout en bas, a droite, nous avons un petit « Made by Robin Metais », animé, et cliquable.

Le CSS :

a{
  color:white;
  font-size:9px;
  text-decoration:none;
  letter-spacing:2px;
  font-family: "Open sans", sans-serif;
  position:fixed;
  z-index:5;
  bottom:10px;
  right:10px;
  transition:all 0.2s 0s ease-in-out;
}
a:hover{
  color:#95afab;
  letter-spacing:3px;
  transition:all 0.2s 0s ease-in-out;
}

la partie « a » est le bouton (car c’est un bouton) d’origine, et le "a:hover" est le bouton lorsqu’il est survolé.

Le Javascript :

var a = document.createElement("a");
a.innerText = "Made by Robin Metais";
a.href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
a.title = "";
a.target="";
body.insertBefore(a, body.childNodes[0]);

Ici, on définit le texte qui doit être affiché, et ce qui doit se passer quand le bouton est cliqué.
Un mystérieux lien mystique est apparu dans mon fichier Javascript, comment l’enlever ? ( ͡° ͜ʖ ͡°)

Avec ça, je crois que nous avons fait le tour de ce sublime programme !

Etes vous prêt a mettre le « fire » dans vos diners de famille, et enflammer le « dancefloor » ?

musicTélécharger
Tutoriels

Comment jumeler une enceinte Sony SRS-XB21 et autre périphérique…

Laissez-moi deviner ? Vous étiez à la recherche d’une enceinte Bluetooth puis vous tombez sous le charme de la fameuse Sony SRS-XB21, ou bien d’une enceinte Sony de la même gamme. Cependant, vous ne parvenez pas à la connecter avec votre smartphone, c’est normal : pour sa première connexion, celle-ci nécessite d’une application (totalement gratuite) pour se jumuler à votre appareil.

Enceinte Sony SRS-XB21

Le processus est très simple et très rapide :

Le tutoriel est le même pour les utilisateurs d’iPhone et de smartphones androids !

1- Aller sur Apple Store (iOS) ou Play Store (Android)

2- Télécharger « Music Center »

Music Center est une application permettant d’organiser et de transférer de la musique sur des périphériques audio fabriqués par Sony. Il est nécessaire, pour tout périphérique audio sans fil de Sony, de passer par cette application lors de la première connexion avec le smartphone. Sans cette étape, votre téléphone portable ne détectera pas l’enceinte.

3- Ouvrir l’appliclation

4- Accepter les conditions d’utilisations (si vous n’acceptez pas, il sera impossible d’utiliser l’application). Vous aurez également la politique de confidentialité à lire et à accepter.

5- Accepter que l’application utilise le Bluetooth

6- Activer votre Bluetooth et allumer l’enceinte Sony SRS-XB21

7- Retourner sur Music Center

Votre enceinte sera automatiquement détectée par Music Center.

8- Appuyer sur SRS-XB21

9- Music Center vous demandera d’enregistrer l’enceinte sur votre smartphone, appuyer sur Suivant et l’application vous expliquera comment enregistrer l’enceinte dans vos appareils (que ce soit un iPhone ou un smartphone Android, tout est expliqué très clairement)

L’exemple ci-dessus est le procédé pour un iPhone.

10- Après avoir enregistré votre enceinte, quittez l’application puis activez le Bluetooth dans les Réglages de votre smartphone.

11- Sélectionnez SRS-XB21

L’enceinte produira à ce moment là un son annonçant qu’elle s’est connectée avec votre smartphone.

12- Revenez sur Music Center et appuyer sur Terminé

L’enceinte a été jumelé à votre smartphone avec succés !

P.S : Ce processus n’est nécessaire qu’à la première connexion. A présent, il suffira simplement d’aller dans les Réglages de votre téléphone, d’activer le Bluetooth et sélectionner SRS-XB21. L’enceinte se jumulera automatiquement.Retour ligne automatique
Comme il est dit dans le titre, ce tutoriel s’applique également pour les autres périphériques audio sans fil de Sony, l’enceinte Sony SRS-XB21 n’est qu’un exemple !

++ Comme vous avez pu le voir sur la dernière étape, après avoir cliqué sur Terminé, vous arrivez sur une page dédiée à l’enceinte que vous venez de jumeler. Si vous le souhaitez, vous pouvez cliquer sur Réglages et vous aurez toutes sortes de réglages à modifier comme le son de l’enceinte (en mode standard, extra bass, live sound), les illuminations (rave, chill, strobe,…), le Party Booster (vous pouvez activer les bruits de percussions lorsque vous donnez une tape sur l’enceinte), etc. Le choix est large !