Explicació del Codi HTML, CSS, i JavaScript

Aquest codi HTML/CSS/JavaScript és una aplicació web interactiva que permet als usuaris pujar un fitxer d'àudio i veure animacions visuals basades en la música reproduïda. A continuació, trobaràs una explicació detallada de cada part del codi:

1. Estructura HTML inicial

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heart, Crescent Moon, and Rainbow Animation</title>
</head>

- <!DOCTYPE html>: Indica al navegador que el document segueix l'estàndard HTML5.

- <html lang="en">: Defineix l'idioma del document (en aquest cas, anglès). Això és important per a l'accessibilitat i SEO.

2. Capçalera del document (<head>)

<head>
    <style> 
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: #0d335f;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
</head>

- <style>: Defineix l'estil CSS intern.

- <link rel="stylesheet">: Inclou el full d'estils per al reproductor d'àudio Plyr.

3. Cos del document (<body>)

<body>
<h2>Coldplay audio player</h2>
<div class="controls-container">
    <input type="file" id="audio-upload" accept="audio/*" />
    <select id="shape-selector">
        <option value="heart">Heart</option>
        <option value="moon">Crescent Moon</option>
        <option value="rainbow">Rainbow</option>
    </select>
    <audio id="player" class="plyr" controls></audio>
</div>
</body>

- <input type="file">: Camp per carregar fitxers d'àudio.

- <select>: Selector per escollir la forma de l'animació.

- <audio>: Reproductor d'àudio usant Plyr.

4. Inclusió de llibreries externes

<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>

5. Codi JavaScript

let amplitude, fft, song;
let shapes = [];
function setup() {
    createCanvas(600, 600);
    amplitude = new p5.Amplitude();
    fft = new p5.FFT();
    document.getElementById('audio-upload').addEventListener('change', handleFileUpload);
}
function draw() {
    background('#0d335f');
    let level = amplitude.getLevel();
    fill(255 * level);
    ellipse(width / 2, height / 2, 100 * level);
}
function handleFileUpload(event) {
    let file = event.target.files[0];
    if (file) {
        let fileURL = URL.createObjectURL(file);
        loadSound(fileURL, (loadedSong) => {
            if (song) song.stop();
            song = loadedSong;
            song.play();
        });
    }
}

Aquest codi JavaScript crea un canvas utilitzant p5.js que mostra un cercle que canvia de mida segons el volum de l'àudio reproduït.