开发者社区> 杰克.陈> 正文

C# WPF 歌词控件(支持逐字定位描色效果)

简介: 原文:C# WPF 歌词控件(支持逐字定位描色效果) 之前做了一个模仿网易云歌词的控件,实现了加载网易云歌词并能随音乐播放进度定位歌词。今天呢将在这个控件的基础上增加逐字定位描色功能,如下图效果(QQ音乐PC)所示:   我所使用的实现方法很简单粗暴,把每句歌词每个字切开,单独显示在一个描色的控件中,然后拼成一行完整的歌词,随音乐播放进度去找相应的字进行描色。
+关注继续查看
原文:C# WPF 歌词控件(支持逐字定位描色效果)

之前做了一个模仿网易云歌词的控件,实现了加载网易云歌词并能随音乐播放进度定位歌词。今天呢将在这个控件的基础上增加逐字定位描色功能,如下图效果(QQ音乐PC)所示:

 

我所使用的实现方法很简单粗暴,把每句歌词每个字切开,单独显示在一个描色的控件中,然后拼成一行完整的歌词,随音乐播放进度去找相应的字进行描色。

而最重要的描色功能是怎么实现的呢?

答案是:使用ClipToBounds属性

当控件ClipToBounds属性为TRUE时,超出控件范围的内容将会被裁剪掉不显示。现在你应该能明白描色功能怎么实现了吧?

在一个自定义控件中有两个Label,设置一个为置顶(ZINDEX最大)显示并加上颜色,给顶部的这个Label设置ClipToBounds属性为TRUE,然后默认顶部的Label宽度为0,描色的过程就把顶部的Label宽度慢慢增加。

最终完成的效果如下图,为了更直观地看到效果我给两个Label都加上了不同的背景颜色:

当然描色时间我没调好。当进度到达某个字时就调用那个字的控件执行一个宽度动画,动画目标就是置顶的Label,动画时间就是唱这个字所花费的时间。

这里就不把项目所有代码贴出来了,因为都是些简单的调用和判断而已,只贴描色的部分代码。

歌词负责描色的控件如下,每个字都单独显示在这个控件中

<Grid Background="Yellow">
        <!--描色层-->
        <Canvas Background="Black" HorizontalAlignment="Left" ClipToBounds="True" Name="ColorLayer" Panel.ZIndex="1">
            <Label Name="ColorWordLabel" Foreground="Red"></Label>
        </Canvas>
        <Label Name="WordLabel" ></Label>    
    </Grid>
double tovalue = WordLabel.ActualWidth;
                widthAnimation.From = 0;
                widthAnimation.To = tovalue;
                widthAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(Time));
                ColorLayer.BeginAnimation(WidthProperty, widthAnimation);

后台代码的描色其实就是播放一个动画,动画操作了带有颜色的字体控件宽度,也就是ColorLayer控件,宽度从From 0开始到 To WordLabel的实际宽度,播放所需时间Duration是Time(毫秒单位),就这几句代码完成了描色的过程。

 

完整项目下载:

点击下载

 

要知道普通的LRC格式歌词是没有记录每个字的吟唱时间的,而QQ音乐、酷狗音乐的歌词文件都经过不同算法的加密保护,没法直接读取,所以在这个项目中我将自己创建一个歌词格式。

那么歌词文件必须要包含以下信息:

1,完整歌词;

2,每句歌词的开始时间;

3,每句歌词每个字的吟唱耗时;

为了方便读写将使用JSON的数据格式来保存。

 

计划:

  1. 制作一个简单的描色歌词制作工具(参考酷狗音乐的歌词制作工具),在读取普通的LRC歌词后能可视化地去编辑每个字的吟唱时间,生成项目专用的歌词文件; []
  2. 单独分离成一个控件; [√]
  3. 性能优化; [×]

 ------------------------------------------------------------------------------------------------------

经过不断地缝缝补补和复制粘贴,已经完成了计划中的1、2。(2018年4月28日

首先说第1项,歌词制作工具,在播放音乐的同时调整描色的进度,将吟唱时间记录到歌词数据中,导出控件专用的NRC歌词数据格式方便调用。制作描色的时候决定了歌词描色的准确与否,而且还必须得比较熟悉歌曲才能制作出完美的描色歌词,这点有待改进。

所有歌词都调整描色完毕之后点击导出NRC文件即可完成制作,如果在没有将所有字描色完成之前导出会导致歌词显示控件无法正常描色定位。操作方式跟酷狗的歌词制作工具差不多,按键盘上键切到上一个字,下键切到下一个字。酷狗歌词制作工具制作的描色歌词好像会进行后期计算调整,更加准确,以后会想办法实现。

歌词制作工具的调用步骤是:

1,载入歌词(可以是网易云的或者是NRC的)

2,设置音乐的路径

然后启动工具点击play就可以开始制作了(最好是一遍过,反复调整的话很麻烦)

最后是我用制作工具制作的NRC歌词播放效果演示:

歌词显示已经单独分离成一个控件了,调用方法如下:

1,加载歌词:

控件.LoadNRC(歌词字符串);//歌词字符串可以是网易云的也可以是NRC的

2,在播放音乐开始时实时调用此方法更新歌词:

控件.UpdatePositionTime(播放进度总毫秒);

3,调整音乐进度后要调用此方法重新定位歌词:

控件.ResetPositionTime(播放进度总毫秒);

4,暂停音乐时调用此方法(同时不要再UpdatePositionTime):

 控件.Pause();

控件源码、调用示例源码、歌词制作工具源码请通过Github获取:

https://github.com/NaiveNET/NaiveRC

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF 标签化文本框控件
WPF 标签化文本框控件
27 0
如何解决WPF中 ScrollViewer 内包含 TreeView 或者 ListBox 等控件时滚轮事件被劫持的问题
如何解决WPF中 ScrollViewer 内包含 TreeView 或者 ListBox 等控件时滚轮事件被劫持的问题
62 0
WPF 点击 Datagrid 中的TextBox 控件获取其所在行的数据
WPF 点击 Datagrid 中的TextBox 控件获取其所在行的数据
37 0
WPF 获取列表中控件的同时,选中其所在行
WPF 获取列表中控件的同时,选中其所在行
20 0
在WPF中使用winform控件WebBrowser
在WPF中使用winform控件WebBrowser
40 0
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
结合Photoshop和WPF,共同创建一个矢量的个性化进度条。
406 0
WPF 控件自定义背景
<!--控件要设置尺寸的话,设置的尺寸必须比下面的图形的尺寸要小,不然显示不开--> <Label Content="直角测试" Width="90" Height="90" HorizontalContentAlignment="Center" Vert...
891 0
WPF 实现 DataGrid/ListView 分页控件
原文:WPF 实现 DataGrid/ListView 分页控件 在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来。如果数据量很大,2000条数据,一次性显示在一个页面中,不仅消耗资源,而且用户体验也很糟糕。
1563 0
WPF中Ribbon控件的使用
原文:WPF中Ribbon控件的使用 这篇博客将分享如何在WPF程序中使用Ribbon控件。Ribbon可以很大的提高软件的便捷性。 上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可以找到想要的Menu。
2363 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
3D动画的菜谱式灯光与云渲染
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载