js播放音乐歌词跟随改变（面向对象）

最新推荐文章于 2023-03-05 13:07:25 发布

VIP文章 weixin_57865715

最新推荐文章于 2023-03-05 13:07:25 发布

阅读量243

点赞数

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/weixin_57865715/article/details/121754783

版权

音乐播放的时候歌词跟随改变，本篇文章没有加上歌词滚动，有兴趣的朋友可以加上，应用的是面向对象的方式，内含了一个简单的闭包，查看的时候注意一些，这个方法需要注意的是索引值，只要注意好索引值的应用和获取就能很好的解决问题。

 <style>
        .box {
            width: 500px;
            margin: 50px auto 0;
            text-align: center;
        }

        ul {
            list-style: none;
        }

        ul li {
            width: 100%;
            height: 26px;
            line-height: 26px;
            user-select: none;
        }

        .active {
            color: red;
        }
    </style>
<body>
    <div class="box">
        <audio src="./music/歌曲.mp3" controls muted></audio>
        <ul></ul>
    </div>
</body>
<script>
    var lyric = `[00:00.000] 作词 : 黄家驹\n[00:01.000] 作曲 : 黄家驹\n[00:02.000] 编曲 : Beyond/Kunihiko Ryo\n[00:03.000] 制作人 : Beyond/Kunihiko Ryo\n[00:04.000]\n[00:18.123]今天我 寒夜里看雪飘过\n[00:24.720]怀着冷却了的心窝漂远方\n[00:3

最低0.47元/天解锁文章

weixin_57865715

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js播放音乐歌词跟随改变（面向对象）

音乐播放的时候歌词跟随改变，本篇文章没有加上歌词滚动，有兴趣的朋友可以加上，应用的是面向对象的方式，内含了一个简单的闭包，查看的时候注意一些，这个方法需要注意的是索引值，只要注意好索引值的应用和获取就能很好的解决问题。 <style> .box { width: 500px; margin: 50px auto 0; text-align: center; } ul {
复制链接

扫一扫