LRC播放器

LRC播放器

lrc_player.jsview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function toSecond(time) {
    return new Date(`1970-01-01T${time}Z`).getTime() / 1000;
}

/**
 * 播放歌词
 * 
 * @param  { 
 *              lyrics, 歌词，格式为二维数组。e.g. [ ['00:00:00.40', '周杰伦 - 等你下课 (with 杨瑞代)'], ['00:00:03.94', '词：周杰伦'], ['00:00:05.21', '曲：周杰伦'] ]
 *              seek  = '00:00:00', 开始时间
 *              print = (lyric) => console.log(lyric), 歌词回调
 *              interval = 50 刷新检测间隔 ms
 *          }
 * @returns
 */
function play({ lyrics, seek = '00:00:00', print = (lyric) => console.log(lyric), interval = 50 }) {
    seek = toSecond(seek);
    lyrics = lyrics.map(lyric => [toSecond(lyric[0]), lyric[1]]).sort((lyric1, lyric2) => lyric1[0] - lyric2[0]).filter(lyric => lyric[0] >= seek);

    // setInterval和setTimeout在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作
    // 可以使用 Web Worker 解决或者 requestAnimationFrame 解决[更新：经过测试窗口处于非激活状态下 requestAnimationFrame 也会停止工作]
    // [RAF replacements for setTimeout and setInterval](https://bl.ocks.org/joyrexus/7304146)
    // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
    const timer = setInterval(() => {
        if (lyrics.length === 0) return clearInterval(timer);

        // seek 之前的全部显示 
        while (lyrics.length > 0 && lyrics[0][0] <= seek) print(lyrics.shift()[1]);

        seek += (interval / 1000);
    }, interval);

    return timer;
}

TODO

  • 使用RAF模拟setInterval
  • 封装为对象，支持play、pause、resume、seek、reset等功能
lrc_player_class.jsview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
class LRCPlayer {
    constructor({ lyrics, print = (lyric) => console.log(lyric), done = () => { }, interval = 50 }) {
        this.lyrics = lyrics;
        this.print = print;
        this.done = done;
        this.interval = interval;
        this.seek = 0;
        this._timer = null;
        this.state = 'INIT';
    }

    // 播放（支持seek）
    play(seek = '00:00:00') {
        if (this.state === 'PLAY') return;

        if (this.state !== 'PAUSE') {
            this.seek = toSecond(seek);
        }
        this.state = 'PLAY';

        const lyrics = this.lyrics.map(lyric => [toSecond(lyric[0]), lyric[1]]).sort((lyric1, lyric2) => lyric1[0] - lyric2[0]).filter(lyric => lyric[0] >= this.seek);
        this._timer = setInterval(() => {
            if (lyrics.length === 0) {
                clearInterval(this._timer);
                this.done();
                return;
            }

            // seek 之前的全部显示
            while (lyrics.length > 0 && lyrics[0][0] <= this.seek) this.print(lyrics.shift()[1]);

            this.seek += (this.interval / 1000);
        }, this.interval);
    }

    // 暂停
    pause() {
        if (this.state === 'PAUSE') return;
        this.state = 'PAUSE';
        clearInterval(this._timer);
    }

    // 继续播放
    resume() {
        if (this.state === 'PAUSE') this.play();
    }

    // 重新开始
    reset() {
        this.pause();
        this.state = 'INIT';
        this.play();
    }
}

参考

本站采用「署名 4.0 国际」进行许可。