Flutter音频波形展示插件sound_waveform的使用

Flutter音频波形展示插件sound_waveform的使用

这是一个从 waveform_flutter 分支而来的新插件。此插件添加了 AnimatedWaveList 的颜色和高度参数。

使用说明

安装插件

首先，在你的 pubspec.yaml 文件中添加插件依赖：

dependencies:
  sound_waveform: ^x.x.x

然后运行 flutter pub get 来安装它。

示例代码

以下是一个简单的示例，展示了如何在应用中使用 sound_waveform 插件来展示音频波形。

主文件 (main.dart)

import 'package:flutter/material.dart';
import 'package:sound_waveform/sound_waveform.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('音频波形示例')),
        body: WaveFormExample(),
      ),
    );
  }
}

class WaveFormExample extends StatefulWidget {
  const WaveFormExample({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _WaveFormExampleState createState() => _WaveFormExampleState();
}

class _WaveFormExampleState extends State<WaveFormExample> {
  // 创建一个随机幅度流
  final Stream<Amplitude> _amplitudeStream = createRandomAmplitudeStream();

  @override
  Widget build(BuildContext context) {
    // 使用 AnimatedWaveList 显示波形
    return AnimatedWaveList(
      stream: _amplitudeStream,
      // 设置波形的颜色
      waveColor: Colors.blue,
      // 设置波形的高度
      waveHeight: 50.0,
    );
  }
}

随机幅度生成器

为了演示目的，这里创建了一个简单的随机幅度生成器。实际应用中，你可以替换为从音频文件读取的数据。

import 'dart:async';

// 定义一个用于存储振幅值的类
class Amplitude {
  final double value;
  Amplitude(this.value);
}

// 创建一个随机幅度流
Stream<Amplitude> createRandomAmplitudeStream() async* {
  while (true) {
    // 生成一个随机的振幅值
    double randomValue = (Random().nextDouble() * 100).toDouble();
    yield Amplitude(randomValue);
    await Future.delayed(Duration(milliseconds: 100));
  }
}

更多关于Flutter音频波形展示插件sound_waveform的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter音频波形展示插件sound_waveform的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


sound_waveform 是一个用于在 Flutter 中展示音频波形的插件。它可以帮助你将音频文件的波形以可视化的方式展示在应用中。虽然 sound_waveform 并不是官方维护的插件，但它是一个常用的第三方库，可以帮助你实现音频波形的展示。

安装 sound_waveform 插件

首先，你需要在 pubspec.yaml 文件中添加 sound_waveform 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  sound_waveform: ^1.0.0  # 请根据最新版本进行更新

然后运行 flutter pub get 来安装依赖。

使用 sound_waveform 插件

以下是一个简单的示例，展示如何使用 sound_waveform 插件来展示音频波形：

import 'package:flutter/material.dart';
import 'package:sound_waveform/sound_waveform.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sound Waveform Example'),
        ),
        body: Center(
          child: SoundWaveform(
            sample: generateSample(), // 生成音频样本
            height: 100,
            width: 300,
            backgroundColor: Colors.grey[300],
            waveColor: Colors.blue,
          ),
        ),
      ),
    );
  }

  // 生成一个简单的音频样本
  List<double> generateSample() {
    return List.generate(100, (index) => (index % 10) / 10.0);
  }
}

参数说明

  • sample: 一个 List<double> 类型的音频样本数据，表示音频波形。
  • height: 波形图的高度。
  • width: 波形图的宽度。
  • backgroundColor: 波形图的背景颜色。
  • waveColor: 波形图的颜色。

生成音频样本

在实际应用中，你可能需要从音频文件中提取波形数据。你可以使用其他音频处理库（如 flutter_sound 或 just_audio）来解码音频文件并生成波形数据。

示例：从音频文件中提取波形

以下是一个简单的示例，展示如何从音频文件中提取波形数据并展示：

import 'package:flutter/material.dart';
import 'package:sound_waveform/sound_waveform.dart';
import 'package:flutter_sound/flutter_sound.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sound Waveform Example'),
        ),
        body: AudioWaveform(),
      ),
    );
  }
}

class AudioWaveform extends StatefulWidget {
  [@override](/user/override)
  _AudioWaveformState createState() => _AudioWaveformState();
}

class _AudioWaveformState extends State<AudioWaveform> {
  List<double> _waveformData = [];
  final FlutterSoundPlayer _audioPlayer = FlutterSoundPlayer();

  [@override](/user/override)
  void initState() {
    super.initState();
    _loadAudioWaveform();
  }

  Future<void> _loadAudioWaveform() async {
    // 加载音频文件并提取波形数据
    // 注意：这里只是一个示例，实际应用中需要使用音频解码库来提取波形数据
    await _audioPlayer.openAudioSession();
    await _audioPlayer.startPlayer(fromURI: 'path_to_your_audio_file.mp3');

    // 生成一个简单的波形数据（实际应用中需要从音频文件中提取）
    setState(() {
      _waveformData = List.generate(100, (index) => (index % 10) / 10.0);
    });
  }

  [@override](/user/override)
  void dispose() {
    _audioPlayer.closeAudioSession();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: SoundWaveform(
        sample: _waveformData,
        height: 100,
        width: 300,
        backgroundColor: Colors.grey[300],
        waveColor: Colors.blue,
      ),
    );
  }
}
回到顶部