Start to play musics

lib/api.dart

@@ -37,4 +37,7 @@ class API {
 
 extension MusicEntryAPIExt on MusicEntry {
   String get coverURL => "${config.apiURL}/cover/$id";
+
+  String get musicURL =>
+      "${config.apiURL}/download/$id?token=${config.apiToken}";
 }

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,
                 ),
               ],
             )

pubspec.lock

@@ -8,6 +8,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.8.2"
+  audioplayers:
+    dependency: "direct main"
+    description:
+      name: audioplayers
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.20.1"
   boolean_selector:
     dependency: transitive
     description:
@@ -151,6 +158,11 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   http:
     dependency: transitive
     description:
@@ -172,6 +184,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.17.0"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.3"
   lints:
     dependency: transitive
     description:

pubspec.yaml

@@ -46,6 +46,9 @@ dependencies:
   cached_network_image: ^3.2.0
   cached_network_image_platform_interface: ^1.0.0
 
+  # Audio player
+  audioplayers: ^0.20.1
+
 dev_dependencies:
   flutter_test:
     sdk: flutter