Flutter 实现网易云音乐字幕的代码

 更新时间:2020年04月15日 08:43:04   转载 作者:老孟程序员  
这篇文章主要介绍了Flutter 实现网易云音乐字幕的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

没有接触过音乐字幕方面知识的话,会对字幕的实现比较迷茫,什么时候转到下一句?看了这篇文章,你就会明白字幕so easy。

先来一张效果图:

字幕格式

目前市面上有很多种字幕格式,比如srt, ssa, ass(文本形式)和idx+sub(图形格式),但不管哪一种格式都会包含2个属性:时间戳和字幕内容,格式如下:

00:00 歌词:
00:25 我要穿越这片沙漠
00:28 找寻真的自我
00:30 身边只有一匹骆驼陪我
00:34 这片风儿吹过
00:36 那片云儿飘过

上面字幕的意思是:在25秒的时候跳转到下一句,在28秒的时候跳转到下一句...

字幕实现

了解了字幕文件的形式,字幕实现起来就比较简单了,使用ListWheelScrollView控件,然后通过ScrollController在合适的时机进行滚动,使当前字幕始终保持在屏幕中间。

解析字幕文件,获取字幕数据:

loadData() async {
 var jsonStr =
 await DefaultAssetBundle.of(context).loadString('assets/subtitle.txt');
 var list = jsonStr.split(RegExp('\n'));
 list.forEach((f) {
 if (f.isNotEmpty) {
 var r = f.split(RegExp(' '));
 if (r.length >= 2) {
 _subtitleList.add(SubtitleEntry(r[0], r[1]));
 }
 }
 });
 setState(() {});
}

设置字幕控件及背景图片:

@override
Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('弹幕'),
 ),
 body: Stack(
 children: <Widget>[
 Positioned.fill(
  child: Image.asset(
  'assets/imgs/background.png',
  fit: BoxFit.cover,
 )),
 Positioned.fill(
  child: Subtitle(
  _subtitleList,
  selectedTextStyle: TextStyle(color: Colors.white,fontSize: 18),
  unSelectedTextStyle: TextStyle(
  color: Colors.black.withOpacity(.6),
  ),
  diameterRatio: 5,
  itemExtent: 45,
 ))
 ],
 ),
 );
}

字幕控件的构建:

@override
Widget build(BuildContext context) {
 if (widget.data == null || widget.data.length == 0) {
 return Container();
 }
 return ListWheelScrollView.useDelegate(
 controller: _controller,
 diameterRatio: widget.diameterRatio,
 itemExtent: widget.itemExtent,
 childDelegate: ListWheelChildBuilderDelegate(
 builder: (context, index) {
  return Container(
  alignment: Alignment.center,
  child: Text(
  '${widget.data[index].content}',
  style: _currentIndex == index
   ? widget.selectedTextStyle
   : widget.unSelectedTextStyle,
  ),
  );
 },
 childCount: widget.data.length),
 );
}

字幕控件封装了选中字体和未选中字体样式参数,用法如下:

Subtitle(
	_subtitleList,
	selectedTextStyle: TextStyle(color: Colors.white,fontSize: 18),
	unSelectedTextStyle: TextStyle(
 	color: Colors.black.withOpacity(.6),
	)
)

效果如下:

设置圆筒直径和主轴渲染窗口的尺寸的比,默认值是2,越小表示圆筒越圆

Subtitle(
	_subtitleList,
	diameterRatio: 5,
)

下面是1和5的对比:

Github地址:https://github.com/781238222/flutter-do/tree/master/flutter_subtitle_example

交流

Github地址:https://github.com/781238222/flutter-do

170+组件详细用法:http://laomengit.com

总结

到此这篇关于Flutter 实现网易云音乐字幕的文章就介绍到这了,更多相关Flutter 实现网易云音乐字幕内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • android 布局属性详解

    android 布局属性详解

    android 布局属性详解,需要的朋友可以参考下
    2013-01-01
  • Android小程序实现个人信息管理系统

    Android小程序实现个人信息管理系统

    这篇文章主要为大家详细介绍了Android小程序实现个人信息管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • listview改变选中行的字体颜色实例介绍

    listview改变选中行的字体颜色实例介绍

    选中item,其字体设置为#3197FF,未选中的,其字体为#FFFFFF,下面与大家分享下listview怎么改变选中行字体颜色,感兴趣的朋友可以参考下哈
    2013-06-06
  • Android开发笔记 Handler使用总结

    Android开发笔记 Handler使用总结

    当应用程序启动时,Android首先会开启一个主线程(也就是UI线程),主线程为管理界面中的UI控件,进行事件分发
    2012-11-11
  • 轻松实现安卓(Android)九宫格解锁

    轻松实现安卓(Android)九宫格解锁

    在平常使用手机的过程中,九宫格解锁是我们经常接触到的。常见的比如有锁屏中的九宫格,还有支付宝中的九宫格等。因为九宫格可以保护用户的隐私,所以它的应用面很广泛。那么今天我们就来自定义一个属于自己的九宫格吧!
    2016-08-08
  • Android实现注册登录界面的实例代码

    Android实现注册登录界面的实例代码

    这篇文章主要介绍了Android实现注册登录界面的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Android 自定义LayoutManager实现花式表格

    Android 自定义LayoutManager实现花式表格

    这篇文章主要介绍了Android 自定义LayoutManager实现花式表格,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • TextInputLayout输入框控件的悬浮标签

    TextInputLayout输入框控件的悬浮标签

    这篇文章主要为大家详细介绍了TextInputLayout输入框控件的悬浮标签,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果

    Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果

    本篇文章主要介绍了Android使用Kotlin和RxJava 2.×实现短信验证码倒计时效果,非常具有实用价值,需要的朋友可以参考下
    2017-12-12
  • Android学习笔记之应用单元测试实例分析

    Android学习笔记之应用单元测试实例分析

    这篇文章主要介绍了Android学习笔记之应用单元测试,结合实例形式较为详细的分析了Android单元测试的实现原理与具体步骤,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论