Audio playing

lib/components/audio_player.dart

@@ -2,7 +2,14 @@ import 'package:audioplayers/audioplayers.dart';
 import 'package:flutter/material.dart';
 
 class AudioPlayerButton extends StatefulWidget {
-  const AudioPlayerButton({super.key});
+  final String audioUrl;
+  final AudioPlayer audioPlayer;
+
+  const AudioPlayerButton({
+    super.key,
+    required this.audioUrl,
+    required this.audioPlayer,
+  });
 
   @override
   State<AudioPlayerButton> createState() => _AudioPlayerButtonState();
@@ -12,23 +19,51 @@ class _AudioPlayerButtonState extends State<AudioPlayerButton>
     with SingleTickerProviderStateMixin {
   late AnimationController _animationController;
   bool _isPlaying = false;
+  bool _firstClick = true;
+  late AudioPlayer _audioPlayer;
+  final _key = UniqueKey();
 
   @override
   void initState() {
     super.initState();
+    _audioPlayer = widget.audioPlayer;
     _animationController = AnimationController(
-        vsync: this, duration: const Duration(milliseconds: 500));
+      vsync: this,
+      duration: const Duration(milliseconds: 100),
+    );
+  }
+
+  Future<void> playAudioFromUrl(String url) async {
+    await _audioPlayer.play(UrlSource(url));
   }
 
   @override
   Widget build(BuildContext context) {
     return TextButton(
+      key: _key,
       onPressed: () {
         setState(() {
-          if (_isPlaying) {
-            _animationController.reverse();
-          } else {
+          if (_firstClick) {
+            print(">> first click");
+            print(">> ${_audioPlayer.state}");
+            playAudioFromUrl(widget.audioUrl);
+            print(">> ${_audioPlayer.state}");
             _animationController.forward();
+            _firstClick = false;
+          } else {
+            if (_isPlaying) {
+              print(">> pausing");
+              _animationController.reverse();
+              print(">> ${_audioPlayer.state}");
+              _audioPlayer.pause();
+              print(">> ${_audioPlayer.state}");
+            } else {
+              print(">> resuming");
+              _animationController.forward();
+              print(">> ${_audioPlayer.state}");
+              _audioPlayer.resume();
+              print(">> ${_audioPlayer.state}");
+            }
           }
           _isPlaying = !_isPlaying;
         });
@@ -40,3 +75,68 @@ class _AudioPlayerButtonState extends State<AudioPlayerButton>
     );
   }
 }
+
+// =============================================================================
+
+class NewAudioPlayerButton extends StatefulWidget {
+  final Function changePlayerState;
+  final String audioLink;
+  final UniqueKey? playingKey;
+
+  const NewAudioPlayerButton({
+    super.key,
+    required this.changePlayerState,
+    required this.audioLink,
+    required this.playingKey,
+  });
+
+  @override
+  State<NewAudioPlayerButton> createState() => _NewAudioPlayerButtonState();
+}
+
+class _NewAudioPlayerButtonState extends State<NewAudioPlayerButton>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late bool _isPlaying;
+  final UniqueKey _key = UniqueKey();
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 100),
+    );
+    _isPlaying = widget.playingKey == _key;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    print(
+        ">>this is button $_key \ncurrent playing is ${widget.playingKey}\n ${widget.playingKey == _key}\ncurrent animation status: ${_animationController.status.toString()}");
+    _isPlaying = widget.playingKey == _key;
+    // needs to be paused but is play -> take to pause
+    if (_isPlaying && _animationController.status != AnimationStatus.forward) {
+      _animationController.forward();
+    } else if (!_isPlaying &&
+        _animationController.status != AnimationStatus.reverse) {
+      _animationController.reverse();
+    }
+    return TextButton(
+      key: _key,
+      onPressed: () {
+        if (_isPlaying) {
+          _animationController.reverse();
+        } else {
+          _animationController.forward();
+        }
+        _isPlaying = !_isPlaying;
+        widget.changePlayerState(_key, widget.audioLink);
+      },
+      child: AnimatedIcon(
+        icon: AnimatedIcons.play_pause,
+        progress: _animationController,
+      ),
+    );
+  }
+}

lib/main.dart

@@ -63,7 +63,8 @@ class _MyHomePageState extends State<MyHomePage> {
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: () {
-          showDialog(context: context, builder: (_) => const NewTransDialogue());
+          showDialog(
+              context: context, builder: (_) => const NewTransDialogue());
         },
         tooltip: 'Increment',
         child: const Icon(Icons.add),

lib/pages/notation.dart

@@ -1,3 +1,4 @@
+import 'package:audioplayers/audioplayers.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_pdfview/flutter_pdfview.dart';
 import 'package:franz/components/audio_player.dart';
@@ -22,7 +23,8 @@ class _SheetMusicViewerScreenState extends State<SheetMusicViewerScreen> {
   int currentPage = 0;
   bool isReady = false;
   String errorMessage = '';
-  String _localFilePath ="";
+  String _localFilePath = "";
+  AudioPlayer _audioPlayer = AudioPlayer();
 
   @override
   void initState() {
@@ -51,16 +53,20 @@ class _SheetMusicViewerScreenState extends State<SheetMusicViewerScreen> {
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
                   Text(widget.link),
-                  AudioPlayerButton(),
+                  AudioPlayerButton(
+                    audioPlayer: _audioPlayer,
+                    audioUrl:
+                        "https://filesamples.com/samples/audio/mp3/sample2.mp3",
+                  ),
                 ],
               ),
               Text(errorMessage),
               Expanded(
                 child: _localFilePath == ""
                     ? const Center(child: CircularProgressIndicator())
                     : PDFView(
-                      filePath: _localFilePath,
-                    ),
+                        filePath: _localFilePath,
+                      ),
               ),
             ],
           ),