패키지, 저장소 및 앱 카테고리 검색

패키지 상세v0.0.8

social_media_audio_recorder

다른 소셜 미디어처럼 애니메이션된 음성 녹음기를 구축하는 데 사용되는 플러터 패키지입니다.

AndroidiOS
30일 다운로드
43
좋아요
27
Pub 점수
130

패키지 설치

flutter pub add social_media_audio_recorder

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

인기 있는 소셜 미디어 플랫폼에서 볼 수 있는 애니메이션 음성 녹음기와 유사하게 만들기 위해 설계된 Flutter 패키지입니다. 부드러운 애니메이션을 갖춘 시각적으로 매력적인 녹음 인터페이스를 제공하여 상호작용형 오디오 콘텐츠에 중점을 두는 앱에 이상적입니다. 이 패키지는 Android 및 iOS 모두를 지원하여 크로스플랫폼 호환성을 보장합니다. 개발자는 쉽게 앱에 통합하여 직관적인 오디오 녹음 기능으로 사용자 경험을 향상시킬 수 있습니다.

사용 사례

  • 소셜 미디어 앱 개발
  • 음성 메모 공유 기능
  • 인터랙티브 오디오 콘텐츠 제작
  • 실시간 녹화 애니메이션
  • 모바일 앱 오디오 통합

주요 기능

  • 애니메이션 음성 레코더 UI
  • 크로스 플랫폼 지원 (Android 및 iOS)
  • Flutter와의 간단한 통합
  • 실시간 녹화 시각화
  • 사용자 정의 가능한 녹음 인터페이스

적합한 대상

  • 소셜 미디어 앱을 개발하는 개발자
  • 매력적인 오디오 상호작용을 필요로 하는 앱
  • 다양한 미디어 기능에 중점을 둔 플러터 프로젝트
  • 음성 기반 콘텐츠 플랫폼의 제작자
  • 사용 가능한 오디오 컴포넌트를 찾는 모바일 앱 팀

고려 사항

  • 마이크 접근 권한이 필요합니다
  • 브랜드 일치를 위해 추가 스타일링이 필요할 수 있습니다
  • 핵심 애니메이션을 넘어서는 사용자 정의가 제한적
  • 플랫폼별 오디오 권한에 따라 달라집니다
  • 간단한 녹음 워크플로우에 가장 적합

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

https://user-images.githubusercontent.com/75131816/222947676-e48a8e88-4b5f-4847-ae65-3ca40145b53c.mp4

Android
  1. For Permission Handle:

Upgrade pre 1.12 Android projects

Since version 4.4.0 this plugin is implemented using the Flutter 1.12 Android plugin APIs. Unfortunately this means App developers also need to migrate their Apps to support the new Android infrastructure. You can do so by following the Upgrading pre 1.12 Android projects migration guide. Failing to do so might result in unexpected behaviour. Most common known error is the permission_handler not returning after calling the .request() method on a permission.

AndroidX

As of version 3.1.0 the permission_handler plugin switched to the AndroidX version of the Android Support Libraries. This means you need to make sure your Android project is also upgraded to support AndroidX. Detailed instructions can be found here.

The TL;DR version is:

  1. Add the following to your "gradle.properties" file:
android.useAndroidX=true
android.enableJetifier=true
  1. Make sure you set the compileSdkVersion in your "android/app/build.gradle" file to 33:
android {
  compileSdkVersion 33
  ...
}
  1. Make sure you replace all the android. dependencies to their AndroidX counterparts (a full list can be found here).

Add permissions to your AndroidManifest.xml file. There's a debug, main and profile version which are chosen depending on how you start your app. In general, it's sufficient to add permission only to the main version. Here's an example AndroidManifest.xml with a complete list of all possible permissions.

  1. For Record Permission:
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!-- Optional, you'll have to check this permission by yourself. -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  • min SDK: 19 (maybe higher => encoder dependent)
  1. For Vibrate Permission:

    Make sure you add the following permissions to your Android Manifest

    <uses-permission android:name="android.permission.VIBRATE"/>
    
iOS
  1. For Permission Handle:

    Add permission to your Info.plist file. Here's an example Info.plist with a complete list of all possible permissions.

    IMPORTANT: You will have to include all permission options when you want to submit your App. This is because the permission_handler plugin touches all different SDKs and because the static code analyser (run by Apple upon App submission) detects this and will assert if it cannot find a matching permission option in the Info.plist. More information about this can be found here.

    The permission_handler plugin use [macros](https://github.com/Baseflow/flutter-permission- handler/blob/master/permission_handler_apple/ios/Classes/PermissionHandlerEnums.h) to control whether a permission is enabled.

    You must list permission you want to use in your application :

  2. Add the following to your Podfile file:

    post_install do |installer|
      installer.pods_project.targets.each do |target|
        ... # Here are some configurations automatically generated by flutter
    
        # Start of the permission_handler configuration
        target.build_configurations.each do |config|
    
          # You can enable the permissions needed here. For example to enable camera
          # permission, just remove the `#` character in front so it looks like this:
          #
          # ## dart: PermissionGroup.camera
          # 'PERMISSION_CAMERA=1'
          #
          #  Preprocessor definitions can be found in: https://github.com/Baseflow/flutter-permission-handler/blob/master/permission_handler_apple/ios/Classes/PermissionHandlerEnums.h
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
            '$(inherited)',
    
            ## dart: PermissionGroup.calendar
            # 'PERMISSION_EVENTS=1',
    
            ## dart: PermissionGroup.reminders
            # 'PERMISSION_REMINDERS=1',
    
            ## dart: PermissionGroup.contacts
            # 'PERMISSION_CONTACTS=1',
    
            ## dart: PermissionGroup.camera
            # 'PERMISSION_CAMERA=1',
    
            ## dart: PermissionGroup.microphone
            # 'PERMISSION_MICROPHONE=1',
    
            ## dart: PermissionGroup.speech
            # 'PERMISSION_SPEECH_RECOGNIZER=1',
    
            ## dart: PermissionGroup.photos
            # 'PERMISSION_PHOTOS=1',
    
            ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
            # 'PERMISSION_LOCATION=1',
           
            ## dart: PermissionGroup.notification
            # 'PERMISSION_NOTIFICATIONS=1',
    
            ## dart: PermissionGroup.mediaLibrary
            # 'PERMISSION_MEDIA_LIBRARY=1',
    
            ## dart: PermissionGroup.sensors
            # 'PERMISSION_SENSORS=1',   
            
            ## dart: PermissionGroup.bluetooth
            # 'PERMISSION_BLUETOOTH=1',
    
            ## dart: PermissionGroup.appTrackingTransparency
            # 'PERMISSION_APP_TRACKING_TRANSPARENCY=1',
    
            ## dart: PermissionGroup.criticalAlerts
            # 'PERMISSION_CRITICAL_ALERTS=1'
          ]
    
        end 
        # End of the permission_handler configuration
      end
    end
    
  3. Remove the # character in front of the permission you do want to use. For example if you need access to the calendar make sure the code looks like this:

            ## dart: PermissionGroup.calendar
            'PERMISSION_EVENTS=1',
    
  4. Delete the corresponding permission description in Info.plist e.g. when you don't need camera permission, just delete 'NSCameraUsageDescription' The following lists the relationship between Permission and The key of Info.plist:

    Permission Info.plist Macro
    PermissionGroup.calendar NSCalendarsUsageDescription PERMISSION_EVENTS
    PermissionGroup.reminders NSRemindersUsageDescription PERMISSION_REMINDERS
    PermissionGroup.contacts NSContactsUsageDescription PERMISSION_CONTACTS
    PermissionGroup.camera NSCameraUsageDescription PERMISSION_CAMERA
    PermissionGroup.microphone NSMicrophoneUsageDescription PERMISSION_MICROPHONE
    PermissionGroup.speech NSSpeechRecognitionUsageDescription PERMISSION_SPEECH_RECOGNIZER
    PermissionGroup.photos NSPhotoLibraryUsageDescription PERMISSION_PHOTOS
    PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse NSLocationUsageDescription, NSLocationAlwaysAndWhenInUseUsageDescription, NSLocationWhenInUseUsageDescription PERMISSION_LOCATION
    PermissionGroup.notification PermissionGroupNotification PERMISSION_NOTIFICATIONS
    PermissionGroup.mediaLibrary NSAppleMusicUsageDescription, kTCCServiceMediaLibrary PERMISSION_MEDIA_LIBRARY
    PermissionGroup.sensors NSMotionUsageDescription PERMISSION_SENSORS
    PermissionGroup.bluetooth NSBluetoothAlwaysUsageDescription, NSBluetoothPeripheralUsageDescription PERMISSION_BLUETOOTH
    PermissionGroup.appTrackingTransparency NSUserTrackingUsageDescription PERMISSION_APP_TRACKING_TRANSPARENCY
    PermissionGroup.criticalAlerts PermissionGroupCriticalAlerts PERMISSION_CRITICAL_ALERTS
  5. Clean & Rebuild

  6. For Record Permission:

 <key>NSMicrophoneUsageDescription</key>
 <string>We need to access to the microphone to record audio file</string>
  • min SDK: 11.0

Usage

For init path

import 'package:social_media_audio_recorder/social_media_audio_recorder.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SocialMediaFilePath.init();

  runApp(const MyApp());
}

User RecordButton

import 'package:flutter/material.dart';
import 'package:social_media_audio_recorder/social_media_audio_recorder.dart';
import 'package:voice_message_package/voice_message_package.dart';

class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
   AnimationController? controller;

   String filepath = "";
   bool readOnly = false;
   @override
   void initState() {
      controller = AnimationController(
         vsync: this,
         duration: const Duration(milliseconds: 600),
      );

      super.initState();
   }

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         backgroundColor: Colors.black,
         body: SafeArea(
            child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                  filepath != ""
                          ? Expanded(
                     child: Column(
                        children: [
                           VoiceMessage(
                              audioSrc: filepath,
                              me: true,
                           ),
                        ],
                     ),
                  )
                          : Expanded(child: Container()),
                  Row(
                     children: [
                        Expanded(
                           child: Padding(
                              padding: const EdgeInsets.only(left: 19),
                              child: Container(
                                 height: 55,
                                 decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Colors.white.withOpacity(0.2),
                                 ),
                                 child: Padding(
                                    padding: const EdgeInsets.symmetric(horizontal: 20),
                                    child: TextField(
                                       readOnly: readOnly,
                                       maxLines: null,
                                       decoration: InputDecoration(
                                          border: InputBorder.none,
                                       ),
                                    ),
                                 ),
                              ),
                           ),
                        ),
                        const SizedBox(width: 4),
                        RecordButton(
                           color: Colors.black,
                           allTextColor: Colors.white,
                           controller: controller!,
                           arrowColor: Colors.white,
                           onRecordEnd: (String value) {
                              setState(() {
                                 filepath = value;
                                 readOnly = false;
                              });
                           },
                           onRecordStart: () {
                              setState(() {
                                 readOnly = true;
                              });
                           },
                           onCancelRecord: () {
                              setState(() {
                                 readOnly = false;
                              });
                           },
                        ),
                     ],
                  ),
               ],
            ),
         ),
      );
   }
}

카테고리

의존성

의존성 목록 7 개

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.