无法在Flutter中向计时器添加音频

问题描述

我在Flutter中建立了一个计时器，并找到了一个音频Flutter包来为计时器添加音频。我正在努力使声音自动播放，就像我按下“暂停”按钮时一样，就像计时器和“暂停”一样。到目前为止，我已经完成了将音频添加到LoopOnce方法“ sound.mp3”的操作，但是当我打开计时器时，声音无法播放。

import 'package:App1/main.dart';
import 'package:Flutter/material.dart';
import 'dart:math' as math;
import 'nav_draw.dart';
import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';

class CountDownTimer extends StatefulWidget {
  @override
  _CountDownTimerState createState() => _CountDownTimerState();
}

class _CountDownTimerState extends State<CountDownTimer>
    with TickerProviderStateMixin {

  AudioPlayer advancedplayer;
  AudioCache audioCache;

  AnimationController controller;

  final appTitle = 'Timer';
  bool isRunning = false;

  String get timerString {
    Duration duration = controller.duration * controller.value;
    return '${duration.inMinutes}:${(duration.inSeconds % 60)
        .toString()
        .padLeft(2,"0")
    }';
  }

  String LocalPathFile;

  @override
  void initState() {
    super.initState();
    advancedplayer = AudioPlayer();
    audioCache = AudioCache(fixedplayer: advancedplayer);

    controller = AnimationController(
      vsync: this,duration: Duration(minutes: 5,seconds: 1),);

    WidgetsBinding.instance.addPostFrameCallback(
            (_) => loopOnce(context)); //i add this to access the context safely.
  }

  Future<void> loopOnce(BuildContext context) async {
    // await Future.delayed(Duration(seconds: 1));
       audioCache.play('sound.mp3');
       advancedplayer.pause();
       advancedplayer.stop();
    await controller.stop();
    await controller.reverse(
        from: controller.value == 0.0
            ? 1.0
            : controller.value);    //we can add duration here
    await Future.delayed(Duration(seconds: 0));
    Navigator.of(context).push(MaterialPageRoute( // since this triggers when the animation is done,no duration is needed
      builder: (context) => MyApp(),));
  }

  @override
  Widget build(BuildContext context) {

    ThemeData themeData = Theme.of(context);
    return Scaffold(
      backgroundColor: Color(0xff7A8ECD),appBar: AppBar(title: Text('Timer'),actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.volume_up),onpressed: () {
            },),],backgroundColor: Color(0xff7A8ECD),elevation: 0.0,body:
      AnimatedBuilder(
          animation: controller,builder: (context,child) {
            return Stack(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(35.0),child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
                      Expanded(
                        child: Align(
                          alignment: FractionalOffset.center,child: AspectRatio(
                            aspectRatio: 1.0,child: Stack(
                              children: <Widget>[
                                Positioned.fill(
                                  child: CustomPaint(
                                      painter: CustomTimerPainter(
                                        animation: controller,backgroundColor: Colors.white,color: themeData.indicatorColor,)),Align(
                                  alignment: FractionalOffset.center,child: Column(
                                    mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,crossAxisAlignment:
                                    CrossAxisAlignment.center,children: <Widget>[
                                      Text(
                                        timerString,style: TextStyle(
                                            fontSize: 80,color: Colors.white),AnimatedBuilder(
                        animation: controller,builder: (BuildContext context,Widget child) {
            return GestureDetector(
            child: Stack(
            children: <Widget> [
            Container(
            width: 105,height: 105,decoration: Boxdecoration(
            color: Colors.transparent,image: decorationImage(
            image: Assetimage("images/pause.png"),fit: BoxFit.cover
            ),onTap: () {
            if (controller.isAnimating)
            controller.stop();
            else {
              controller.reverse(
            from: controller.value == 0.0
            ? 1.0
                : controller.value);
            };
            },);
            },);
          }),drawer: NavDraw(),);
  }
}

class CustomTimerPainter extends CustomPainter {
  CustomTimerPainter({
    this.animation,this.backgroundColor,this.color,}) : super(repaint: animation);

  final Animation<double> animation;
  final Color backgroundColor,color;

  @override
  void paint(Canvas canvas,Size size) {
    Paint paint = Paint()
      ..color = Color(0xff4D6BCB)
      ..strokeWidth = 5.0
      ..strokeCap = strokeCap.butt
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(size.center(Offset.zero),size.width / 2.0,paint);
    paint.color = color;
    double progress = (1.0 - animation.value) * 2 * math.pi;
    canvas.drawArc(Offset.zero & size,math.pi * 1.5,-progress,false,paint);
  }

  @override
  bool shouldRepaint(CustomTimerPainter old) {
    return animation.value != old.animation.value ||
        color != old.color ||
        backgroundColor != old.backgroundColor;
  }
}

解决方法

我对此做了很多研究，并且使用了更易于使用的Flutter软件包：https://pub.dev/packages/assets_audio_player

此后，我创建了

final assetsAudioPlayer = AssetsAudioPlayer();

然后在状态内调用final，以便它可以自动运行：

   assetsAudioPlayer.open(Audio('audios/sound.mp3'),autoStart: true,);

并将暂停和播放添加到onTap：

onTap: () {
              assetsAudioPlayer.pause();
              if (controller.isAnimating)
            controller.stop();
            else {
              assetsAudioPlayer.play();
              controller.reverse(
            from: controller.value == 0.0
            ? 1.0
                : controller.value);
            };
            },

我还记得要进行Dispose，所以当我离开屏幕时，声音会自动删除：

  @override
  void dispose() {
    assetsAudioPlayer.dispose();
    print("dispose");
    super.dispose();
  }