-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
executable file
·141 lines (138 loc) · 6.66 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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="vPlayer,vuejs,播放器,网易云api" />
<meta name="description" content="用vuejs+网易云api写的一款在线播放器">
<meta name="author" content="vPlayer">
<title>vPlayer</title>
<link rel="stylesheet" type="text/css" href="dist/css/vplayer.min.css">
</head>
<body>
<div id="app" class="home page page-template-landing" :class="{'site-player-is-open':listOpen}">
<div id="viewport-panel">
<div id="page" class="hfeed site">
<header class="site-header" :style="{ backgroundImage: 'url('+ playingPic +')' }">
<div id="lyricWrapper" class="site-branding">
<div v-show="lyric.length != 0" id="lyricContainer">
<p v-for="(lrc, index) in lyric" :id="'line-'+index">{{lrc[1]}}</p>
</div>
<div v-text="lyricText" class="lyric-description"></div>
</div>
</header>
<div id="content" class="site-content">
<main id="primary" class="content-area">
<div id="post" class="post page type-page status-publish hentry">
<div class="entry">
<div class="entry-header">
<h1 class="entry-title">New Song!</h1>
</div>
<div class="entry-content">
<p class="content">Enjoy music from NetEaseCloud!</p>
<p class="btn" :class="{'expand': goSearch}">
<a class="button" href="#" @click="goSearch">Let's Go</a>
</p>
</div>
<div class="form-table" :class="{'insearch': goSearch}">
<form action="" @submit.prevent>
<div class="input-group">
<input type="text" @keyup.enter="formSubmit" @blur="formSubmit" class="form-control" name="search" placeholder="试试输入“Tobu”" autocomplete="off" v-model="search">
</div>
</form>
</div>
</div>
<div class="table-example" :class="{'insearch': goSearch}">
<table class="table is-striped">
<thead v-show="isSearch">
<tr>
<th class="jin">#</th>
<th>歌曲名</th>
<th>歌手</th>
<th>专辑</th>
</tr>
</thead>
<tbody>
<tr v-for="list in songLists" @click="playMusic(list.id)">
<td>
<i class="is-playable"></i>
</td>
<td>{{ list.name }}</td>
<td>
<span v-if="list.ar.length >= 1">{{list.ar[0].name}}</span>
<span v-if="list.ar.length >= 2">/ {{list.ar[1].name}}</span>
<span v-if="list.ar.length >= 3">/ {{list.ar[2].name}}</span>
<span v-if="list.ar.length >= 4">/ {{list.ar[3].name}}</span>
<span v-if="list.ar.length >= 5">/ {{list.ar[4].name}}</span>
</td>
<td>{{ '《' +list.al.name+ '》'}}</td>
</tr>
</tbody>
</table>
<nav style="margin-bottom: 3em;">
<ul class="pager">
<li v-show="pages != 0">
<a href="#" @click="prevPage">上一页</a>
</li>
<li v-show="isSearch">
<a href="#" @click="nextPage">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</main>
</div>
</div>
</div>
<button id="site-player-toggle" class="site-player-toggle" :class="{'is-open':listOpen}" @click="isListOpen">Toggle Player</button>
<div id="site-player-panel" class="site-player-panel">
<div class="site-player tracks-count-8 is-shuffling is-playing">
<div class="controls">
<button class="previous" @click="prevPlay" title="上一首">上一首</button>
<button class="play-pause" @click="setPlay(playingId)" :class="[ isPlay ? 'pause' : 'play']" title="播放/暂停">播放/暂停</button>
<button class="next" @click="nextPlay" title="下一首">下一首</button>
<button class="repeat" :class="{'is-active': isActive}" title="单曲循环" @click="setLoop">单曲循环</button>
<button class="shuffle" title="随机播放" @click="setRandom">随机播放</button>
<div class="progress-bar" @click="clickProgress">
<div class="play-bar" :style="{ width: progress+'%'}"></div>
<div class="play-point"></div>
</div>
<div class="times">
<span class="current-time">{{ showCurrentTime }}</span> /
<span class="duration">{{ showDurationTime }}</span>
</div>
<div class="volume-panel">
<button class="volume-toggle" :class="{'is-muted': isMuted}" @click="setMuted" title="静音">静音</button>
<input v-model="range" @change="setVolume" type="range" min="0" max="1" step="0.1" :value="range">
</div>
</div>
<div class="playlist">
<ol class="tracks-list">
<li class="track" v-for="(paly, index) in playingLists" :class="{'is-current is-playing': currentIndex == index && isPlay}">
<span class="track-status track-cell"></span>
<span class="track-details track-cell" @click="playHistoryList(paly.id, index)">
<span class="track-title">{{ paly.title }}</span>
<span class="track-artist">{{ paly.artists }}</span>
</span>
<span class="track-actions track-cell"></span>
<span @click="removeList(index)" class="track-length track-cell">X</span>
</li>
</ol>
</div>
</div>
</div>
<div class="site-current-track-details">
<span class="title">{{ playingTitle }}</span> -
<span class="artist">{{ playingArtist }}</span>
<div class="times">
<span class="current-time">{{ showCurrentTime }}</span> /
<span class="duration">{{ showDurationTime }}</span>
</div>
</div>
<button class="site-play-pause-button" :class="[ isPlay ? 'pause' : 'play']" @click="setPlay(playingId)" title="播放/暂停">播放/暂停</button>
</div>
<script src="dist/js/app.min.js" charset="utf-8"></script>
</body>
</html>