MusicPlayer/index.html at master · Pulset/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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" >
  <meta name="referrer" content="never">
  <title>MusicPlayer</title>
 <link rel="stylesheet" type="text/css" href='stylesheets/index.css'>
</head>
<body>

<div class="container">
  <h4 id="title"></h4>      <!-- 歌曲名 -->
  <h4 id="artist" ></h4>    <!-- 歌手 -->
  <div class="pic" ><img id='img' src="" class="image" ></div>    <!-- 图片 -->
  <div class="box" >
    <div class="lrc" ></div>
  </div>

  <audio id="song" src=""  autoplay=""></audio>
  <div id="loadBar" >                                                                                 <!-- 进度条 -->
    <canvas id="progressBar" width="280px" height="2px;">Your brower is not support canvas</canvas>
    <input id="bar" type="range" name="" min="0" max="100%" value="0" step="0.01" >
  </div>

  <button class="showLyric" onclick="showLyric()">词</button>
  <div class="controls">                                                                              <!-- 按钮 -->
    <div id="pre" ><a href="javascript:void(0);"><img src="images/上一首.png" onclick="pre()" ></a></div>
    <div id="play"><a href="javascript:void(0);"><img id="start" src='images/暂停.png' onclick="pauseOrPlay()"></a></div>
    <div id="next"><a href="javascript:void(0);"><img src="images/下一首.png" onclick="next()"></a></div>
  </div>

</div>

</body>
<script type="text/javascript" src="javascript/jquery-3.1.0.js"></script>
<script type="text/javascript" src='javascript/index.js'></script>
</html>