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.
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.
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 » ?
Cet article a été écrit par des élèves du lycée Louis Pasteur.
Ils étudiaient alors la spécialité NSI, en classe de 1ère.
Promotion 2020 – 2021
Je vais tenter de faire un jeu en une nuit aussi vous m’avez motivé. Une idée ?
Pacman, tout autre jeu serait trop facile pour toi 😅
