Étiquette : Musique

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 !