forked from S-mohan/smusic
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (80 loc) · 3.96 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
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="html5,css3,javascript,音乐,音乐播放器,audio,水墨寒,smohan,成都网站建设,成都网站设计,水墨寒WEB工作室,jquery,css3,html5,前端博客,前端技术,css3学习,前端">
<meta name="description" content="一款基于HTML5、Css3的列表式音乐播放器,包含列表,音量,进度,时间以及模式等功能,不依赖任何库"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="version" content="1.0.0">
<meta name="author" content="smohan,http://www.smohan.net/">
<link rel="shortcut icon" type="image/ico" href="http://data.smohan.net/static/img/favicon.ico?version=5.0.3">
<link rel="stylesheet" href="http://data.smohan.net/static/css/demo.css">
<link rel="stylesheet" href="src/css/smusic.css"/>
<title>HTML5音乐播放器SMusic</title>
</head>
<body>
<div class="grid-demo-info">
<h1 class="m-demo-title">HTML5音乐播放器SMusic</h1>
<p class="m-demo-summary">项目地址:<a href="http://www.smohan.net/lab/smusic.html">http://www.smohan.net/lab/smusic.html</a></p>
</div>
<div class="grid-music-container f-usn">
<div class="m-music-play-wrap">
<div class="u-cover"></div>
<div class="m-now-info">
<h1 class="u-music-title"><strong>标题</strong><small>歌手</small></h1>
<div class="m-now-controls">
<div class="u-control u-process">
<span class="buffer-process"></span>
<span class="current-process"></span>
</div>
<div class="u-control u-time">00:00/00:00</div>
<div class="u-control u-volume">
<div class="volume-process" data-volume="0.50">
<span class="volume-current"></span>
<span class="volume-bar"></span>
<span class="volume-event"></span>
</div>
<a class="volume-control"></a>
</div>
</div>
<div class="m-play-controls">
<a class="u-play-btn prev" title="上一曲"></a>
<a class="u-play-btn ctrl-play play" title="暂停"></a>
<a class="u-play-btn next" title="下一曲"></a>
<a class="u-play-btn mode mode-list current" title="列表循环"></a>
<a class="u-play-btn mode mode-random" title="随机播放"></a>
<a class="u-play-btn mode mode-single" title="单曲循环"></a>
</div>
</div>
</div>
<div class="f-cb"> </div>
<div class="m-music-list-wrap"></div>
<div class="m-music-lyric-wrap">
<div class="inner">
<ul class="js-music-lyric-content">
<li class="eof">暂无歌词...</li>
</ul>
</div>
</div>
</div>
<div class="m-demo-copyright">
<p>Copyright © 2012-2015 Smohan. All Rights Reserved.V.5.0.3.蜀ICP备13000297号-2.</p>
</div>
<script src="src/js/musicList.js"></script>
<script src="src/js/smusic.js"></script>
<script>
new SMusic({
musicList : musicList,
autoPlay : true, //是否自动播放
defaultMode : 2, //默认播放模式,随机
callback : function (obj) { //返回当前播放歌曲信息
console.log(obj);
/*{title: "赤血长殷", singer: "王凯", cover: "http://data.smohan.net/upload/other/cxcy/cover.jpg", src: "http://data.smohan.net/upload/other/cxcy/music.mp3", index: 4}*/
}
});
</script>
<div style="display: none;"><script src="http://s23.cnzz.com/z_stat.php?id=1000291789&web_id=1000291789" language="JavaScript"></script></div>
</body>
</html>