-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
52 lines (52 loc) · 8.38 KB
/
index.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>仿豆瓣音乐播放器</title>
<link rel="stylesheet" href="doubanfm.css">
</head>
<body>
<div class="doubanfm">
<canvas class="visualizer"></canvas>
<div class="doubanfm-playlist"></div>
<div class="doubanfm-player">
<div class="doubanfm-title"></div>
<div class="doubanfm-artist"></div>
<div class="doubanfm-operations">
<span class="doubanfm-time">-0:00</span>
<span class="doubanfm-volume">
<svg viewBox="0,0,18,18" height="11" width="15" class="icon icon-volume"><g id="outbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="inbox" transform="translate(0.000000, 0.000000) scale(1.4)" fill="#919191"><path d="M4.39035714,1.10464215 L1.5,4 L0.5,4 C0.302857143,4 0,4 0,4.5 L0,7.5 C0,8 0.302857143,8 0.5,8 L1.5,8 L4.39035714,10.8952903 C4.4925,10.9974324 4.64607143,11.0281465 4.77964286,10.9727897 C4.91321429,10.917433 5,10.7874338 5,10.642792 L5,1.35714044 C5,1.2128557 4.91285714,1.08249944 4.77964286,1.02714267 C4.73535714,1.00892851 4.68892857,1 4.64285714,1 C4.55,1 4.45857143,1.03642833 4.39035714,1.10464215 Z" id="Shape" transform="translate(2.500000, 6.000000) scale(1, -1) translate(-2.500000, -6.000000) "></path><path d="M7.12915286,8.59484045 C7.22027735,8.70345348 7.35098117,8.7596009 7.48306566,8.7596009 C7.58707645,8.7596009 7.69154746,8.72462382 7.77806971,8.65282876 C8.50154297,8.04809348 9,6.99999993 9,5.99733213 C9,4.99466434 8.49141802,3.9226391 7.75091645,3.31882427 C7.55394027,3.15774562 7.2639987,3.1890409 7.10338027,3.38509663 C6.94276184,3.58207281 6.97267645,3.87201438 7.16965263,4.03263281 C7.69799061,4.46340315 7.98629522,4.99558479 8,5.99779236 C8.01370478,6.99999993 7.70397353,7.51469303 7.18714117,7.94638382 C6.99200589,8.10930337 6.96669353,8.39970517 7.12915286,8.59484045 Z"></path><path d="M10.2816139,10.0758436 C11.3056139,9.07623551 12,8.00000011 12,5.99779236 C12,3.99558461 11.3056139,2.91888899 10.2816139,1.9192809 C10.0998252,1.74209438 9.80896314,1.74531596 9.63085617,1.92756494 C9.45320943,2.10981393 9.45689123,2.40067596 9.63914022,2.5783227 C10.4864139,3.40534652 10.9724113,4.49650506 11,5.99825258 C11.0275887,7.50000011 10.4859537,8.59069843 9.63914022,9.41772225 C9.45689123,9.59536899 9.45366966,9.88669124 9.63085617,10.06848 C9.72106022,10.1605249 9.84071864,10.2065474 9.96037707,10.2065474 C10.0763537,10.2065474 10.1923303,10.1628261 10.2816139,10.0758436 Z"></path><path d="M12.7930946,11.483671 C14.1056555,10.1089798 14.999885,8.7399225 15,5.99687191 C15.000115,3.25382132 14.1051953,1.88522427 12.7935548,0.510533034 C12.6182092,0.326903371 12.3259665,0.32 12.1427971,0.495345618 C11.9591674,0.671151461 11.9522641,0.962473708 12.1276097,1.14610337 C13.2781715,2.35143191 14.0001151,3.57113359 14,5.99687191 C13.9998849,8.42261023 13.2781715,9.64277213 12.1271494,10.8481007 C11.9518038,11.0317303 11.9587072,11.3230526 12.1423369,11.4988584 C12.2311602,11.5844602 12.3457562,11.6263407 12.4598919,11.6263407 C12.5813912,11.6263407 12.7019701,11.5784773 12.7930946,11.483671 Z"></path></g></g></svg>
<span class="doubanfm-volume-slider">
<span class="doubanfm-volume-value"></span>
</span>
</span>
<div class="doubanfm-buttons">
<svg viewBox="0 0 20 20" height="20" width="20" class="icon"><g id="icon" fill="none" fill-rule="evenodd"><g id="ci" fill="#B9B9B9"><path d="M2 7.5c0-.276.229-.5.5-.5h11c.276 0 .5.232.5.5 0 .276-.229.5-.5.5h-11a.505.505 0 0 1-.5-.5zm1 3c0-.276.215-.5.498-.5h4.004c.275 0 .498.232.498.5 0 .276-.215.5-.498.5H3.498A.504.504 0 0 1 3 10.5zm0 3c0-.276.215-.5.498-.5h4.004c.275 0 .498.232.498.5 0 .276-.215.5-.498.5H3.498A.504.504 0 0 1 3 13.5zm-1 3c0-.276.233-.5.503-.5h5.994c.278 0 .503.232.503.5 0 .276-.233.5-.503.5H2.503A.507.507 0 0 1 2 16.5zm1-12c0-.276.215-.5.498-.5h4.004c.275 0 .498.232.498.5 0 .276-.215.5-.498.5H3.498A.504.504 0 0 1 3 4.5zM9.5 4c-.303 0-.5.255-.5.5s.197.5.5.5H16v11l-3.5.044c-.328 0-.5.15-.5.456 0 .308.172.5.5.5H16c.497 0 1-.5 1-1V5c0-.5-.505-1-1-1H9.5zm4.5 6.604a.601.601 0 0 0-.596-.604H9.597a.602.602 0 0 0-.597.604v2.791c0 .333.269.605.597.605h3.807a.602.602 0 0 0 .596-.605v-2.79zM10 11h3v2h-3v-2z" id="Combined-Shape"></path></g></g></svg>
</div>
</div>
<div class="doubanfm-progress">
<div class="doubanfm-progress-slider">
<div class="doubanfm-progress-value"></div>
</div>
</div>
<div class="doubanfm-controls">
<svg viewBox="0,0,30,30" height="26" width="26" class="icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M22,0 C18.9359565,0 16.5821582,1.72596986 15,3.5 C13.4530656,1.72596986 11.0993172,0 8,0 C3.7559698,0 0,3.9236383 0,9 C0,12.0105248 0.844640658,15.0729547 2.5,18 C6.88109125,25.6681877 15.0243286,28.9632358 15,29 C15.0243286,28.9631844 22.9314319,25.7540044 27.5,18 C29.1765036,15.1251042 30.0352238,12.2324468 30,9 C30.0352238,3.9236383 26.2791541,0 22,0 Z" id="b" fill="#FF2C56"></path></g></svg>
<svg viewBox="0,0,30,30" height="26" width="26" class="icon"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M19.0000002,2.99518936 L25.5501576,2.99518936 C27.2676993,2.99518936 27.9974555,4.25794694 27.9974555,5.16641446 L27.9974556,7.00000017 L2,7.00000017 L2,5.07556186 C2,4.18983672 2.59870784,2.99518936 4.31630844,2.99518936 L11,2.99518936 L11,1.5 C11,0.5 11.5,0 12.5,0 L17.5,0 C18.5,0 18.9999997,0.5 19,1.5 L19.0000002,2.99518936 Z M4.23383579,27.9351249 C4.2446828,28.8186284 4.84627924,29.9939828 6.54778618,30 L23.4857474,30 C25.1313687,29.9939828 25.8684938,28.8317828 25.9256175,27.9351249 L27.4668952,8 L2.53056032,8 L4.23383579,27.9351249 Z M11,25 C10,25 10,24.5 10,24 L10,13 C10,12.5 10,12 11,12 C12,12 12,12.5 12,13 L12,24 C12,24.5 12,25 11,25 Z M19,25 C18,25 18,24.5 18,24 L18,13 C18,12.5 18,12 19,12 C20,12 20,12.5 20,13 L20,24 C20,24.5 20,25 19,25 Z" fill="#4A4A4A"></path></g></svg>
<div class="right">
<svg viewBox="0,0,30,30" height="22" width="22" class="icon icon-prev"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="Fill-1-Copy-8-+-Path-Copy-6-+-Oval-3-Copy-2-Copy-Copy-Copy-Copy" fill="#4A4A4A"><path d="M25.278 1.347L6.305 13.495c-1.497.828-1.497 2.182 0 3.01l18.973 12.148c1.497.827 2.722.125 2.722-1.562V2.91c0-1.688-1.225-2.39-2.722-1.563zM5 28.5c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z" id="Fill-1-Copy-8"></path><path id="Path-Copy-6" d="M7 4H3v22.5h4z"></path><path d="M5 6c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z" id="Oval-3-Copy-2"></path></g></g></svg>
<svg viewBox="15 8 10 13" height="22" width="22" class="icon icon-play"><path d="M16.2404248,8.16131117 L24.4883398,13.8012748 C25.1705534,14.1855546 25.1705534,14.8143854 24.4883398,15.1986903 L16.2404248,20.8387042 C15.5581861,21.222984 15,20.8967404 15,20.1136905 L15,8.88632486 C15,8.1032498 15.5581861,7.7770062 16.2404248,8.16131117 Z" stroke="none" fill="#4a4a4a" fill-rule="evenodd"></path></svg>
<svg viewBox="61 0 22 22" height="22" width="22" class="icon icon-pause"><path d="M61,1.00246167 C61,0.448817378 61.4509752,0 61.990778,0 L66.009222,0 C66.5564136,0 67,0.43945834 67,1.00246167 L67,20.9975383 C67,21.5511826 66.5490248,22 66.009222,22 L61.990778,22 C61.4435864,22 61,21.5605417 61,20.9975383 L61,1.00246167 Z M77,1.00246167 C77,0.448817378 77.4509752,0 77.990778,0 L82.009222,0 C82.5564136,0 83,0.43945834 83,1.00246167 L83,20.9975383 C83,21.5511826 82.5490248,22 82.009222,22 L77.990778,22 C77.4435864,22 77,21.5605417 77,20.9975383 L77,1.00246167 Z" stroke="none" fill="#4a4a4a" fill-rule="evenodd"></path></svg>
<svg viewBox="0,0,30,30" height="22" width="22" class="icon icon-next"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="Fill-1-Copy-8-+-Path-Copy-6-+-Oval-3-Copy-2" fill="#4A4A4A"><path d="M4.722 1.347l18.973 12.148c1.497.828 1.497 2.182 0 3.01L4.722 28.653C3.225 29.48 2 28.778 2 27.09V2.91C2 1.22 3.225.52 4.722 1.346zM25 28.5c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" id="Fill-1-Copy-8"></path><path id="Path-Copy-6" d="M23 4h4v22.5h-4z"></path><path d="M25 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" id="Oval-3-Copy-2"></path></g></g></svg>
</div>
</div>
</div>
<a class="doubanfm-cover" href="javascript:" target="_blank">
<img src="https://img1.doubanio.com/lpic/s11138437.jpg" alt="专辑封面">
<span>查看专辑信息</span>
</a>
</div>
<script src="playlist.js"></script>
<script src="visualizer.js"></script>
<script src="doubanfm.js"></script>
</body>
</html>