ariessa / melofy

A Flutter application to generate melody from audio input

About the App

A Flutter application to generate melody from audio input. It can run on Android version 7.1.2 and above.

Understanding the App

The features of this app are as follows:

● Register

● Log In

● Record Audio

● View the Recorded Audio

● Play the Recorded Audio

● Pause the Recorded Audio

● Delete the Recorded Audio

● Use the Recorded Audio

● Generate Melody

● View the Generated Melody

● Play the Generated Melody

● Pause the Generated Melody

● Favourite the Generated Melody

● Share the Generated Melody

● Close the Generated Melody

● View Generated Melodies

● View Favourited Melodies

● View In-App Tutorials

● Log Out

Prerequisites

Melofy app requires Melofy API to function as intended. This is because the melody generation part is in Melofy API.

1. Deploy Melofy API locally.

2. Change hostname in Melofy app when sending POST request.

Building and Releasing the APKs

NOTE: If release builds on Android fail and mentions flutter_ffmpeg, make sure that mavenCentral() is defined as a repository in your build.gradle and it is listed before jcenter().

1. Clear build cache

flutter clean

2. Get depenedencies listed in pubspec.yaml

flutter pub get

3. Build APKs by splitting them per Application Binary Interface (ABI)

flutter build apk --split-per-abi

Testing the App

1. Find out your device's CPU architecture.

NOTE: Refer to this article to find out your device's CPU architecture.

2. In Melofy's latest release, expand the Assets section.

3. Download the specific release APK based on your device's CPU architecture and install it.

• For ARM, use APK ending with armeabi-v7a.apk
• For ARM64, use APK ending with arm64-v8a.apk
• For x86_64, use APK ending with x86_64.apk

Or, you can download the fat APK that can be installed on ARM, ARM64, and x86_64.

• The Fat APK is the APK ending with fat.apk

WARNING I: There is no apk for x86 Android. This is because Flutter does not currently support building for x86 Android. Refer to this issue on Github.

WARNING II: These builds are intended for testing purposes only. Usage outside of testing may cause unexpected crashes and performance lags.

Database Examples

Firebase Cloud Firestore

Firebase Cloud Storage

melofy's Issues

Add search melody feature

Problem

Description

Alternatives

Additional context

Possible Implementation

Refer to this.

String combinedName =  _firstName + " " + _lastName;

List<String> splitList = combinedName.split(" ");
List<String> indexList = [];


for (int i = 0; i < splitList.length; i++) {
   for (int y = 1; y < splitList[i].length + 1; y++) {
      indexList.add(splitList[i] .substring(0, y).toLowerCase());
   }
}

No email verification after user registration

Problem

No email verification after user registration.

Description

After user has successfully registered, the app should verify user's email before allowing any sign-ins

Implementation

• I would be interested in implementing this feature.

Combine Favourites screen and Melodies screen.

Problem

Description

Alternatives

Additional context

Implementation

• I would be interested in implementing this feature.

Arrow downward icon looks blurry and pixelated

Problem

The arrow downward icon in Login page looks blurry and pixelated.

Description

In the Login page, the arrow downward icon in DropdownButtonFormField used for gender selection should be replaced with similar icon that has a higher resolution.

Delete Generated Melody

Problem

Currently, users cannot delete generated melody listed in the Melodies page

Description

Add delete generated melody feature using swipe to delete (dismissible).

Multiple bottom navbar after close view generated melody

Description

After clicking close button in View Generated Melody screen, user will be directed to the Melodies screen.
There are multiple bottom navbars and floating action buttons in the Melodies screen. The bottom navbars will only disappear if user clicks on Melodies on any of the bottom navbars.

Reproduction

1. Install app using Melofy's v0.5.0 APK.
2. Log in to Melofy app.
3. Click on Melodies in bottom navbar.
4. In Melodies screen, click on Floating Action Button (add icon). User will then be directed to Record Audio screen.
5. In Record Audio screen, click on the record button.
6. In Recording screen, sing for a few seconds and click stop record button.
7. In View Recorded Audio screen, click on the tick icon.
8. In Use Recorded Audio dialog, click Yes.
9. Wait until Generating Melody finish. User will be directed to View Generated Melody screen.
10. In View Generated Melody screen, click on the close button at the top right corner.
11. In Melodies screen, there are at least two bottom navbars and floating action buttons.

Expectation

After closing View Generating Melody screen, user will be directed to Melodies screen.
In Melodies screen, there should be at most one bottom navbar and one floating action button.

Possible Resolution

Look into app.dart file.

Music note icon looks blurry and pixelated

Problem

The music note icon in Login Page looks blurry and pixelated.

Description

The music note icon should be replaced with similar music note icon that has a higher resolution.

Cannot register user using release APK

Description

Reproduction

4. See error.

Expectation

Use Unsplash random image instead of icon in Melody Card

Problem

Description

Alternatives

Additional context

Possible Implementation

import 'package:flutter/material.dart';


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


class RandomImg extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Random Images',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}


class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}


class _HomeScreenState extends State<HomeScreen> {
  int counter = 0;
  var _imageurl = 'https://source.unsplash.com/random/';


  Widget imageprovider() {
    return Image.network(
      _imageurl,
      fit: BoxFit.cover,
      height: double.infinity,
      width: double.infinity,
    );
  }


  void _newImage() {
    setState(() {
      _imageurl = 'https://source.unsplash.com/random/$counter';
      counter++;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: GestureDetector(
            child: imageprovider(),
            onTap: _newImage,
          ),
        ),
      ),
    );
  }
}

Create a different UI for viewing melodies after clicking melody card

Problem

Description

Alternatives

Additional context

Implementation

• I would be interested in implementing this feature.

Bottom navbar disappear after closing view generated melody

Description

After clicking the close button in View Generated Melody screen, user will be directed to the Melodies screen.
There is no bottom navbar in the Melodies screen.

Reproduction

1. Install app using Melofy's v0.4.0 APK.
2. Log in to Melofy app.
3. Click on Melodies in Bottom Navbar.
4. In Melodies screen, click on Floating Action Button (add icon). User will then be directed to Record Audio screen.
5. In Record Audio screen, click on the record button.
6. In Recording screen, sing for a few seconds and click stop record button.
7. In View Recorded Audio screen, click on the tick icon.
8. In Use Recorded Audio dialog, click Yes.
9. Wait until Generating Melody finish. User will be directed to View Generated Melody screen.
10. In View Generated Melody screen, click on the close button at the top right corner.
11. In Melodies screen, there is no bottom navbar and floating action button.

Expectation

After closing View Generating Melody screen, user will be directed to Melodies screen.
In Melodies screen, there should be a bottom navbar and a floating action button.

Possible Resolution

Look into app.dart file.

No loading animation after clicking REGISTER button

Problem

No loading animation after clicking REGISTER button

Description

The register feature should have a loading animation after user clicks on the REGISTER button.

Implementation

• I would be interested in implementing this feature.

No loading animation after clicking LOGIN button

Problem

No loading animation after clicking LOGIN button.

Description

The login feature does not have a loading animation after clicking the LOGIN button.

Implementation

• I would be interested in implementing this feature.

App crashes in the Record Audio screen

Description

App crashes during record audio and after clicking stop record audio.

Reproduction

1. Install app using Melofy's v0.3.0 APK.
2. Log in to Melofy app.
3. Click on Melodies in Bottom Navbar.
4. In Melodies screen, click on Floating Action Button (add icon). User will then be directed to Record Audio screen.
5. In Record Audio screen, click on the record button.
6. Audio will be recorded briefly before the app crashes.
7. Alternatively, the app will also crash after the user clicks on the stop record button.

Expectation

After clicking the floating button in Melodies screen, user will be directed to Record Audio page.
In the Record Audio page, user will click on the Record button and the app should record audio.
In the Record Audio page, user will click on the Stop Record button and the app should stop recording audio.

Possible Resolution

• Upgrade all dependencies in pubspec.yaml
• Upgrade Flutter

2nd prerelease builds are ginormous in size

Problem

The size for all 2nd prerelease builds are ginourmous in size, around 30MB to 40MB.

Description

See the 2nd prereleased builds page to view their file sizes.

Suggestion

Since all images except for log out ilustration are taken from Unsplash, it is better to use Image.network() instead of Image() when displaying images in the Tutorials section.