美文网首页ITWeb前端之路
用最笨的js方法写个带歌词同步的播放器

用最笨的js方法写个带歌词同步的播放器

作者: Elecrabbit | 来源:发表于2017-04-14 16:12 被阅读186次

看一个大佬写的一个音乐播放器觉得好厉害,就想着来研究一下,碍于能力有限,琢磨了一天写了一个简单的歌词同步。
话不多说,上栗子:

效果就是这样,因为没写样式直接用的H5的audio标签和控件,所以很简陋,而且不同浏览器还有不一样的样式。。。不要在意这些细节,我们的重点是让歌词同步显示出来。

上HTML码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>lrctest</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/lrctest.js" type="text/javascript"></script>
    </head>
    <body>
            <audio src="thz.mp3" controls="controls" autoplay="autoplay">
                抱歉你的浏览器版本out了,去升级吧
            </audio>
        <div id="lyric"></div>
    </body>
</html>

很简单就一个audio和一个显示歌词的div。
(不要问我为什么js写在外面,我怕你一页看不完T_T)

下面上js文件:

$(document).ready(function () {
    var lrc = []; //创建歌词数组;
    lrc.push("[00:00.805]陈一发儿 - 童话镇");
    lrc.push("[00:10.000]作曲 : 暗杠 作词 : 竹君");
    lrc.push("[00:15.000]编曲 : 暗杠");
    lrc.push("[00:23.076]听说白雪公主在逃跑");
    lrc.push("[00:26.466]小红帽在担心大灰狼");
    //...中间省略N行...
    lrc.push("[03:22.746]又陌生");
    lrc.push("[03:24.488]啊~~啊~~啊~");
    lrc.push("[10:00.000]完~");

    var myAudio = $("audio")[0];
    var lrcArr = [];
    getLrc();

    function getLrc() {
        var timeReg = /\[\d{2}:\d{2}\.\d{3}\]/g;//匹配时间的正则表达式
        var result = [];
        for (var i=0;i<lrc.length;i++) {
            var time = lrc[i].match(timeReg); //获取歌词里的时间
            var value = lrc[i].replace(timeReg, ""); //获取纯歌词文本
            for (var j=0;j<time.length;j++ ) {
                var t = time[j].slice(1, -1).split(":"); //t[0]分钟,t[1]秒
                var timeArr = parseInt(t[0], 10) * 60 + parseFloat(t[1]);
                result.push([timeArr, value]);//以[时间(秒),歌词]的形式存进result
            }
        }
        lrcArr = result;//这个有点多余。。。
        setInterval(showLrc, 200);//设置定时,每200毫秒更新一下
    }
    function showLrc() {
        var curTime = myAudio.currentTime;//获取当前的播放时间
        for (var i = 0; i < lrcArr.length; i++) {
            if ((curTime >lrcArr[i][0])&&(curTime<lrcArr[i+1][0])) {
                 //播放时间大于对应歌词时间小于下一句歌词时间就显示当前歌词
                document.getElementById("lyric").innerHTML = lrcArr[i][1];
                break;//找到对应歌词就停,不停的话,呵呵。。。
            }
        }
    }
})

完结~
总结一下:很简单基本什么都没有,歌曲文件在本地,需要手动push每一行歌词进去,这个有点恶心,毕竟还不会从服务器加载歌词,只能用这个最笨蛋的法子。
虽然贴到这感觉工作量不大,但我这菜狗子还是调了大半天才让歌词同步显示出来 。。。唉
Ps:如果的你lrc不是这个样子:“[00:23.076]听说白雪公主在逃跑”
而是这个样子:
“[00:23.076]听[00:23.336]说[00:23.592]白[00:23.826]雪[00:24.061]公[00:24.321]主[00:24.586]在[00:24.921]逃[00:25.175]跑[00:25.745]”
还是别寻他法吧。 哈哈


如果你是个小白,这个方法可以看看,如果你是大神,,,(哪位大神临幸我了,求抱大腿)

菜鸟如我,且学且珍惜!

相关文章

  • 用最笨的js方法写个带歌词同步的播放器

    看一个大佬写的一个音乐播放器觉得好厉害,就想着来研究一下,碍于能力有限,琢磨了一天写了一个简单的歌词同步。话不多说...

  • 用最笨的方法

    今天早上参加华与华创意百万大奖,会上听到了营销日历和华与华使用说明书,这个确实是好东西,打算复制到公司去,营销日历...

  • [JS]用lodash写个类似unwind的方法

    在mongo里, 用聚合函数写一个聚合搜索常常会用到$unwind, 用来把document里的数组展平。比如{ ...

  • 如何自己写简单的virtual dom(读博客笔记)

    原文 正常的dom 用js的object来代表dom 写个帮助方法创建js的dom 现在就可以这样写: 可以通过b...

  • 用最笨的方法教学,教会学生用最笨的方法学习

    随着经济的发展,物质条件的提升,很多学生家长都在县城里买了房,这件大好事却也给当前农村学校带来大量优秀生的...

  • iOS-QQ音乐播放器的简单实现

    一. QQ音乐播放器的简单实现 每个音乐播放器的实现都大致相同,个人认为难点在于歌曲播放与Slider的同步,歌词...

  • 用最笨的方法教语文

    ——《纪念白求恩》教学课例 拿到这篇文章,我头脑中第一个念头是本文无须多讲,全文会背即可,对于年长者来说《纪念白求...

  • 用最笨的方法学习!

    2020年2月25日 星期二 阴天 儿子的语文水平一直没有提升,每每考试总是倒数,堪堪及格。 究其原因,并不是因为...

  • 用最笨的方法学习

    学习一件事情,在不得其法的时候,就用最笨的办法坚持下来。 最近翻了翻做了一年多的手账本,在这一年多当中,前后换了很...

  • 用最笨的方法学英语

    今天是重新“拿起”英语第二天。 英语,总是横在我面前,像是一道跨不过去的“坎”。 拿起,放下,再拿起,再放下。每次...

网友评论

本文标题:用最笨的js方法写个带歌词同步的播放器

本文链接:https://www.haomeiwen.com/subject/hmwwattx.html