إنشاء wave على المقطع الصوتي في فلاتر | Create a wave on an audio clip in Flutter

إنشاء wave على المقطع الصوتي في فلاتر 

wave واحد من العناصر التي تشغل بال الكثير من المطورين حيث يسعى الاغلب منا الى اضافتها في تطبيقة اذا كان التطبيق يحتوي على نقاطع صوتيه قصيره او غيره ونحن في هذه المقالة سوف نشارك معكم طريقتين يمكنك من خلالهم انشاء ال wave  البسيط بكل سهوله وسوف نستخدم مكتبتين للقيام بهذه العملية كل مكتبة منهم كلها الخصائص المعينه التي تقدمها وليس كل المكتبات بنفس الخصائص ويمكنك الاختيار بينهم في الافضل وفي كلا الاحوال كلا المكتبتين يقدمان نفس الغرض تقريبا مع اختلافات في الاستخدام بين كل مكتبة والاخرى .

يحتاج المرء إلى معرفة ومهارات في تطوير البرمجيات للعمل كمطور للهواتف المحمولة. يمكن أن يساعدك الحصول على درجة جامعية أو درجة البكالوريوس في علوم الكمبيوتر أو مجال ذي صلة على تحسين هذه المواهب (أنظمة المعلومات الإدارية ، على سبيل المثال). سيساعدك حضور واحد أو أكثر من برامج معسكرات تدريب المستجدين على الترميز التي يتم إنشاؤها لتثقيف المطورين الطموحين على زيادة محاولاتك لفهم تطوير تطبيقات الأجهزة المحمولة.

فيما يلي بعض المتطلبات الأساسية التي ستحتاج إليها للبدء في تطوير البرامج بنفسك: معرفة مبادئ تصميم البرامج الآمن والموثوق. معرفة دورة التصميم - التطوير - الاختبار - الإصدار - الصيانة ، بالإضافة إلى دعم دورة الحياة على المدى الطويل والصيانة ، في سياق تطوير البرمجيات ، التعرض لبعض منهجيات التطوير وفهمها (مثل Agile و Scrum وغيرها) بالإضافة إلى بيئات التطوير

dependencies:

  // style 1 (local)

  audio_waveforms: ^0.1.5+1

  // style 2 (internet)

 voice_message_package: ^0.0.74

How to Create wave audio in Flutter

يمكنك استخدام المكتبة التاليه لتنفيذ الشكل الاول وهذا هو الكود الخاص بها بشكل كامل يمكنك اخذ الكود والتعديل عليه حتى يكون متوافق مع التصميم الذي تقوم به في تطبيقك والامر بسيط جدا وكل الخطوات واضحه بالكود التالي حتى نسهل عليكم عملية التعامل مع الwave بشكل مبسط جدا جدا .

ui.dart

import 'dart:io';
import 'package:audio_waveforms/audio_waveforms.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:untitled/pages/chat_bubble.dart';


class WaveTest extends StatefulWidget {
  const WaveTest({Key? key}) : super(key: key);

  @override
  State<WaveTest> createState() => _WaveTestState();
}

class _WaveTestState extends State<WaveTest> {
  PlayerController playerController1 = PlayerController();
  late Directory appDirectory;
  String? path;

  Future<ByteData> _loadAsset(String path) async {
    return await rootBundle.load(path);
  }

  void _preparePlayers(String voice) async {
    appDirectory = await getApplicationDocumentsDirectory();
    final file1 = File('${appDirectory.path}/audio1.mp3');
    await file1.writeAsBytes(
        (await _loadAsset(voice)).buffer.asUint8List());
    playerController1.preparePlayer(file1.path);
  }

  void _playOrPausePlayer(PlayerController controller) async {
    controller.playerState == PlayerState.playing
        ? await controller.pausePlayer()
        : await controller.startPlayer(finishMode: FinishMode.loop);
  }

  @override
  void initState() {
    super.initState();
    _preparePlayers('assets/audio1.mp3');
    playerController1.addListener(() async {
      if (mounted) setState(() {});
    });
  }

  @override
  void dispose() {
    playerController1.dispose();
    playerController1.stopPlayer();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (playerController1.playerState != PlayerState.stopped) ...[
              WaveBubble(
                playerController: playerController1,
                isPlaying: playerController1.playerState == PlayerState.playing,
                onTap: () => _playOrPausePlayer(playerController1),
              ),
            ],
            if (playerController1.playerState != PlayerState.stopped) ...[
              WaveBubble(
                playerController: playerController1,
                isPlaying: playerController1.playerState == PlayerState.playing,
                onTap: () => _playOrPausePlayer(playerController1),
                isSender: true,
              ),
            ],
            IconButton(onPressed: (){
              setState(() {
                _preparePlayers('assets/audio2.mp3');
                changeSound();
              });
            },
                icon: const Icon(Icons.abc)),
            IconButton(onPressed: (){
              setState(() {
                _preparePlayers('assets/audio3.mp3');
                changeSound();
              });
            },
                icon: const Icon(Icons.add)),
          ],
        ),
      ),
    );
  }

  void changeSound() {
    playerController1.stopPlayer();
    playerController1.addListener(() async {
      if (mounted) setState(() {});
    });
  }
}

تغيير شريط المقطع الصوتي الى wave

في هذا الجزء قمنا باستخدام الجزء الثاني من المكتبة والذي يعد الابسط من ناحية التعامل مع الصوتيات ولكن يمكنك استخدام اي مكتبة منهم كما هو موضح بالصورة الخاصه بالمقال فكل مكتبة لها التصميم الخاص بها والمكتبة الاولى تعد الاقوى ولكن قد يقابل البعض منكم مشاكل في صعوبة التعامل معها