当前位置：首页 > news >正文

看见旋律 - WinUI3 实现音乐监听：47 种漂亮的数学线条形态

news 2026/7/2 1:24:20

在看见旋律 - WPF 实现音乐监听：频谱图展示-CSDN博客中，我实现了对音乐旋律的监听，把监测到的鼓点、低频通量等可视化，看到了漂亮有趣的节奏线，现在我们把它与常见的数学线条结合，让节奏影响线条灯粗细、缩放、速度、跳动。

整体处理流程：

把「音频状态 → 相位 → 采样点 → 归一化 → 绘制」串成一条线；画廊里每个格子都走这段逻辑：

// Companion.WinUI3/Rendering/MathCurveGalleryRenderer.cs · DrawTile var influence = MathCurveAudioBindings.ForEntry(entry, index, audioState); var linearPhase = audioState.CyclePhase * entry.Speed; var phase = MathCurvePhaseMapper.MapDisplayPhase(linearPhase, audioState.LoopMode); entry.Sample(phase, SampleBuffer, SampleCount); PrepareDisplaySamples(SampleBuffer, DisplayBuffer, SampleCount); ApplyBeatScalePulse(DisplayBuffer, SampleCount, audioState); DrawCurve(session, plotCenter, radiusX, radiusY, plotRect, linearPhase, audioState.LoopMode, influence); DrawTileLabel(session, entry, x, y + height - labelBand, width, labelBand);

音乐不直接改曲线公式，而是改「相位推进速度」和「视觉强度」；鼓点则触发脉冲包络：

// Companion.Core/MathCurveAudioModulator.cs · TickCore 摘录 if (driveChannel != MathCurveDriveChannel.None && isListening && frame is not null) { channelRaw = MathCurveChannelSampler.Sample(driveChannel, frame); channelNormalized = Math.Clamp(channelRaw / _channelScale, 0f, 1f); _trendEstimator.Tick(channelRaw, dt, settings); speedMultiplier = _trendEstimator.SpeedMultiplier; motionIntensity = 0.35f + channelNormalized * 0.45f; } _beatPulseTracker.Tick(dt, isListening, frame?.IsConfirmedKick ?? false, settings); _cyclePhase += dt * baseRate * speedMultiplier; // 动画相位累积

以下是 47 种漂亮的数学线条，一起来欣赏吧：