flutter - 如何在 Flutter 中的所有平台(包括 Web)上播放音频
解决方案
Flutter 的video_player插件也支持音频,所以你可以使用它。它目前支持 Android、iOS 和 Web,并且可能会支持其他平台,因为它们变得稳定。
这是适用于播放音频文件的视频播放器食谱示例。我用 mp3 链接替换了 mp4 链接,并删除了视频所需的 AspectRatio 小部件。(不要忘记将video_player依赖项添加到pubspec.yaml。)
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
void main() => runApp(VideoPlayerApp());
class VideoPlayerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Player Demo',
home: VideoPlayerScreen(),
);
}
}
class VideoPlayerScreen extends StatefulWidget {
VideoPlayerScreen({Key key}) : super(key: key);
@override
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
VideoPlayerController _controller;
Future<void> _initializeVideoPlayerFuture;
@override
void initState() {
// Using an mp3 file instead of mp4.
_controller = VideoPlayerController.network(
'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',
);
_initializeVideoPlayerFuture = _controller.initialize();
_controller.setLooping(true);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Butterfly Video'),
),
body: FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// not wrapped in an AspectRatio widget
return VideoPlayer(_controller);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
if (_controller.value.isPlaying) {
_controller.pause();
} else {
_controller.play();
}
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
}
要支持网络,您还需要添加video_player_web依赖项。
dependencies:
video_player: ^0.10.4
video_player_web:
git:
url: git://github.com/flutter/plugins.git
path: packages/video_player/video_player_web
请注意,这将不会在将来使用 git。请参阅此处的说明。
更新:实际上它在没有指定video_player_web
.
更新 2:阅读本文以了解 Web 的解决方法。
更新 3:just_audio看起来是一个不错的解决方案。
更新 4:just_audio 是一个很好的解决方案。我在 Android、iOS、Web 和 macOS 上使用它。
推荐阅读
- python - Python attrs 类属性缓存延迟加载
- html - 为什么SVG图像父元素高度比图像大?
- linux - 复制过去 24 小时内内容更改的特定命名目录
- vba - VBA 编译错误与非常简单的子宏预期:=
- dart - Dart:Dart 如何匹配类的构造函数中的命名参数?
- javascript - 需要从打开的天气图中列出数据
- laravel - Laravel Eloquent groupBy()
- string - struct str 属性必须是引用吗?
- java - 如何修复方法 compareTo 中的代码,使其不仅返回所有值为零?
- service-worker - 为什么服务工作者缓存所有图像?