UI_Widgets topic

title: "UI Widgets API" description: "The τ UI Widgets." summary: "The τ Project offers several UI Widgets." permalink: tau_api_widgets tags: api,ui,widget keywords: API, UI, widgets

SoundPlayerUI

How to use

First import the modules import 'flutter_sound.dart

The SoundPlayerUI provides a Playback widget styled after the HTML 5 audio player.

The player displays a loading indicator and allows the user to pause/resume/skip via the progress bar.

You can also pause/resume the player via an api call to SoundPlayerUI's state using a GlobalKey.

The SoundPlayerUI widget allows you to playback audio from multiple sources:

  • File
  • Asset
  • URL
  • Buffer

MediaFormat

When using the SoundPlayerUI you MUST pass a Track that has been initialised with a supported MediaFormat.

The Widget needs to obtain the duration of the audio that it is play and that can only be done if we know the MediaFormat of the Widget.

If you pass a Track that wasn't constructed with a MediaFormat then a MediaFormatException will be thrown.

The MediaFormat must also be natively supported by the OS. See mediaformat.md for additional details on checking for a supported format.

Example:

Track track;

/// global key so we can pause/resume the player via the api.
var playerStateKey = GlobalKey<SoundPlayerUIState>();

void initState()
{
   track = Track.fromAsset('assets/rock.mp3', mediaFormat: Mp3MediaFormat());
}

Widget build(BuildContext build)
{
    var player = SoundPlayerUI.fromTrack(track, key: playerStateKey);
    return
        Column(child: [
            player,
            RaisedButton("Pause", onPressed: () => playerState.currentState.pause()),
            RaisedButton("Resume", onPressed: () => playerState.currentState.resume())
        ]);
}

Sounds uses Track as the primary method of handing around audio data.

You can also dynamically load a Track when the user clicks the 'Play' button on the SoundPlayerUI widget. This allows you to delay the decision on what Track is going to be played until the user clicks the 'Play' button.

Track track;


void initState()
{
   track = Track.fromAsset('assets/rock.mp3', mediaFormat: Mp3MediaFormat());
}

Widget build(BuildContext build)
{
    return SoundPlayerUI.fromLoader((context) => loadTrack());
}

Future<Track> loadTrack()
{
    Track track;
    track = Track.fromAsset('assets/rock.mp3', mediaFormat: Mp3MediaFormat());

    track.title = "Asset playback.";
    track.artist = "By sounds";
}