MusicPlayer/index.html at main · Mengobs/MusicPlayer · GitHub

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
55
56
57
58
59
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MusicPlayer Like AM</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <div class="leftcontent">
        <div class="svgcontainer">
            <div class="svg"></div>
        </div>
        <div class="time">
            <p class="start">0:00</p>
            <p class="name">点击音乐图标选择音频和 lrc 文件</p>
            <p class="end">-0:00</p>
        </div>
        <div class="processbar">
            <div class="process"></div>
        </div>
        <div class="conbox">
            <div class="controls">
                <div class="play">
                    <svg viewBox="0 0 32 28" xmlns="http://www.w3.org/2000/svg" style="filter: brightness(1.2)">
                        <path
                            d="M10.345 23.287c.415 0 .763-.15 1.22-.407l12.742-7.404c.838-.481 1.178-.855 1.178-1.46 0-.599-.34-.972-1.178-1.462L11.565 5.158c-.457-.265-.805-.407-1.22-.407-.789 0-1.345.606-1.345 1.57V21.71c0 .971.556 1.577 1.345 1.577z"
                            fill-rule="nonzero" fill="#c1c1c1"></path>
                    </svg>
                </div>
                <div class="pause">
                    <svg viewBox="0 0 32 28" xmlns="http://www.w3.org/2000/svg" style="filter: brightness(1.2)">
                        <path
                            d="M13.293 22.772c.955 0 1.436-.481 1.436-1.436V6.677c0-.98-.481-1.427-1.436-1.427h-2.457c-.954 0-1.436.473-1.436 1.427v14.66c-.008.954.473 1.435 1.436 1.435h2.457zm7.87 0c.954 0 1.427-.481 1.427-1.436V6.677c0-.98-.473-1.427-1.428-1.427h-2.465c-.955 0-1.428.473-1.428 1.427v14.66c0 .954.473 1.435 1.428 1.435h2.465z"
                            fill-rule="nonzero" fill="#c1c1c1"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="rightcontent">
        <div class="lyricscontainer">
            <div class="lyrics"></div>
        </div>
    </div>

    <!-- <div class="background"></div> -->
    <canvas class="canvas"></canvas>

    <input type="file" accept="audio/* text/* image/* .lrc" class="audiofile" multiple />
    <audio class="player"></audio>

    <script src="./index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
</body>

</html>