Flutter background audio with progressbar

Question

I want to play audio from a stream. I have used Just Audio for this. I want a progress bar like Audio Video Progress bar also play the audio in the background using Audio Service.

I have used the examples for all of them and they are working individually but I cannot concatenate them. would you please help with an example of how can I do it?

immadisairaj · Accepted Answer · 2021-06-25T11:30:23.003

The example from audio_service plugin contains how to use audio_service along with just_audio. (combining 2 packages done)

Below is the mentioned SeekBar given in the example of the audio_service plugin.

// A seek bar.
StreamBuilder<MediaState>(
    stream: _mediaStateStream,
    builder: (context, snapshot) {
        final mediaState = snapshot.data;
        return SeekBar(
            duration:
                mediaState?.mediaItem?.duration ?? Duration.zero,
            position: mediaState?.position ?? Duration.zero,
            onChangeEnd: (newPosition) {
                AudioService.seekTo(newPosition);
            },
        );
    },
),
...

class SeekBar extends StatefulWidget {
  final Duration duration;
  final Duration position;
  final ValueChanged<Duration>? onChanged;
  final ValueChanged<Duration>? onChangeEnd;

  SeekBar({
    required this.duration,
    required this.position,
    this.onChanged,
    this.onChangeEnd,
  });

  @override
  _SeekBarState createState() => _SeekBarState();
}

// more code in the plugin example

Now from the above code, as you can see the example uses custom-designed SeekBar (which uses slider).

Instead of the custom slider, you can possibly use the plugin widget you wish. ProgressBar in your case.

StreamBuilder<MediaState>(
    stream: _mediaStateStream,
    builder: (context, snapshot) {
        final mediaState = snapshot.data;
        return ProgressBar(
            total:
                mediaState?.mediaItem?.duration ?? Duration.zero,
            progress: mediaState?.position ?? Duration.zero,
            onSeek: (newPosition) {
                AudioService.seekTo(newPosition);
            },
        );
    },
),

This is a change for the above SeekBar with ProgressBar. (Combining 3rd package done)

Note: For the buffered. You can get the bufferedPosition from the audio_service PlaybackStateStream.

Edit: The below is how I used it to add bufferedPosition.

(I changed the MediaState class, corresponding state getter a bit to achieve it)

StreamBuilder<MediaState>(
    stream: _mediaStateStream,
    builder: (context, snapshot) {
        final mediaState = snapshot.data;
        return ProgressBar(
            total:
                mediaState?.mediaItem?.duration ?? Duration.zero,
            progress: mediaState?.position ?? Duration.zero,
            buffered: mediaState?.playbackState?
                .bufferedPosition ?? Duration.zero,
            onSeek: (newPosition) {
                AudioService.seekTo(newPosition);
            },
        );
    },
),
...
Stream<MediaState> get _mediaStateStream =>
  Rx.combineLatest3<MediaItem, Duration, PlaybackState, MediaState>(
      AudioService.currentMediaItemStream,
      AudioService.positionStream,
      AudioService.playbackStateStream,
      (mediaItem, position, playbackState) =>
          MediaState(mediaItem, position, playbackState));
...
class MediaState {
  final MediaItem mediaItem;
  final Duration position;
  final PlaybackState playbackState;

  MediaState(this.mediaItem, this.position, this.playbackState);
}

Thank You. This works. If you don't mind would you please add the code for bufferPosition also. — user8852790, Jun 25 '21 at 10:06
Great!.. I edited the answer to include how I had implemented the same. — immadisairaj, Jun 25 '21 at 11:31
Sorry, but I cannot concatenate the buffer option. would you please share the full code? — user8852790, Jun 26 '21 at 06:14
I can share my media player from GitHub if you are okay with it. [My media player](https://www.github.com/immadisairaj/radiosai/tree/main/lib%2Fscreens%2Fmedia_player%2Fmedia_player.dart) — immadisairaj, Jun 26 '21 at 06:35
I hop you changed your `MediaState` class as well. I am using audio_service v0.17.1. I don't think the version might be wrong. Maybe can you try to `flutter clean` and then `flutter pub get`. Because if you had changed the `MediaState` class and the get function. That is enough to work. The code I shared, it works fine for me. — immadisairaj, Jun 26 '21 at 09:16
Dear, after downgrading the flutter version it's working. One more thing need. I want the total duration from the stream which is playbackEvent.total in audio video progress bar. here I can use it to find the total time from the stream? — user8852790, Jul 01 '21 at 04:47
I am not sure of the stream. Never tried that. Sorry.. Maybe you can see the documentation of the plugin and you'll know what to use. — immadisairaj, Jul 01 '21 at 12:48
I am searching for that and found that audio_service does not provide that but the just_audio provides that. would you can help me to add or use `_player.playbackstate` instead of `audioservice.positionstream` or so on? — user8852790, Jul 01 '21 at 17:48
As we already have playback state in audio service also. I guess you can try that? `mediaState.playbackState.` You can go through [this](https://pub.dev/documentation/audio_service/latest/audio_service/PlaybackState-class.html) link for the audio service playback state. — immadisairaj, Jul 02 '21 at 06:28

Flutter background audio with progressbar

1 Answers1