flutter:用audioplayers播放audio音频

一，安装第三方库

第三方库地址

https://pub.dev/packages/audioplayers

修改pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^6.4.0

然后点击 pub get

二，代码：

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

class AudioPage extends StatefulWidget {
  final Map arguments;
  // 为title设置一个默认参数，这样的跳转该界面时可以不传值。
  AudioPage({super.key, required this.arguments});
  @override
  State<AudioPage> createState() => _AudioPageState();
}

class _AudioPageState extends State<AudioPage> {
  String _buttonText = '点击播放音乐';
  IconData _buttonIcon = Icons.play_arrow;

  String _state = "stopped";
  void _changeButtonText(str) {
    setState(() {
      _buttonText = str;
    });
  }

  void _changeButtonIcon(btn) {
    setState(() {
      _buttonIcon = btn;
    });
  }

  @override
  Widget build(BuildContext context) {
    final player = AudioPlayer();

    player.onPlayerStateChanged.listen((state) {
        print("player当前状态:");
        print(state.name);
        _state = state.name;
       }
    );

    player.onPlayerComplete.listen((event) {
      print("complete:");
      print("音频播放结束");
      _changeButtonText("点击播放音乐");
      _changeButtonIcon(Icons.play_arrow);
      _state = "stopped";
    }
    );

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        title: Text(widget.arguments["title"]),
      ),

      body: Center(
        child: ElevatedButton(
          onPressed: () {
            print("点击时状态："+player.state.name);
            if (_state == "paused") {
              _changeButtonText("播放中");
              _changeButtonIcon(Icons.stop);
              player.resume();
            } else if (_state == "playing") {
              _changeButtonText("暂停中");
              _changeButtonIcon(Icons.pause);
              player.pause();
            } else {
              player.play(UrlSource("https://ting8.yymp3.com/new27/liyugang6/6.mp3"));
              _changeButtonText("正在播放");
              _changeButtonIcon(Icons.stop);
            }
          },
          child: Row(
            mainAxisSize: MainAxisSize.min, // 根据内容调整大小
            children: <Widget>[
              Icon(_buttonIcon), // 图标在左侧
              SizedBox(width: 10), // 可选：添加一些间隔
              Text(_buttonText), // 文本在右侧
            ],
          ),
        ),
      ),

    );
  }
}

 

三，测试效果: