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

原文: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

原文地址:https://www.cnblogs.com/lonelyxmas/p/9919849.html

时间: 2024-10-07 06:08:32

C# WPF 歌词控件(支持逐字定位描色效果)的相关文章

WPF条形码控件支持大多数流行的一维和二维条形码Barcode Professional

Barcode Professional for WPF是一款轻量级的 .NET 程序集,为你的WPF程序生成高质量的基于矢量的条码控件,支持大多数流行的一维和二维条形码:Code 39, Code 128, GS1-128, GS1 DataBar (RSS-14),  EAN 13 & UPC, Postal (USPS, British Royal Mail, Australia Post, DHL, etc.), Data Matrix, QR Code, PDF 417, UPS Ma

C# WPF 低仿网易云音乐(PC)歌词控件

原文:C# WPF 低仿网易云音乐(PC)歌词控件 提醒:本篇博客记录了修改的过程,废话比较多,需要项目源码和看演示效果的直接拉到文章最底部~ 网易云音乐获取歌词的api地址 http://music.163.com/api/song/media?id=歌曲ID 填写歌曲的id即可获取到json格式的数据(歌曲ID获取的方法是:点击分享按钮>其他分享>复制链接,就可以在链接中看到了): {"songStatus":0,"lyricVersion":10,

Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 一.概述 最近在研究QTableView支持多级表头的事情,百度了下网上资料还是挺多的.实现的方式总的来说有2种,效果都还不错,最主要是搞懂其中的原理,做到以不变应万变. 实现多级表头的方式有以下两种方案 行表头和列表头都是用一个表格去模拟 重写QHeadView 以上两种方式都可以实现多级表头,各

WPF布局控件常用属性介绍

WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0) 概述:WPF布局控件都是派生自System.Windows.Controls.Panel抽象类的面板,Panel类继承自 FrameworkElement,Panel类本身并没有什么特别的,但是WPF中提供了许多用于布局的控件都继承自Panel类,如 StackPanel控件,WrapPanel,DockPanel,Grid,UniformGrid,Canva

WPF第三方控件盘点

WPF统一的编程模型.语言和框架,实现了界面设计人员和开发人员工作可以分离的境界,鉴于WPF强大的优势,且一直是开发者关注的地方,下面和大家分享基于WPF项目开发需要用到的第三方控件,包括业界最受好评的网格控件.图表控件.停靠窗口和文本编辑器. 网格控件 1. Mindscape WPF Property Grid 这款表格控件是100%原生WPF表格控件,是Mindscape公司旗下WPF Elements用户界面套包里的一个商业子控件,当前已经更新到了5.1版本,新的版本在属性表格的性能以及

wpf 修改控件Background

以TextBox 控件为例 一  Brushes.颜色 textBoxName.Background = Brushes.Blue; 二 背景色值#FFD2D2D2 1 .textBoxName.Background=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFD2D2D2")); 2.textBoxName.Background = new SolidColorBrush(Colors.White);

javascript可编辑表格控件 支持全键盘操作

项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定义键位 包括:列焦点切换,行焦点切换,新建行,数据保存(默认 上,下,左,右 键操作) 3.丰富的事件,绝大多数的客户端操作都能触发无刷新后台事件 4.支持统计运算,可自定义运算插件 5.兼容 Ie,chorme,firefox等绝大多数主流浏览器 下载地址:http://files.cnblogs

WPF获取控件内部的ScrollViewer,并控制ScrollViewer操作

//获取内部  ScrollViewer方法 public static T FindVisualChild<T>(DependencyObject obj) where T : DependencyObject        {            if (obj != null)            {                for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)          

WPF 布局控件 之 DockPanel

DockPanel为容器控件 主要了解其Dock属性和LastChildFill属性的使用 一.LastChildFill="True" 时 代码: <DockPanel LastChildFill="True"> <Button DockPanel.Dock="Top">Top</Button> <Button DockPanel.Dock="Bottom">Bottom<