C# WPF 低仿网易云音乐（PC）歌词控件

原文: C# WPF 低仿网易云音乐（PC）歌词控件

提醒：本篇博客记录了修改的过程，废话比较多，需要项目源码和看演示效果的直接拉到文章最底部~

 

网易云音乐获取歌词的api地址

http://music.163.com/api/song/media?id=歌曲ID

填写歌曲的id即可获取到json格式的数据（歌曲ID获取的方法是：点击分享按钮>其他分享>复制链接，就可以在链接中看到了）：

{
   "songStatus":0,"lyricVersion":10,"lyric":"[by:Esida]\n[ti:起风了]\n[ar:买辣椒也用劵]\n[al:起风了]\n[by:九九Lrc歌词网～www.99Lrc.net]\n\n\n[00:04.00]原曲: ヤキモチ\n\n\n\n[00:20.00]后期: 圣雨轻纱\n\n[00:24.00]海报：不 咸\n\n\n\n[00:28.64]这一路上走走停停 顺着少年漂流的痕迹\n\n[00:35.11]迈出车站的前一刻 竟有些犹豫\n\n[00:41.08]不禁笑这近乡情怯 仍无可避免\n\n[00:46.49]而长野的天 依旧这么暖 风吹起了从前\n\n[00:52.02]从前初识这世间 万般流连 看着天边似在眼前\n\n[00:59.50]也甘愿赴汤蹈火去走它一遍\n\n[01:04.52]如今走过这世间 万般流连 翻过岁月不同侧脸\n\n[01:11.75]措不及防闯入你的笑颜\n\n[01:17.37]我曾难自拔于世界之大 也沉溺于其中梦话 不得真假 不做挣扎 不惧笑话\n\n[01:30.39]我曾将青春翻涌成她 也曾指尖弹出盛夏 心之所动 且就随缘去吧\n\n[01:42.40]逆着光行走 任风吹雨打\n\n[01:49.89]-M-\n\n[01:59.14]短短的路走走停停 也有了几分的距离\n\n[02:05.20]不知抚摸的是故事 还是段心情\n\n[02:11.22]也许期待的不过是 与时间为敌\n\n[02:16.94]再次看到你 微凉晨光里 笑的很甜蜜\n\n[02:22.29]从前初识这世间 万般流连 看着天边似在眼前\n\n[02:29.58]也甘愿赴汤蹈火去走它一遍\n\n[02:34.42]如今走过这世间 万般流连 翻过岁月不同侧脸\n\n[02:41.87]措不及防闯入你的笑颜\n\n[02:47.23]我曾难自拔于世界之大 也沉溺于其中梦话 不得真假 不做挣扎 不惧笑话\n\n[03:00.13]我曾将青春翻涌成她 也曾指尖弹出盛夏 心之所动 且就随缘去吧\n\n[03:15.51]-=-\n\n[03:38.30]晚风吹起你鬓间的白发 抚平回忆留下的疤 你的眼中 明暗交杂 一笑生花\n\n[03:50.53]暮色遮住你蹒跚的步伐 走进床头藏起的画 画中的你 低着头说话\n\n[04:03.05]我仍感叹于世界之大 也沉醉于儿时情话 不剩真假 不做挣扎 无谓笑话\n\n[04:15.34]我终将青春还给了她 连同指尖弹出的盛夏 心之所动 就随风去了\n\n[04:27.63]以爱之名 你还愿意吗\n\n[04:35.36]-E-","code":200}

我们需要用到的数据只有lyric部分。

可以看到歌词的结构很简单：“[歌曲时间]歌词部分\n”，\n作为换行符。

看完歌词结构思路已经有了，将时间和歌词提取出来，播放音乐，获取音乐播放进度，跟歌词对应的时间作比对。

这里我们要做的控件效果如网易云音乐（以下简称网音）的效果差不多，先看下网音的效果动图：

网音的效果如图所示，播放到当前进度的歌词字体颜色变成白色，并且会滚动视图使焦点停在歌词整体中间的位置。

 

新建项目命名为：网易云音乐歌词显示控件，新建一个用户控件命名为：LrcView。

LrcView.xaml：

<UserControl x:Class="网易云音乐歌词显示控件.Controls.LrcView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
            
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <ScrollViewer Name="c_scrollviewer">
            <StackPanel Name="c_lrc_items">
            </StackPanel>
        </ScrollViewer>

    </Grid>
</UserControl>

应该很好理解，用一个scrollviewer包住stackpanel，把歌词（textblock）添加到stackpanel里，当前音乐所在进度的歌词颜色只要修改相应的textblock的字体颜色即可，歌词自动滚动则依靠scrollviewer。（小知识：*只要不设置固定高度stackpanel会随着包含的内容高度的增大而增大，这时候套个scrollviewer就可以滚动stackpanel了。）

转到控件后台代码，为了方便修改歌词颜色等一些操作，我们建立一个歌词模型类：

   #region 歌词模型
        public class LrcModel
        {
            /// <summary>
            /// 歌词所在控件
            /// </summary>
            public TextBlock c_LrcTb { get; set; }

            /// <summary>
            /// 歌词字符串
            /// </summary>
            public string LrcText { get; set; }

            /// <summary>
            /// 时间（读取格式参照网易云音乐歌词格式：xx:xx.xx，即分:秒.毫秒，秒小数点保留2位。如：00:28.64）
            /// </summary>
            public string Time { get; set; }
        }
        #endregion

添加一些需要用到的变量

 #region 变量
        //歌词集合
        public Dictionary<string, LrcModel> Lrcs = new Dictionary<string, LrcModel>();
        //当前焦点所在歌词集合位置
        public int FoucsLrcLocation { get; set; } = -1;
        //非焦点歌词颜色
        public SolidColorBrush NoramlLrcColor = new SolidColorBrush(Colors.Black);
        //焦点歌词颜色
        public SolidColorBrush FoucsLrcColor = new SolidColorBrush(Colors.OrangeRed);

        #endregion

接着是加载歌词

将歌词复制出来，用\n切割(split)，再用正则表达式取出时间、歌词，将获取到的数据添加到集合内以及对textblock进行赋值即可。

 #region 加载歌词
        public void LoadLrc(string lrcstr)
        {
            //循环以换行\n切割出歌词
            foreach (string str in lrcstr.Split('\n'))
            {
                //过滤空行
                if (str.Length > 0)
                {
                    //歌词时间
                    string time = GetTime(str);
                    //歌词
                    string lrc = str.Replace("[" + time + "]", "");

                    //过滤空行
                    if (time.Length > 0)
                    {

                        //歌词显示textblock控件
                        TextBlock c_lrcbk = new TextBlock();
                        //赋值
                        c_lrcbk.Text = lrc;
                        if (c_lrc_items.Children.Count > 0)
                        {
                            //增加一些行间距，see起来不那么拥挤~
                            c_lrcbk.Margin = new Thickness(0, 10, 0, 0);
                        }

                        //添加到集合，方便日后操作
                        Lrcs.Add(time, new LrcModel()
                        {
                            c_LrcTb = c_lrcbk,