Comment créer une forme d'onde audio pour votre projet : Code, Outils, & Design
Une forme d'onde audio visualise l'amplitude dans le temps. Que vous ayez besoin d'une image statique pour une couverture podcast, d'un égaliseur animé pour un clip musical, ou d'un tableau de données pour un moteur de jeu, la méthode dépend de votre média de sortie et aisance technique.
1. Image statique : Zéro code (Designers/Monteurs)
Audacity (Gratuit, Win/Mac/Linux)
- Fichier → Importer → Audio.
- Sélectionnez piste → **Affichage > Spectre** (pour fréquence) ou juste visualisez forme d'onde.
- **Fichier > Exporter > Exporter en image** → PNG/SVG. Personnalisez : Pistes → **Forme d'onde (dB)** ou **Forme d'onde**.
- Pour haute résolution : **Édition > Préférences > Pistes > Affichage forme d'onde** → augmentez « Pixels par seconde » avant export.
Adobe Audition / DaVinci Resolve (Fairlight) / Reaper
Similaire : Visualisez forme d'onde → Clic droit → **Exporter image** ou Capture écran (moniteur 4K + zoom).
2. Image statique : Python (Développeurs/Data)
Idéal pour traitement par lot, dimensions exactes, contrôle style, intégration pipelines.
# waveform.py import librosa, librosa.display, matplotlib.pyplot as plt, numpy as np, sys input_file = sys.argv[1] if len(sys.argv) > 1 else "audio.wav" output_file = sys.argv[2] if len(sys.argv) > 2 else "waveform.png" y, sr = librosa.load(input_file, sr=None, mono=True) # conserve sr natif duration = len(y) / sr # Config style FIG_W, FIG_H = 1920, 600 # pixels @ 100 DPI DPI = 100 BG_COLOR = '#0a0a0a' WAVE_COLOR = '#00ff88' LINE_WIDTH = 0.6 plt.figure(figsize=(FIG_W/DPI, FIG_H/DPI), dpi=DPI, facecolor=BG_COLOR) ax = plt.gca() ax.set_facecolor(BG_COLOR) librosa.display.waveshow(y, sr=sr, ax=ax, color=WAVE_COLOR, alpha=0.9, linewidth=LINE_WIDTH) ax.axis('off') plt.subplots_adjust(left=0, right=1, top=1, bottom=0) plt.savefig(output_file, dpi=DPI, facecolor=BG_COLOR, bbox_inches='tight', pad_inches=0) plt.close() print(f"Sauvé {output_file} ({FIG_W}x{FIG_H})") Exécution : `python waveform.py input.wav output.png`
Installation : `pip install librosa matplotlib numpy`
3. Forme d'onde animée : Web (p5.js / Canvas API)
Pour sites web, composants React, ou sources navigateur OBS.
// waveform-visualizer.js (Vanilla Canvas - sans deps) const canvas = document.getElementById('waveform'); const ctx = canvas.getContext('2d'); const audioCtx = new AudioContext(); let analyser, dataArray, bufferLength, source; async function init(audioUrl) { const resp = await fetch(audioUrl); const arrayBuffer = await resp.arrayBuffer(); const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer); // Dessine forme d'onde statique depuis buffer décodé const channelData = audioBuffer.getChannelData(0); // Float32Array [-1,1] const step = Math.ceil(channelData.length / canvas.width); ctx.fillStyle = '#000'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.strokeStyle = '#00ff88'; ctx.lineWidth = 1; ctx.beginPath(); for (let x = 0; x < canvas.width; x++) { let min = 1, max = -1; for (let i = 0; i < step; i++) { const val = channelData[x * step + i] || 0; if (val < min) min = val; if (val > max) max = val; } const yMin = (1 + min) * canvas.height / 2; const yMax = (1 + max) * canvas.height / 2; ctx.moveTo(x, yMin); ctx.lineTo(x, yMax); } ctx.stroke(); } init('audio.mp3'); 4. Forme d'onde animée : After Effects (Motion Designers)
- Importez audio → Glissez dans compo.
- Calque → Nouveau → **Solide** → Nommez « Forme d'onde ».
- Effets → **Générer > Spectre audio** (ou **Forme d'onde audio**).
- Calque audio : Sélectionnez votre calque audio.
- Personnalisez : **Point début/fin** (position), **Bandes fréquences** (64–128), **Hauteur max**, **Couleur**, **Options côtés** (A/B pour miroir).
- Pour circulaire : **Chemin** → Masque (Ellipse) → Propriété **Chemin** → Pickwhip vers Chemin Masque.
5. Temps réel / Moteur de jeu (Unity / Unreal / Godot)
- Unity : `AudioSource.GetSpectrumData(float[] samples, int channel, FFTWindow.BlackmanHarris)` → Mise à jour LineRenderer ou positions sommets Shader par frame.
- Unreal : Plugin **Visualisation Audio** (FFT) → Particules Niagara ou Material Parameter Collection piloté par `GetFrequencyData`.
- Godot : `AudioServer.get_bus_fft_frequency(0)` → Dessin dans `_draw()` ou mise à jour points `Line2D`.
Choisir votre voie
| Besoin | Outil | Sortie |
|---|---|---|
| Couverture podcast one-shot | Audacity / Canva | PNG/SVG |
| Lot 1000 épisodes | Python (librosa/matplotlib) | PNG/WebP |
| Animation hero site web | p5.js / Canvas API / WebGL | JS Interactif |
| Clip musical / Lyric video | After Effects (Spectre audio) | MP4/MOV |
| UI Jeu / VJing | Unity/Unreal/Godot + FFT | Temps réel GPU |