如何在 Flutter 中在所有平台（包括 Web）上播放音频

Posted 2023-02-23

【中文标题】如何在 Flutter 中在所有平台（包括 Web）上播放音频

【英文标题】：How to play audio on the all platforms (including web) in Flutter

【发布时间】：2020-04-17 08:10:52

【问题描述】：

current audio plugins 不支持网络。假设我有一个本地音频文件或远程 url，我将如何在所有平台上播放它？

我找到了一个使用 video_player 的解决方案，所以我在下面分享这个作为自我回答的问答。

【参考方案1】：

Flutter 的 video_player 插件也支持音频，所以你可以使用它。它目前支持 android、ios 和 Web，并且可能会在其他平台稳定后支持。

这是适用于播放音频文件的Video Player cookbook example。我用 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,
        ),
      ),
    );
  

为了支持 web，你还需要添加 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。见解释here。

更新：实际上它在没有指定video_player_web的情况下在网络上工作。

更新 2：阅读 this article 了解 Web 解决方法。

更新 3：just_audio 看起来是一个不错的解决方案。

更新 4：just_audio 是一个很好的解决方案。我在 Android、iOS、Web 和 macOS 上使用它。

【讨论】：

Flutter 团队的官方立场似乎是 VideoPlayer 不是为播放音频而设计的：github.com/flutter/flutter/issues/38480 特别是它无法播放资产中的文件。

@Suragch 我只面临一个问题，在 ios 上，音频文件播放时没有声音。

@princeoo7，在我当前的项目中，我转而使用适用于 Android 和 iOS 的 audioplayers 插件。

@Suragch 从 url 播放音频文件，您可以分享任何工作示例吗？我确实尝试过，但在从 url 播放音频时无法正常工作:(

@cmaxetom，我也改用 just_audio。它在 Android、iOS、网络和 macOS 上运行良好。