Flutter:flutter_html_audio不工作

x7rlezfr  于 2023-04-22  发布在  Flutter
关注(0)|答案(1)|浏览(133)

我正在尝试呈现一个包含<audio>标记的html片段。
我已经导入了flutter_htmlflutter_html_audio。我还有chewie_audiovideo_player作为依赖项。
下面是我的代码:

@override
 Widget build(BuildContext context, WidgetRef ref) {
   Map<int, LessonDO> lessonMap = ref.watch(lessonsProvider).lessonMap;
   LessonDO lesson = lessonMap[lessonNumber]!;
   return Scaffold(
     appBar: AppBar(
       automaticallyImplyLeading: true,
       leading: BackButton(
          onPressed: () => context.pop(),
       ),
       title: const Text("Menu"),
     ),
     body: SingleChildScrollView(
         child: Html(data: lesson.text!, customRenders: {
       audioMatcher(): audioRender(),
     })),
    );
 }

抛出异常:

Unhandled Exception: UnimplementedError: init() has not been implemented.
#0      VideoPlayerPlatform.init
video_player_platform_interface.dart:43
#1      _videoPlayerPlatform
video_player.dart:28
#2      VideoPlayerController.initialize
video_player.dart:404
#3      ChewieAudioController._initialize
chewie_player.dart:130
<asynchronous suspension>

如果我在调试器中跳过一个异常,则页面将使用音频控件呈现,但如果单击控件,则会再次引发相同的异常。

bvn4nwqk

bvn4nwqk1#

我成功了
我们的想法是将audio标记呈现为Icon,当点击它时,它会调用一些(任何)音频播放器。
首先,我将flutter_html降级到2.2.1.(目前是稳定版本)。
其次,从依赖项中删除了flutter_html_audiochewie_playervideo_player包。
然后添加了audioplayers包。
玩家:

import 'package:audioplayers/audioplayers.dart';

class Player {
  static play(String src) async {
    final player = AudioPlayer();
    await player.play(AssetSource(src));
  }
}

渲染HTML:

body: SingleChildScrollView(
      child: Html(
    data: lesson.text!,
    customRender: {
      "audio": (context, child) {
        AudioContentElement audio = context.tree as AudioContentElement;
        String src = audio.src.first!;
        return IconButton(
          icon: const Icon(Icons.play_circle),
          tooltip: 'Воспроизвести',
          onPressed: () {
            Player.play(src);
          },
        );
      }
    },
  )),

我的HTML代码段:

<h2>Some title</h2>
Some text<br>
<audio controls>
  <source src=\"audio/dictionary/audio_file.mp3\" 
          type=\"audio/mpeg\">
</audio><br><br>
 Some text

资产指定为:

assets: 
- assets/audio/dictionary/

相关问题