Étiquette : Musique

Tutoriels

Présentation du logiciel Ableton Live 11

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 » ?

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 !