Start to play musics

lib/ui/music_player.dart

@@ -1,6 +1,9 @@
+// ignore_for_file: avoid_print
+
 import 'dart:math';
 import 'dart:ui';
 
+import 'package:audioplayers/audioplayers.dart';
 import 'package:fluent_ui/fluent_ui.dart' as fluent;
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
@@ -19,6 +22,9 @@ class MusicPlayer extends StatefulWidget {
 class _MusicPlayerState extends State<MusicPlayer> {
   final rng = Random();
 
+  final audioPlayer = AudioPlayer(playerId: "player");
+  var _playerState = PlayerState.STOPPED;
+
   final List<MusicEntry> stack = [];
   int currMusicPos = 0;
 
@@ -34,6 +40,48 @@ class _MusicPlayerState extends State<MusicPlayer> {
     return stack[currMusicPos];
   }
 
+  @override
+  void initState() {
+    super.initState();
+
+    audioPlayer.onPlayerError.listen((event) {
+      print("Player error!");
+      print(event);
+      _playNext();
+    });
+
+    audioPlayer.onPlayerStateChanged
+        .listen((s) => setState(() => {_playerState = s}));
+  }
+
+  Future<void> _play() async {
+    if (_playerState == PlayerState.PAUSED) {
+      await audioPlayer.resume();
+    } else {
+      await audioPlayer.play(currMusic.musicURL);
+    }
+  }
+
+  Future<void> _stop() async {
+    await audioPlayer.stop();
+  }
+
+  void _pause() async {
+    await audioPlayer.pause();
+  }
+
+  void _playPrevious() async {
+    currMusicPos -= 1;
+    await _stop();
+    await _play();
+  }
+
+  void _playNext() async {
+    currMusicPos += 1;
+    await _stop();
+    await _play();
+  }
+
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(
@@ -69,7 +117,7 @@ class _MusicPlayerState extends State<MusicPlayer> {
 
   Widget _buildCenter() {
     return fluent.Center(
-      child: Container(
+      child: SizedBox(
         width: 250,
         child: Column(
           mainAxisAlignment: fluent.MainAxisAlignment.center,
@@ -90,33 +138,32 @@ class _MusicPlayerState extends State<MusicPlayer> {
               ),
             ),
             const SizedBox(height: 40),
-            Text(currMusic.title, style: const TextStyle(fontSize: 22)),
-            const SizedBox(height: 20),
-            Text(currMusic.artist),
-            const fluent.SizedBox(height: 40),
-            fluent.Slider(
-              max: 100,
-              value: 10,
-              onChanged: (v) => {},
-              // Label is the text displayed above the slider when the user is interacting with it.
-              label: 'hey',
+            Text(
+              currMusic.title,
+              style: const TextStyle(fontSize: 22),
+              textAlign: TextAlign.center,
             ),
+            const SizedBox(height: 20),
+            Text(currMusic.artist, textAlign: TextAlign.center),
             const fluent.SizedBox(height: 40),
             fluent.Row(
               children: [
                 IconButton(
                   icon: const PlayerIcon(fluent.FluentIcons.previous),
-                  onPressed: () => {},
+                  onPressed: currMusicPos == 0 ? null : _playPrevious,
                 ),
                 const Spacer(),
                 IconButton(
-                  icon: const PlayerIcon(fluent.FluentIcons.play),
-                  onPressed: () => {},
+                  icon: PlayerIcon(_playerState == PlayerState.PLAYING
+                      ? fluent.FluentIcons.pause
+                      : fluent.FluentIcons.play),
+                  onPressed:
+                      _playerState == PlayerState.PLAYING ? _pause : _play,
                 ),
                 const Spacer(),
                 IconButton(
                   icon: const PlayerIcon(fluent.FluentIcons.next),
-                  onPressed: () => {},
+                  onPressed: _playNext,
                 ),
               ],
             )