版权声明：本文为CSDN博主「华洛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sdta25196/article/details/115250786
1.使用方式
// xxx.dart
//定义控制器
final EolAudioController controller = EolAudioController();
// 定义mp3地址
String _audio = "https://s3.amazonaws.com/scifri-segments/scifri201711241.mp3";
// 调用
EolAudio(source: _audio, timer: "00:00", controller: controller),
2.封装音频类
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:zsgk/config/theme.dart';
/*
*
* @author: 田源
* @date: 2020-11-30 10:59
* @description: eol音频组件
*
*/
class EolAudio extends StatefulWidget {
/// 音频内容 mp3链接
final String source;
/// 音频长度
final String timer;
final EolAudioController controller;
EolAudio({Key key, @required this.timer, @required this.source, @required this.controller}) : super(key: key);
@override
_EolAudioState createState() => _EolAudioState();
}
class _EolAudioState extends State<EolAudio> {
/// 音频实例
AudioPlayer audioPlayer = AudioPlayer();
/// 是否已经加载过这个音频
bool loaded = false;
/// 控制播放中动画效果的显示
bool isPlay = false;
@override
void initState() {
super.initState();
}
@override
void dispose() {
audioPlayer?.dispose();
super.dispose();
}
changePlayState(flag) {
if (!mounted) return;
setState(() {
isPlay = flag;
});
}
@override
Widget build(BuildContext context) {
return Container(
height: 100.w,
padding: EdgeInsets.all(20.w),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(15.w)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 播放动效
Container(
width: 80.w,
child: Visibility(
visible: isPlay,
child: Image.asset(
"assets/images/icon/music.gif",
width: 80.w,
height: 20.w,
),
replacement: Image.asset(
"assets/images/icon/music.png",
width: 80.w,
height: 20.w,
),
),
),
// 进度条
Expanded(
flex: 1,
child: StreamBuilder<Duration>(
stream: audioPlayer.durationStream,
builder: (context, snapshot) {
final duration = snapshot.data ?? Duration.zero;
return StreamBuilder<Duration>(
stream: audioPlayer.positionStream,
builder: (context, snapshot) {
var position = snapshot.data ?? Duration.zero;
if (position > duration) {
position = duration;
}
return SeekBar(
duration: duration,
position: position,
timer: widget.timer,
onChangeEnd: (newPosition) {
audioPlayer.seek(newPosition);
},
);
},
);
},
),
),
// 播放按钮
Container(
width: 42.w,
child: StreamBuilder<PlayerState>(
stream: audioPlayer.playerStateStream,
builder: (context, snapshot) {
final playerState = snapshot.data;
final processingState = playerState?.processingState;
final playing = playerState?.playing;
if (processingState == ProcessingState.loading || processingState == ProcessingState.buffering) {
return Transform.scale(
scale: 0.7,
child: Container(
width: 42.w,
height: 42.w,
child: CircularProgressIndicator(
strokeWidth: 5.w,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),
),
);
} else if (playing != true) {
return InkWell(
onTap: () async {
if (widget.controller.activeAudio != this) {
widget.controller.activeAudio?.changePlayState(false);
widget.controller.audioPlayer?.pause();
}
// 音频只加载一次
if (!loaded) {
await audioPlayer.load(
AudioSource.uri(Uri.parse(widget.source)),
);
setState(() {
loaded = true;
});
}
audioPlayer.play();
changePlayState(true);
widget.controller.activeAudio = this;
widget.controller.audioPlayer = audioPlayer;
},
child: Container(
child: Icon(
Icons.play_circle_outline,
color: Colors.red,
size: 42.w,
),
),
);
} else if (processingState != ProcessingState.completed) {
return InkWell(
onTap: () {
changePlayState(false);
audioPlayer.pause();
},
child: Container(
child: Icon(
Icons.pause_circle_outline,
color: Colors.red,
size: 42.w,
),
),
);
} else {
return InkWell(
onTap: () {
changePlayState(false);
audioPlayer.seek(Duration.zero, index: 0);
},
child: Container(
child: Icon(
Icons.play_circle_outline,
color: Colors.red,
size: 42.w,
),
),
);
}
},
),
),
],
),
);
}
}
class SeekBar extends StatefulWidget {
/// 音频长度
final String timer;
final Duration duration;
final Duration position;
final ValueChanged<Duration> onChanged;
final ValueChanged<Duration> onChangeEnd;
SeekBar({
@required this.duration,
@required this.position,
@required this.timer,
this.onChanged,
this.onChangeEnd,
});
@override
_SeekBarState createState() => _SeekBarState();
}
class _SeekBarState extends State<SeekBar> {
double _dragValue;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text(
RegExp(r'((^0*[1-9]\d*:)?\d{2}:\d{2})\.\d+$').firstMatch('$_playing')?.group(1) ?? '$_playing"',
style: TextStyle(color: Colors.red, fontSize: 26.sp),
),
),
Container(
constraints: BoxConstraints(maxWidth: 300.w),
child: SliderTheme(
data: SliderThemeData(
activeTrackColor: Colors.red,
inactiveTrackColor: Color(0xffeeeeee),
thumbColor: Colors.red,
thumbShape: ARoundSliderThumbShape(enabledThumbRadius: 0.w),
),
child: Slider(
min: 0.0,
max: widget.duration.inMilliseconds.toDouble(),
value: min(_dragValue ?? widget.position.inMilliseconds.toDouble(), widget.duration.inMilliseconds.toDouble()),
onChanged: (value) {
setState(() {
_dragValue = value;
});
if (widget.onChanged != null) {
widget.onChanged(Duration(milliseconds: value.round()));
}
},
onChangeEnd: (value) {
if (widget.onChangeEnd != null) {
widget.onChangeEnd(Duration(milliseconds: value.round()));
}
_dragValue = null;
},
),
),
),
Container(
child: Text(
widget.timer,
style: TextStyle(color: Colors.red, fontSize: 26.sp),
),
),
],
);
}
Duration get _playing => widget.position;
}
/// 重写slider指示器
class ARoundSliderThumbShape extends SliderComponentShape {
/// Create a slider thumb that draws a circle.
const ARoundSliderThumbShape({
this.enabledThumbRadius = 10.0,
this.disabledThumbRadius,
});
/// The preferred radius of the round thumb shape when the slider is enabled.
///
/// If it is not provided, then the material default of 10 is used.
final double enabledThumbRadius;
/// The preferred radius of the round thumb shape when the slider is disabled.
///
/// If no disabledRadius is provided, then it is equal to the
/// [enabledThumbRadius]
final double disabledThumbRadius;
double get _disabledThumbRadius => disabledThumbRadius ?? enabledThumbRadius;
@override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return Size.fromRadius(isEnabled == true ? enabledThumbRadius : _disabledThumbRadius);
}
@override
void paint(
PaintingContext context,
Offset center, {
Animation<double> activationAnimation,
Animation<double> enableAnimation,
bool isDiscrete,
TextPainter labelPainter,
RenderBox parentBox,
SliderThemeData sliderTheme,
TextDirection textDirection,
double value,
double textScaleFactor,
Size sizeWithOverflow,
}) {
assert(context != null);
assert(center != null);
assert(enableAnimation != null);
assert(sliderTheme != null);
assert(sliderTheme.disabledThumbColor != null);
assert(sliderTheme.thumbColor != null);
final Canvas canvas = context.canvas;
Rect rect = Rect.fromCenter(center: center, width: 6.w, height: 20.w);
canvas.drawRect(rect, Paint()..color = Colors.red);
}
}
/// 音频插件控制器
class EolAudioController {
/// 当前活跃的音频
_EolAudioState _activeAudio;
_EolAudioState get activeAudio => _activeAudio;
set activeAudio(var value) {
_activeAudio = value;
}
/// 当前活跃的音频播放器
AudioPlayer _audioPlayer;
AudioPlayer get audioPlayer => _audioPlayer;
set audioPlayer(var value) {
_audioPlayer = value;
}
}
网友评论