New tutorial for audio_service version 0.18

[suragch]

To which pages does your suggestion apply?

• https://github.com/ryanheise/audio_service
• https://github.com/ryanheise/audio_service/wiki/Tutorial

Quote the sentences(s) from the documentation to be improved (if any)

If you think the tutorial I wrote about audio_service would be helpful to audio_service users, you could link to it from the documentation.

Describe your suggestion

Here is the tutorial on Medium:

• https://suragch.medium.com/background-audio-in-flutter-with-audio-service-and-just-audio-3cce17b4a7d?sk=0837a1b1773e27a4f879ff3072e90305

I'd also love a code review from anyone and welcome any suggestions for improving the tutorial or correcting inaccuracies.

Here is the demo project:

• https://github.com/suragch/flutter_audio_service_demo

[ryanheise]

I'm looking forward to reading this, I'm just working my way through it now :+1:

Just an initial couple of suggestions below:

Next find the line that says android:name=".MainActivity" and replace it with the following:

android:name="com.ryanheise.audioservice.AudioServiceActivity"

This is required by the audio_service plugin.

It could be worth mentioning that there is a way to create a custom activity if an app needs that, so it's not necessary to use AudioServiceActivity, but it is necessary to use either this activity or a custom activity that does the same setup that this activity does.

For some strange reason, Just Audio also requires asking for microphone permission, so add the following key-value pair:

Note that this is now fixable by using a build-time option which completely removes the parts of the AVAudioSession API that trigger the App Store to detect microphone code.

[ryanheise]

No special setup is needed for the web. Arguably you probably don’t need audio_service at all, but using it won’t prevent just_audio from working on the web with the same code base that you use for Android and iOS.

Another benefit is that it can show a media notification, although not on all browsers. This can be useful particularly for web apps when they are run on a smart phone.

    config: AudioServiceConfig(
      androidNotificationChannelName: 'Audio Service Demo',
      androidNotificationOngoing: true,
      androidStopForegroundOnPause: true,
    ),

I would definitely recommend including androidNotificationChannelId in the tutorial, too. I added this recently but it's important since if you don't set it the plugin will pick a default one for you, which may be fine, except that there is no API to change the channel ID later, so you've pretty much got to commit to one ID at the start. (Maybe a future release will provide an API to delete or migrate notification channel IDs...)

[suragch]

@ryanheise Thank you for your comments so far! I've updated the tutorial and sample project code for the points you mentioned. Specifically:

• Added note about custom AudioServiceActivity
• Changed tutorial and code to strip out microphone API
• Changed web support description
• Added androidNotificationChannelId code and description

In addition to that I updated just_audio to use version 0.9.1. I also see you just published just_audio_background, so I added a link and note about that. Would my demo project be able to use just_audio_background without audio_service?

@girish54321 There are directions in the tutorial already for setting up macOS. However, I can see that it wasn't clear that the tutorial also works for macOS since all of the screenshots were for Android and iOS. So I added a note at the beginning and some screenshots at the end that show the project runs on mac and web.

[girish54321]

@suragch Nice work new screenshots look great.

[ryanheise]

In addition to that I updated just_audio to use version 0.9.1.

I should probably publish 0.9.2 with some bug fixes (https://github.com/ryanheise/just_audio/issues/446) first. If you have a chance to try it and it solves your issue, I'll go ahead with the publish.

I also see you just published just_audio_background, so I added a link and note about that. Would my demo project be able to use just_audio_background without audio_service?

I'd consider just_audio_background to be "more beta" than audio_service since it hasn't been tested by anyone but me. But once it stabilises, yes I think your demo could be made to work with it.

[ryanheise]

just_audio 0.9.2 is now published which fixes the empty playlist bug (hopefully!)

[defsub]

I wanted to let you know that I followed this tutorial to successfully upgrade my app to 0.18 beta. I've been using the older design for a while and it was pretty smooth to upgrade. I'm only using with Android to play music in fg and bg and 0.18 is working great for me. Thank you!

[suragch]

I've updated the tutorial for for just_audio 0.9.3, which fixed the shuffling bug. Thanks a lot, Ryan, for all your help and advice!

[ryanheise]

Just to update, I have added the following section to the README in the latest commit:

Tutorials and documentation

• Background audio in Flutter with Audio Service and Just Audio by @suragch
• Tutorial: walks you through building a simple audio player while explaining the basic concepts.
• Full example: The example subdirectory on GitHub demonstrates both music and text-to-speech use cases.
• Frequently Asked Questions
• API documentation

It's not published yet, though, as I would likely stack some other commits together before the next release.

[gOzaru]

I've updated the tutorial for for just_audio 0.9.3, which fixed the shuffling bug. Thanks a lot, Ryan, for all your help and advice!

Hello suragch, I just tested your tutorial and it's working very well. But not in shuffle method. Logically in all music player apps, like VLC; shuffle will always jump to another random song in the playlist if user presses the Next button. But in your tutorial, it behaves differently. The shuffle only makes a random order for once and if loops.all is active, then the sequence will begin in the first index of shuffleIndex again. After that, if we click Next, it won't make a random order again. We need to toggle Shuffle again in order to activate this random order.

I also tested this in my project that used the latest version of just_audio and audio_service. Eventually, it will behave like your tutorial has. Is there any way that we can program Shuffle like the one in VLC app? Thank you for any tips and guidance.

[suragch]

@gOzaru, In my own music player app I don't use shuffle mode so I admit that I'm a little weak in that regard since I only implemented it for the sake of the tutorial. Go ahead and open an issue in the tutorial repo. Maybe with a few a few more eyes on it we can eventually get a better solution.

[gOzaru]

Nice idea. I will give it a try.

[kmigntw]

I'm looking forward to reading this, I'm just working my way through it now 👍

Just an initial couple of suggestions below:

Next find the line that says android:name=".MainActivity" and replace it with the following:

android:name="com.ryanheise.audioservice.AudioServiceActivity"

This is required by the audio_service plugin.

It could be worth mentioning that there is a way to create a custom activity if an app needs that, so it's not necessary to use AudioServiceActivity, but it is necessary to use either this activity or a custom activity that does the same setup that this activity does.

For some strange reason, Just Audio also requires asking for microphone permission, so add the following key-value pair:

Note that this is now fixable by using a build-time option which completely removes the parts of the AVAudioSession API that trigger the App Store to detect microphone code.

@ryanheise Could you please provide an example of the custom Activity which does the required setup

[ryanheise]

@kmigntw Is the example in the README enough?

[kmigntw]

@kmigntw Is the example in the README enough?

@ryanheise Unfortunately not. What I tried was

import com.ryanheise.audioservice.AudioServiceActivity

class MainActivity: FlutterActivity() {
    override fun provideFlutterEngine(context: Context): FlutterEngine {
        return AudioServicePlugin.getFlutterEngine(context)
    }
}

but this throws the following errors: /MainActivity.kt: (10, 5): 'provideFlutterEngine' overrides nothing /MainActivity.kt: (10, 48): Unresolved reference: Context /MainActivity.kt: (10, 59): Unresolved reference: FlutterEngine /MainActivity.kt: (10, 16): Unresolved reference: AudioServicePlugin

Did I do something wrong here?

[ryanheise]

Those seem like errors that your IDE should suggest fixes for.

[hdeyana]

@kmigntw Is the example in the README enough?

@ryanheise Unfortunately not. What I tried was

import com.ryanheise.audioservice.AudioServiceActivity

class MainActivity: FlutterActivity() {
    override fun provideFlutterEngine(context: Context): FlutterEngine {
        return AudioServicePlugin.getFlutterEngine(context)
    }
}

but this throws the following errors: /MainActivity.kt: (10, 5): 'provideFlutterEngine' overrides nothing /MainActivity.kt: (10, 48): Unresolved reference: Context /MainActivity.kt: (10, 59): Unresolved reference: FlutterEngine /MainActivity.kt: (10, 16): Unresolved reference: AudioServicePlugin

Did I do something wrong here?

Full Import

import android.content.Context
import io.flutter.embedding.android.FlutterActivity
import com.ryanheise.audioservice.AudioServicePlugin
import io.flutter.embedding.engine.FlutterEngine

class MainActivity: FlutterActivity() {
    override fun provideFlutterEngine(context: Context): FlutterEngine {
        return AudioServicePlugin.getFlutterEngine(context)
    }
}

[ryanheise]

This is a bit off topic for the current issue, I would suggest asking your question on stack overflow.

[didiabel]

Hey @ryanheise I'm getting the following error:

Unresolved reference: audioservice
Unresolved reference: AudioServiceActivity

import android.os.Bundle
//import androidx.appcompat.app.AppCompatDelegate
import io.flutter.embedding.android.FlutterActivity
import com.ryanheise.audioservice.AudioServiceActivity;

class MainActivity: AudioServiceActivity() {

}

am I missing something...?