-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmusic.html
91 lines (87 loc) · 3.73 KB
/
music.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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="referrer" content="no-referrer" />
<link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="css/details.css" />
<link rel="stylesheet" type="text/css" href="css/music.css" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- axios 在线地址 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<!-- jquery -->
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<!-- jQuery Cookie 插件在线地址用于方便获取cookie的值 -->
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<title>在线音乐播放</title>
</head>
<body>
<div id="biBox">
<!-- 导航栏 -->
<div id="banner">
<!-- 网站logon -->
<div id="logo">
<img src="img/diylogo1.png">
</div>
<!-- 导航栏左边标题 -->
<div id="title">
<ul>
<a href="javascript:void(0);" v-for="(item,index) in navigationBar" @click="changeStyle(index)" :style="index==setIndex?navigationBarStyle:''"
v-text="item">首页</a>
</ul>
</div>
<!-- 导航栏右边标题 -->
<div id="titleRight">
<select @click="doSelect($event)" v-if='isGetName!="登录"'>
<option value="设置" style="display: none;"></option>
<option value="个人中心" style="display: none;">个人中心</option>
<option value="后台管理">后台管理</option>
<option value="退出登录">退出登录</option>
</select>
<a href="login.html" @click.prevent="isLogged($event)" target="_blank" v-text="isGetName" title="登录">登录</a>
</div>
</div>
<div id="list-biBox" @click.self="hide()">
<div id="mainContent">
<div id="music-main">
<div id="music-head">
<marquee width="200px" behavior="scroll" scrollamount="6">
<strong v-text="showPlay">正在播放</strong>
</marquee>
<img src="img/search.png" @click.enter="musicSearch()">
<input type="text" ref="focus" placeholder="输入关键字|歌手|歌曲|按下Enter搜索" v-model="key_name" @keyup.enter="musicSearch()" />
</div>
<div id="music-mid">
<table border="0" cellspacing="0" cellpadding="10px" width="100%">
<tr>
<th>音乐标题</th>
<th>歌手</th>
<th>专辑</th>
<th>时长</th>
</tr>
<tr v-for="(itme,index) in musicList" :style="index%2==0?tableStyle:tableStyles">
<td v-cloak>{{index+1}}.{{itme.name}}<img class="playImg" src="img/play.png" @click="musicPlay(itme.id,itme.name)" /></td>
<td v-cloak>{{itme.artists[0].name}}</td>
<td v-cloak>{{itme.album.name}}<img :style="itme.mvid==0?MvIsvisible:playImg" src="img/MV.png" @click="playMv(itme.mvid,itme.name)" /></td>
<td v-cloak>{{itme.duration | changeMinuteSecond}}</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;" @click="backPage()"><label>上一页</label></td>
<td colspan="2" style="text-align: center;" @click="nextPage()"><label>下一页</label></td>
</tr>
</table>
</div>
<div id="music-footer">
<audio :src="musicUrl" id="music" controls="controls" autoplay="autoplay" loop="loop"></audio>
</div>
<video :src="musicMv" id="video" autoplay="autoplay" controls="controls" :style="videoIsPlay==true?videoMvShow:videoMvOff">
</video>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/music.js"></script>
</html>