Moon0015.github.io/index.html at main · Moon0015/Moon0015.github.io · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Moon</title>
    <link rel="stylesheet" type="text/css" href="./css/audio.css">
</head>

<body id="body" background="./img/bg0.png">
    <div class="upper-container">
        <!-- 唱片背景 -->
        <div class="record-container">
            <div class="record-bg">
                <div id="record-img" class="rotate-play"></div>
            </div>
        </div>
        <!-- 音乐介绍 -->
        <div class="introduction-container">
            <div class="text-container">
                <div id="music-title">音乐1</div>
                <div class="author-container">作者：
                    <span id="author-name">未知</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 音乐播放器主要内容 -->
    <div class="audio-box">
        <div class="audio-container">
            <audio id="audioTag"></audio>
            <!-- 进度条 -->
            <div class="a-progress">
                <div class="pgs-total" id="progress-total">
                    <div class="pgs-play" id="progress" style="width: 0%;"></div>
                </div>
            </div>
            <!-- 下排控制按钮 -->
            <div class="a-controls">
                <!-- 播放时长 -->
                <div class="time-container">
                    <span class="played-time" id="playedTime">00:00</span>&nbsp;/&nbsp;
                    <span class="audio-time" id="audioTime">00:00</span>
                </div>
                <!-- 中间按钮 -->
                <div class="center-button-container">
                    <!-- 播放模式 -->
                    <div id="playMode" class="center-icon mode"></div>
                    <!-- 上一首 -->
                    <div id="skipForward" class="center-icon s-right"></div>
                    <!-- 暂停按钮 -->
                    <div id="playPause" class="icon-play"></div>
                    <!-- 下一首 -->
                    <div id="skipBackward" class="center-icon s-left"></div>
                    <!-- 音量调节 -->
                    <div id="volume" class="center-icon volume"></div>
                    <!-- 音量悬浮窗 -->
                    <input type="range" id="volumn-togger" name="change" value="70" min="0" max="100" step="1">
                </div>
                <!-- 后部按钮 -->
                <div class="bottom-button-container">
                    <!-- 列表 -->
                    <div id="list" class="bottom-icon list"></div>
                    <!-- 倍速 -->
                    <div id="speed" class="speed">1.0X</div>
                    <!-- MV -->
                    <div id="paper" class="bottom-icon MV"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 音乐列表 -->
    <div class="close-list" id="close-list"></div>
    <div class="music-list" id="music-list">
        <div class="music-list-container">
            <div class="music-list-title">播放队列</div>
            <hr class="line">
            <div class="all-list">
                <div id="music0">在东北的小偶像</div>
                <div id="music1">霓虹甜心</div>
                <div id="music2">恋爱告急</div>
                <div id="music3">快点告诉你</div>
				<div id="music4">拜托丘比特</div>
				<div id="music5">不如回家喝自来水</div>
				<div id="music6">童话镇</div>
				<div id="music7">心电心</div>
				<div id="music8">羊羊小心愿</div>
				<div id="music9">说爱你</div>
				<div id="music10">膨胀</div>
				<div id="music11">妈妈乐疯狂</div>
				<div id="music12">咖喱咖喱</div>
				<div id="music13">谷雨</div>
				<div id="music14">Angelina</div>
            </div>
        </div>
    </div>
    <script src="./js/audio.js"></script>
</body>

</html>