原生JS的网页手机音乐播放器歌词同步播放

最新推荐文章于 2024-08-26 15:51:32 发布

执念太深--终成陌路

最新推荐文章于 2024-08-26 15:51:32 发布

阅读量4.4k

点赞数

分类专栏： JavaScript的点滴文章标签： javascript 音乐播放器歌词同步

本文链接：https://blog.csdn.net/qq_33070429/article/details/54317617

版权

本文介绍了如何使用原生JavaScript来创建一个网页手机音乐播放器，并实现歌词与音乐播放的同步。首先获取歌词文本，然后通过分割处理歌词时间，将歌词转换为HTML元素并插入页面。通过监听音乐的`timeupdate`事件，实时更新当前播放时间对应的歌词样式，从而达到歌词同步的效果。最后，利用CSS调整滚动效果，使歌词随着播放进度上下滚动。

摘要由CSDN通过智能技术生成

整了一下之前写了好几次每一次都丢三落四的今天花了半天理了下思路整理了下头绪

        //获取歌词文本
            var txt = document.getElementById("lrc");
            var lrc = txt.value;//获取文本域里的值
            /*console.log(lrc);*/
            var lrcArr = lrc.split("[");//去除[
            /*console.log(lrcArr);*/
            var html = "";//定义一个空变量保存文本
            for(var i=0 ; i<lrcArr.length ; i++)
            {
                var arr = lrcArr[i].split("]");
                /*console.log(arr[1]);*/
                var allTime = arr[0].split(".");
                var time = allTime[0].split(":");
                //获取分钟 秒钟 把时间换算成秒钟
                var timer = time[0]*60 + time[1]*1；
                var text = arr[1];
                if(text)
                {
                    html += "<p id="+