播放歌曲显示歌词

 /// <summary>
        /// 显示歌词
        /// </summary>
        /// <param name="lrcPath">歌词文件路径</param>
        /// <param name="arrLrc">歌词数组</param>
        /// <param name="strTime">歌曲中的时间字符 MedioPlay.Ctlcontrols.currentPositionString</param>
        /// <param name="labFirst">显示的第一行文本</param>
        /// <param name="labNext">显示的下一行文本</param>
        /// <param name="musicName">歌曲名称</param>
        public static void ShowLrcMusic(string musicName, string lrcPath, string[] arrLrc, string strTime, Label labFirst, Label labNext)
        {
            if (!File.Exists(lrcPath)) return;
            else
            {
                //实例化个歌词集合
                List<string> lrcList = new List<string>();
                //一行一行读取歌词
                arrLrc = File.ReadAllLines(lrcPath);
                //创建分割后的数组
                string[] arr;
                for (int i = 0; i < arrLrc.Length; i++)
                {
                    //按‘[]’,‘[]’分割
                    arr = arrLrc[i].Split(new char[] { '[', ']' }, StringSplitOptions.RemoveEmptyEntries);
                    for (int j = 0; j < arr.Length; j++)
                    {
                        //查处分割出的时间兵用‘|’隔开
                        if (arr[j].Contains(":") && arr[j].Contains("."))
                            //添加到集合中去
                            lrcList.Add(arr[j] + "|" + arr[arr.Length- 1]);
                    }
                }
                //按时间从小到大排序
                lrcList.Sort();
                //排序后的集合赋给数组
                arrLrc = lrcList.ToArray();
                for (int i = 0; i < arrLrc.Length- 1; i++)
                {
                    //比较字符串大小
                    if (string.Compare(strTime, arrLrc[0]) < 0)
                    {
                        labFirst.Text = musicName;
                        labNext.Text = "。。。。。。。。。。。。。。。";
                    }
                    if (string.Compare(strTime, arrLrc[i]) > 0 &&
                      string.Compare(strTime, arrLrc[i + 1]) < 0
                       )
                    {
                        //得到歌词
                        labFirst.Text = arrLrc[i].Split('|')[1];
                        //得到下一句歌词
                        labNext.Text = arrLrc[i + 1].Split('|')[1];
                    }
                    if (string.Compare(strTime, arrLrc[arrLrc.Length- 1]) > 0)
                    {
                        labFirst.Text = arrLrc[i + 1].Split('|')[1];
                        labNext.Text = arrLrc[i + 1].Split('|')[1];
                    }
                }
            }
        }

 

转载于:https://www.cnblogs.com/LoVeSW/p/3425230.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 HTML 中播放音乐并自动显示歌词,您需要使用 JavaScript 来实现。以下是一个基本的实现示例: 首先,您需要为歌曲歌词准备好相应的 HTML 和 CSS 标记。例如: ```html <div id="music-player"> <audio id="audio" src="music.mp3"></audio> <div id="lyrics"></div> </div> ``` ```css #lyrics { height: 300px; overflow: auto; font-size: 18px; line-height: 1.5; } ``` 然后,在 JavaScript 中,您需要使用 XMLHttpRequest 对象获取歌词文件,并将其解析为可供显示的格式。例如: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'lyrics.txt', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var lyrics = xhr.responseText.split('\n'); var html = ''; for (var i = 0; i < lyrics.length; i++) { html += '<p>' + lyrics[i] + '</p>'; } document.getElementById('lyrics').innerHTML = html; } }; xhr.send(); ``` 接下来,您需要在音乐播放器中添加一个 `timeupdate` 事件监听器,以便在歌曲播放时更新歌词显示。例如: ```javascript var audio = document.getElementById('audio'); audio.addEventListener('timeupdate', function() { var lyrics = document.getElementById('lyrics').getElementsByTagName('p'); for (var i = 0; i < lyrics.length; i++) { var start = lyrics[i].getAttribute('data-start'); var end = lyrics[i].getAttribute('data-end'); if (audio.currentTime >= start && audio.currentTime < end) { lyrics[i].className = 'active'; document.getElementById('lyrics').scrollTop = lyrics[i].offsetTop - 150; } else { lyrics[i].className = ''; } } }); ``` 在这个事件监听器中,您需要遍历所有歌词元素,并根据当前播放时间决定哪些歌词应该被突出显示。您可以使用 `data-start` 和 `data-end` 属性来指定每个歌词的开始和结束时间。 最后,您需要使用 CSS 样式来突出显示当前的歌词。例如: ```css #lyrics p.active { color: red; font-weight: bold; } ``` 通过以上步骤,您就可以在 HTML 中播放音乐并自动显示歌词了。请注意,这只是一个基本实现示例,您可能需要根据自己的需求进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值