HarmonyOS鸿蒙Next开发者技术支持-听歌识曲水波纹特效案例

一、项目概述

1.1 功能特性

• 基于HarmonyOS 4.0+ API实现
• 音频频谱可视化水波纹效果
• 实时音频分析处理
• 可自定义的水波纹参数
• 高性能Canvas渲染
• 支持麦克风音频输入

二、架构设计

2.1 核心组件结构

水波纹特效系统
├── AudioWaveEffect.ets (主组件)
├── WaveCanvas.ets (Canvas渲染)
├── AudioAnalyzer.ets (音频分析)
├── WaveGenerator.ets (波纹生成)
└── EffectManager.ets (特效管理)

2.2 数据模型定义

// WaveEffectModel.ets
// 水波纹配置
export interface WaveConfig {
  waveCount: number;          // 波纹数量
  waveSpeed: number;         // 波纹速度
  waveWidth: number;         // 波纹宽度
  waveHeight: number;        // 波纹高度
  waveOpacity: number;       // 波纹透明度
  colorPalette: string[];    // 颜色调色板
  gradientEnabled: boolean;  // 是否启用渐变
  audioSensitivity: number;  // 音频敏感度
  responseType: 'frequency' | 'amplitude' | 'both'; // 响应类型
}

// 音频分析结果
export interface AudioAnalysis {
  frequencies: Float32Array;  // 频率数据
  amplitudes: Float32Array;   // 振幅数据
  volume: number;            // 总体音量
  frequencyBands: number[];  // 频带数据
  timestamp: number;         // 时间戳
}

// 波纹点数据
export interface WavePoint {
  x: number;
  y: number;
  radius: number;
  opacity: number;
  color: string;
  speed: number;
  life: number;  // 生命周期
  maxLife: number;
  frequency: number; // 关联的频率
}

这里定义了水波纹特效系统的核心数据模型。WaveConfig接口包含所有可配置的水波纹参数，如波纹数量、速度、宽度、高度等。AudioAnalysis接口存储音频分析结果，包括频率、振幅、音量等数据。WavePoint接口表示单个波纹点的状态，用于Canvas渲染。

三、核心实现

3.1 音频分析器

// AudioAnalyzer.ets
export class AudioAnalyzer {
  private audioContext: audio.AudioRenderer | null = null;
  private analyserNode: audio.AudioCapturer | null = null;
  private frequencyData: Float32Array = new Float32Array(1024);
  private timeDomainData: Float32Array = new Float32Array(1024);
  private isAnalyzing: boolean = false;
  private animationFrameId: number = 0;
  private sampleRate: number = 44100;
  private fftSize: number = 2048;
  
  // 分析回调函数
  private onAnalysisCallback: ((analysis: AudioAnalysis) => void) | null = null;
  
  // 初始化音频分析器
  async initialize(): Promise<boolean> {
    try {
      // 获取音频权限
      const permissionGranted = await this.requestAudioPermission();
      if (!permissionGranted) {
        console.error('音频权限被拒绝');
        return false;
      }
      
      // 创建音频上下文
      const audioStreamInfo: audio.AudioStreamInfo = {
        samplingRate: audio.AudioSamplingRate.SAMPLE_RATE_44100,
        channels: audio.AudioChannel.STEREO,
        sampleFormat: audio.AudioSampleFormat.SAMPLE_FORMAT_F32LE,
        encodingType: audio.AudioEncodingType.ENCODING_TYPE_RAW
      };
      
      this.audioContext = audio.createAudioRenderer(audioStreamInfo);
      
      // 创建音频捕获器
      const audioCapturerInfo: audio.AudioCapturerInfo = {
        source: audio.AudioSourceType.AUDIO_SOURCE_TYPE_MIC,
        capturerFlags: 0
      };
      
      this.analyserNode = audio.createAudioCapturer(audioCapturerInfo);
      
      await this.audioContext.start();
      await this.analyserNode.start();
      
      return true;
    } catch (error) {
      console.error('音频分析器初始化失败:', error);
      return false;
    }
  }

AudioAnalyzer类负责音频采集和分析。initialize方法初始化音频系统，请求麦克风权限，创建AudioRenderer和AudioCapturer。audioStreamInfo定义音频流参数（采样率、声道、格式），audioCapturerInfo配置音频捕获参数（源为麦克风）。

// 开始音频分析
  startAnalysis(callback: (analysis: AudioAnalysis) => void): void {
    if (this.isAnalyzing) return;
    
    this.onAnalysisCallback = callback;
    this.isAnalyzing = true;
    
    // 开始分析循环
    this.analysisLoop();
  }
  
  // 音频分析循环
  private analysisLoop(): void {
    if (!this.isAnalyzing) return;
    
    this.processAudioData();
    
    this.animationFrameId = requestAnimationFrame(() => {
      this.analysisLoop();
    });
  }
  
  // 处理音频数据
  private async processAudioData(): Promise<void> {
    if (!this.analyserNode || !this.onAnalysisCallback) return;
    
    try {
      // 读取音频数据
      const buffer = await this.analyserNode.read(this.fftSize);
      
      if (buffer && buffer.byteLength > 0) {
        // 转换为Float32数组
        const dataArray = new Float32Array(buffer);
        
        // 计算频率数据
        this.calculateFrequencyData(dataArray);
        
        // 计算振幅数据
        this.calculateAmplitudeData(dataArray);
        
        // 计算总体音量
        const volume = this.calculateVolume(dataArray);
        
        // 计算频带数据
        const frequencyBands = this.calculateFrequencyBands(this.frequencyData);
        
        // 回调分析结果
        this.onAnalysisCallback({
          frequencies: this.frequencyData,
          amplitudes: this.timeDomainData,
          volume: volume,
          frequencyBands: frequencyBands,
          timestamp: Date.now()
        });
      }
    } catch (error) {
      console.warn('音频数据处理失败:', error);
    }
  }

startAnalysis方法启动音频分析循环，注册回调函数。analysisLoop通过requestAnimationFrame实现循环分析。processAudioData方法读取音频数据，计算频率、振幅、音量和频带数据，然后通过回调函数传递分析结果。

// 计算频率数据
  private calculateFrequencyData(data: Float32Array): void {
    // 这里实现FFT（快速傅里叶变换）计算频率
    // 简化实现：直接使用原始数据
    for (let i = 0; i < Math.min(data.length, this.frequencyData.length); i++) {
      this.frequencyData[i] = Math.abs(data[i]) * 100;
    }
  }
  
  // 计算振幅数据
  private calculateAmplitudeData(data: Float32Array): void {
    for (let i = 0; i < Math.min(data.length, this.timeDomainData.length); i++) {
      this.timeDomainData[i] = data[i];
    }
  }
  
  // 计算总体音量
  private calculateVolume(data: Float32Array): number {
    let sum = 0;
    for (let i = 0; i < data.length; i++) {
      sum += data[i] * data[i];
    }
    const rms = Math.sqrt(sum / data.length);
    return Math.min(rms * 100, 1.0);
  }
  
  // 计算频带数据
  private calculateFrequencyBands(frequencyData: Float32Array): number[] {
    const bands = [0, 0, 0, 0, 0, 0, 0]; // 7个频带
    
    // 将频率数据分组到不同频带
    const bandSize = Math.floor(frequencyData.length / bands.length);
    
    for (let i = 0; i < bands.length; i++) {
      let sum = 0;
      const start = i * bandSize;
      const end = Math.min((i + 1) * bandSize, frequencyData.length);
      
      for (let j = start; j < end; j++) {
        sum += frequencyData[j];
      }
      
      bands[i] = sum / (end - start);
    }
    
    return bands;
  }

calculateFrequencyData方法计算频率数据（简化实现，实际应使用FFT）。calculateAmplitudeData方法计算振幅数据。calculateVolume方法计算RMS（均方根）值作为总体音量。calculateFrequencyBands方法将频率数据分组到7个频带，用于控制不同颜色的波纹。

// 停止音频分析
  stopAnalysis(): void {
    this.isAnalyzing = false;
    
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
      this.animationFrameId = 0;
    }
    
    if (this.analyserNode) {
      this.analyserNode.stop();
    }
    
    if (this.audioContext) {
      this.audioContext.stop();
    }
    
    this.onAnalysisCallback = null;
  }
  
  // 请求音频权限
  private async requestAudioPermission(): Promise<boolean> {
    try {
      const permissions: Array<Permissions> = [
        'ohos.permission.MICROPHONE'
      ];
      
      const grantStatus = await abilityAccessCtrl.requestPermissionsFromUser(
        globalThis.abilityContext,
        permissions
      );
      
      return grantStatus.authResults.every(result => result === 0);
    } catch (error) {
      console.error('权限请求失败:', error);
      return false;
    }
  }
}

stopAnalysis方法停止音频分析，清理资源。requestAudioPermission方法请求麦克风权限，使用abilityAccessCtrl API检查并请求权限，确保应用有权访问麦克风。

3.2 水波纹生成器

// WaveGenerator.ets
export class WaveGenerator {
  private waves: WavePoint[] = [];
  private config: WaveConfig;
  private canvasWidth: number = 0;
  private canvasHeight: number = 0;
  private centerX: number = 0;
  private centerY: number = 0;
  private time: number = 0;
  
  constructor(config: WaveConfig) {
    this.config = config;
    this.initializeWaves();
  }
  
  // 初始化波纹
  private initializeWaves(): void {
    this.waves = [];
    
    for (let i = 0; i < this.config.waveCount; i++) {
      this.waves.push(this.createWavePoint(i));
    }
  }
  
  // 创建波纹点
  private createWavePoint(index: number): WavePoint {
    const angle = (index / this.config.waveCount) * Math.PI * 2;
    const distance = 20 + Math.random() * 50;
    
    return {
      x: this.centerX + Math.cos(angle) * distance,
      y: this.centerY + Math.sin(angle) * distance,
      radius: 0,
      opacity: 0,
      color: this.getColorByIndex(index),
      speed: 1 + Math.random() * this.config.waveSpeed,
      life: 0,
      maxLife: 100 + Math.random() * 200,
      frequency: index % 7 // 关联到7个频带
    };
  }

WaveGenerator类负责生成和管理水波纹点。constructor初始化配置和波纹数组。initializeWaves方法创建指定数量的波纹点。createWavePoint方法创建单个波纹点，根据索引计算位置、颜色和属性，使波纹点均匀分布在圆周上。

// 根据索引获取颜色
  private getColorByIndex(index: number): string {
    if (this.config.colorPalette && this.config.colorPalette.length > 0) {
      return this.config.colorPalette[index % this.config.colorPalette.length];
    }
    
    // 默认颜色调色板
    const defaultColors = [
      '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', 
      '#FFEAA7', '#DDA0DD', '#98D8C8'
    ];
    
    return defaultColors[index % defaultColors.length];
  }
  
  // 更新波纹
  update(deltaTime: number, audioAnalysis: AudioAnalysis | null): void {
    this.time += deltaTime;
    
    // 更新现有波纹
    for (let i = this.waves.length - 1; i >= 0; i--) {
      const wave = this.waves[i];
      
      // 更新生命周期
      wave.life += deltaTime * wave.speed;
      
      if (wave.life > wave.maxLife) {
        // 重新生成波纹
        this.waves[i] = this.createWavePoint(i);
        continue;
      }
      
      // 计算生命周期进度
      const lifeProgress = wave.life / wave.maxLife;
      
      // 更新半径（从小到大再到小）
      wave.radius = this.calculateRadius(lifeProgress);
      
      // 更新透明度
      wave.opacity = this.calculateOpacity(lifeProgress);
      
      // 音频响应
      if (audioAnalysis) {
        this.applyAudioEffect(wave, audioAnalysis);
      }
      
      // 添加波动效果
      this.applyWaveMotion(wave);
    }
  }

getColorByIndex方法根据索引从调色板获取颜色，支持自定义颜色数组。update方法更新所有波纹点的状态，包括生命周期、半径、透明度和音频响应。生命周期结束后重新生成波纹点。

// 计算半径
  private calculateRadius(lifeProgress: number): number {
    // 使用正弦函数创建平滑的半径变化
    const progress = lifeProgress * Math.PI;
    return Math.sin(progress) * this.config.waveHeight;
  }
  
  // 计算透明度
  private calculateOpacity(lifeProgress: number): number {
    // 透明度在生命周期中间最高
    const progress = lifeProgress * Math.PI;
    return Math.sin(progress) * this.config.waveOpacity;
  }
  
  // 应用音频效果
  private applyAudioEffect(wave: WavePoint, analysis: AudioAnalysis): void {
    if (this.config.responseType === 'frequency' || this.config.responseType === 'both') {
      // 频率响应
      const frequencyValue = analysis.frequencyBands[wave.frequency % analysis.frequencyBands.length] || 0;
      wave.radius += frequencyValue * this.config.audioSensitivity * 10;
    }
    
    if (this.config.responseType === 'amplitude' || this.config.responseType === 'both') {
      // 振幅响应
      wave.opacity += analysis.volume * this.config.audioSensitivity * 0.5;
      wave.opacity = Math.min(wave.opacity, 1);
    }
  }
  
  // 应用波动效果
  private applyWaveMotion(wave: WavePoint): void {
    const time = this.time * 0.001;
    const waveSpeed = 0.5;
    
    // 添加轻微的波动效果
    wave.x += Math.sin(time + wave.frequency) * waveSpeed;
    wave.y += Math.cos(time + wave.frequency) * waveSpeed;
  }
  
  // 获取所有波纹
  getWaves(): WavePoint[] {
    return this.waves;
  }
  
  // 设置画布尺寸
  setCanvasSize(width: number, height: number): void {
    this.canvasWidth = width;
    this.canvasHeight = height;
    this.centerX = width / 2;
    this.centerY = height / 2;
    
    // 重新初始化波纹
    this.initializeWaves();
  }
}

calculateRadius和calculateOpacity方法使用正弦函数计算平滑变化的半径和透明度。applyAudioEffect方法根据音频分析数据调整波纹，频率影响半径，振幅影响透明度。applyWaveMotion方法添加轻微的波动效果，使波纹更生动。setCanvasSize方法更新画布尺寸并重新初始化波纹。

3.3 Canvas水波纹渲染器

// WaveCanvas.ets
@Component
export struct WaveCanvas {
  private canvasRef: CanvasRenderingContext2D | null = null;
  private canvasWidth: number = 300;
  private canvasHeight: number = 300;
  private animationId: number = 0;
  private lastTime: number = 0;
  
  [@State](/user/State) private isAnimating: boolean = false;
  [@State](/user/State) private waves: WavePoint[] = [];
  
  [@Prop](/user/Prop) config: WaveConfig = defaultConfig;
  [@Prop](/user/Prop) audioAnalysis: AudioAnalysis | null = null;
  [@Prop](/user/Prop) onCanvasReady?: (context: CanvasRenderingContext2D) => void;
  
  private waveGenerator: WaveGenerator = new WaveGenerator(this.config);
  
  aboutToAppear() {
    this.waveGenerator.setCanvasSize(this.canvasWidth, this.canvasHeight);
  }

WaveCanvas组件使用Canvas 2D API渲染水波纹效果。canvasRef存储Canvas上下文，animationId用于控制动画循环。@State装饰器管理组件状态，@Prop接收配置和音频数据。waveGenerator实例在aboutToAppear中初始化。

// Canvas就绪回调
  private onCanvasReadyCallback(context: CanvasRenderingContext2D): void {
    this.canvasRef = context;
    
    // 获取画布尺寸
    const canvas = this.canvasRef.canvas;
    this.canvasWidth = canvas.width;
    this.canvasHeight = canvas.height;
    
    this.waveGenerator.setCanvasSize(this.canvasWidth, this.canvasHeight);
    
    // 开始动画
    this.startAnimation();
    
    // 通知父组件
    this.onCanvasReady?.(context);
  }
  
  // 开始动画
  private startAnimation(): void {
    if (this.isAnimating) return;
    
    this.isAnimating = true;
    this.lastTime = performance.now();
    this.animationLoop();
  }
  
  // 动画循环
  private animationLoop(): void {
    if (!this.isAnimating || !this.canvasRef) return;
    
    const currentTime = performance.now();
    const deltaTime = currentTime - this.lastTime;
    this.lastTime = currentTime;
    
    // 更新波纹
    this.waveGenerator.update(deltaTime, this.audioAnalysis);
    this.waves = this.waveGenerator.getWaves();
    
    // 渲染
    this.render();
    
    this.animationId = request