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

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

Demo

Voicey是一个用于在聊天中播放语音消息的Flutter插件。你还可以通过拖动来调节音量。

平台支持

Android iOS MacOS Web
✔️ ✔️ ✔️ ✔️

安装

首先，在你的pubspec.yaml文件中添加audio_wave_url_package：

dependencies:
  audio_wave_url_package: <latest-version>

接下来，从pub获取包：

flutter pub get

如何使用

你需要将音频文件的源地址传递给VoiceMessage小部件：

VoiceMessage(
  audioSrc: 'YOUR_AUDIO_URL', // 替换为你的音频URL
  played: false, // 是否显示已播放标志
  me: true, // 设置消息的方向
  onPlay: () {}, // 当语音播放时执行的操作
);

待办事项

  • [✔️] 通过拖动声音噪声来实现音量调节。
  • ❌ 添加2倍播放速度。
  • ❌ 根据实际语音噪声生成噪声。
  • ❌ 动态调整语音小部件的大小。
  • ❌ 动态调整噪声的大小。

许可证

该软件受MIT许可证保护。查看 LICENSE。

关于我

你可以找到我：Portfolio

示例代码

// example/lib/main.dart
import 'package:audio_wave_url/pages/chat_page.dart';
import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';

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

///
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) => Sizer(
        builder: (_, __, ___) => const MaterialApp(
          debugShowCheckedModeBanner: false,
          home: ChatPage(),
        ),
      );
}

示例 ChatPage

// example/lib/pages/chat_page.dart
import 'package:flutter/material.dart';
import 'package:audio_wave_url_package/audio_wave_url_package.dart';

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

class _ChatPageState extends State<ChatPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Wave Example'),
      ),
      body: Center(
        child: VoiceMessage(
          audioSrc: 'YOUR_AUDIO_URL', // 替换为你的音频URL
          played: false, // 是否显示已播放标志
          me: true, // 设置消息的方向
          onPlay: () {
            print("Playing audio...");
          },
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何使用 audio_wave_url_package 插件在 Flutter 中展示音频波形的示例代码。需要注意的是，audio_wave_url_package 并非一个广泛认知的官方或流行的 Flutter 插件，因此我假设你提到的插件类似于 flutter_audio_waveform 或其他可以处理音频波形展示的插件。如果 audio_wave_url_package 是一个特定或自定义的插件，请根据实际的插件文档进行调整。

以下示例基于一个假设的音频波形展示插件 flutter_audio_waveform，该插件允许你通过 URL 加载音频文件并展示其波形。如果 audio_wave_url_package 插件的 API 类似，你可以参考以下代码。

首先，确保在 pubspec.yaml 文件中添加依赖项（这里以 flutter_audio_waveform 作为示例，请替换为实际的插件名称）：

dependencies:
  flutter:
    sdk: flutter
  flutter_audio_waveform: ^x.y.z  # 替换为实际版本号

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

接下来，在 Dart 代码中使用该插件：

import 'package:flutter/material.dart';
import 'package:flutter_audio_waveform/flutter_audio_waveform.dart';  // 替换为实际插件的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Audio Waveform Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AudioWaveformScreen(),
    );
  }
}

class AudioWaveformScreen extends StatefulWidget {
  @override
  _AudioWaveformScreenState createState() => _AudioWaveformScreenState();
}

class _AudioWaveformScreenState extends State<AudioWaveformScreen> {
  final String audioUrl = 'https://example.com/path/to/your/audiofile.mp3';  // 替换为你的音频文件URL

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Waveform Demo'),
      ),
      body: Center(
        child: AudioWaveform(
          audioUrl: audioUrl,
          color: Colors.blue,  // 波形颜色
          backgroundColor: Colors.grey[200]!,  // 背景颜色
          height: 200.0,  // 波形图高度
          progressColor: Colors.red,  // 播放进度颜色
          loadingIndicatorColor: Colors.yellow,  // 加载指示器颜色
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，该应用包含一个 AudioWaveform 小部件，用于展示指定 URL 的音频文件的波形。你可以根据需要调整颜色、高度等参数。

注意：

  1. 如果 audio_wave_url_package 是一个不同的插件，请参考其官方文档以获取正确的使用方法和参数。
  2. 确保音频文件的 URL 是可访问的，并且音频文件格式是插件所支持的。
  3. 根据需要处理音频加载和播放的错误处理逻辑。

如果你使用的是自定义或特定版本的插件，并且需要更详细的帮助，请查阅该插件的官方文档或仓库。

回到顶部