layui调用搜狗音乐api实现歌曲搜索及播放功能代码
代码语言：html
所属分类：其他
代码描述：layui调用搜狗音乐api实现歌曲搜索及播放功能代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>获取酷狗音乐资源</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
</head>
<body>
<style>
.nav{width:100%;height:60px;background-color:#23262e}
.menu-list{overflow:hidden;margin:0 auto;padding:0!important;width:80%;height:60px}
.menu-list li{float:left;width:100%;line-height:60px}
.layui-nav-li{background-color:#23262e}
.main-nav-a{float:left;background-image:linear-gradient(250deg,#fff,#009688);color:transparent;text-align:center;font-size:30px;-webkit-background-clip:text}
.main-n-div{display:-webkit-box;margin-top:10px}
.apps{margin:auto;width:80%}
.layui-table td em{color:#f69;font-style:normal}
.load{position:fixed;top:0;z-index:10000;display:none;width:100%;height:100vh;background-color:rgba(0,0,0,.1)}
.loader{position:absolute;top:calc(50% - 70px);left:calc(50% - 70px);padding-top:15px;width:140px;height:140px;border-radius:5px;background-color:rgba(0,0,0,.8);text-align:center}
#loader-1{width:60px;height:60px}
.load-msg{height:50px;color:#fff;font-size:13px;line-height:50px}
svg path,svg rect{fill:#fff}
</style>
<div class="nav">
<ul class=" menu-list">
<li class="layui-nav-li">
<h1 class="main-nav-a">获取酷狗音乐资源</h1>
<div class="main-n-div">
<div style="width:70%;margin-left: 40px;">
<input class="layui-input" id="name" type="text" placeholder="请输入歌曲名、歌手搜索">
</div>
<button type="button" class="layui-btn main-nav-btn" id="search">搜索</button>
</div>
</li>
</ul>
</div>
<div class="load">
<div class="loader" title="2">
<svg version="1.1" id="loader-1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" />
</path>
</svg>
<div class="load-msg"> 加载中....</div>
</div>
</div>
<script id="temp" type="text/html">
<table class="layui-table">
{{# if(d.data.length != 0){ }}
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<thead>
<tr>
<th>搜索名称</th>
<th>专辑</th>
<th>时长</th>
<th>操作</th>
</tr>
</thead>
{{# } }}
<tbody>
{{# layui.each(d.data, function(index, item){ }}
<tr>
<td>{{ item.FileName }}</td>
<td>{{ item.AlbumName }}</td>
<td>{{ song.sTomin(item.Duration) }}</td>
<th>
<a class="layui-btn layui-btn-primary layui-btn-xs" data-num="{{ index }}" data-hash="{{ item.FileHash }}" AlbumID="{{ item.AlbumID }}" onclick="song.play(this)">播放</a>
<a class="layui-btn layui-btn-xs" onclick="song.download(this)">下载</a>
</th>
</tr>
{{# }); }} {{# if(d.data.length === 0){ }}
<tr>
<td width="100%" style="text-align: center"> 暂无数据</td>
</tr>
{{# } }}
</tbody>
</table>
</script>
<div class="apps">
<div id="app"></div>
<div id="page"></div>
</div>
<audio id="my_audio"></audio>
<script>
var audio = document.getElementById("my_audio");
var msg = {
"keyword":"",
"total":0,
"hash":"",
"albumid":"",
"isBool":false
}
var song = {
sTomin:function(s){
var h;
h = Math.floor(s/60);
s = s%60;
h += '';
s += '';
h = (h.length==1)?'0'+h:h;
s = (s.length==1)?'0'+s:s;
s = parseInt(s);
if(s<10){
s = "0"+s;
}
return h+':'+s;
},
trim:function(str){
return str.replace(this.regBlank,"");
},
empty:function(v){
switch(typeof v){
case 'undefined':
return true;
case 'string':
if(this.trim(v).length == 0){
return true;
}
break;
case 'boolean':
if(!v){
return true;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0