forked from maicong/music
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
652 additions
and
2,493 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,170 @@ | ||
/** | ||
* | ||
* 音乐搜索器 - CSS 文件 | ||
* | ||
* @author MaiCong <[email protected]> | ||
* @link https://github.com/maicong/music | ||
* @since 1.3.1 | ||
* | ||
*/ | ||
|
||
html { | ||
font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Microsoft YaHei', 'PingFang SC', | ||
'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', | ||
'Fira Sans', 'Droid Sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif, | ||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; | ||
-webkit-text-size-adjust: 100%; | ||
-moz-text-size-adjust: 100%; | ||
-ms-text-size-adjust: 100%; | ||
text-size-adjust: 100%; | ||
} | ||
body { | ||
margin: 0; | ||
-webkit-tap-highlight-color: transparent; | ||
-webkit-font-smoothing: subpixel-antialiased; | ||
} | ||
a { | ||
-webkit-transition: all 0.3s; | ||
transition: all 0.3s; | ||
} | ||
.about { | ||
background: #fff; | ||
color: #7f8c8d; | ||
} | ||
.about-color { | ||
color: #34495e; | ||
} | ||
.about-title { | ||
font-size: 180%; | ||
text-align: center; | ||
} | ||
.main { | ||
margin: 60px 0; | ||
} | ||
.music-tabs > li > a { | ||
padding: 0.5em 1em; | ||
cursor: pointer; | ||
} | ||
.music-main { | ||
display: none; | ||
} | ||
.music-main input { | ||
text-overflow: ellipsis; | ||
} | ||
.music-main input:focus, | ||
.music-main input:hover { | ||
background: #eee; | ||
border-color: #ccc; | ||
color: #222; | ||
} | ||
.music-type .am-radio-inline, | ||
.music-type label { | ||
color: #7f8c8d; | ||
} | ||
.music-type .am-icon-unchecked, | ||
.music-type .am-icon-checked { | ||
color: #0e90d2; | ||
} | ||
.music-tips { | ||
margin-top: 50px; | ||
} | ||
.music-tips blockquote { | ||
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; | ||
font-size: 14px; | ||
margin-top: 30px; | ||
} | ||
.music-tips p span { | ||
display: inline-block; | ||
min-width: 50px; | ||
} | ||
.music-tips p b { | ||
font-weight: 500; | ||
color: #c7254e; | ||
} | ||
.music-overflow { | ||
max-height: 200px; | ||
overflow: hidden; | ||
} | ||
.music-more { | ||
padding: 10px; | ||
text-align: center; | ||
font-size: 14px; | ||
color: #666; | ||
background: #eee; | ||
cursor: pointer; | ||
} | ||
.footer { | ||
position: relative; | ||
left: 0; | ||
bottom: 0; | ||
width: 100%; | ||
overflow: hidden; | ||
} | ||
.footer p { | ||
color: #7f8c8d; | ||
margin: 0; | ||
padding: 15px; | ||
text-align: center; | ||
background: #2d3e50; | ||
} | ||
.footer p a { | ||
color: #7f8c8d; | ||
} | ||
.footer p a:hover { | ||
color: #bbb; | ||
} | ||
.footer a { | ||
text-decoration: underline; | ||
} | ||
.am-alert { | ||
display: none; | ||
} | ||
.am-popup-bd { | ||
height: 100%; | ||
} | ||
.aplayer { | ||
padding: 10px 10px 0 10px !important; | ||
margin: 0 !important; | ||
border: 1px solid #ccc; | ||
} | ||
.aplayer .aplayer-info .aplayer-music .aplayer-title, | ||
.aplayer .aplayer-info .aplayer-music .aplayer-author { | ||
font-size: 16px !important; | ||
color: #555 !important; | ||
} | ||
.aplayer .aplayer-lrc p { | ||
color: #0e90d2 !important; | ||
} | ||
.aplayer.aplayer-withlrc .aplayer-pic { | ||
width: 120px !important; | ||
height: 120px !important; | ||
-webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5); | ||
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5); | ||
} | ||
.aplayer.aplayer-withlrc .aplayer-info { | ||
margin-left: 120px !important; | ||
height: 120px !important; | ||
} | ||
.aplayer.aplayer-withlist .aplayer-info { | ||
display: -webkit-box; | ||
display: -ms-flexbox; | ||
display: flex; | ||
-webkit-box-orient: vertical; | ||
-webkit-box-direction: normal; | ||
-ms-flex-direction: column; | ||
flex-direction: column; | ||
-webkit-box-pack: justify; | ||
-ms-flex-pack: justify; | ||
justify-content: space-between; | ||
border-bottom: 0 !important; | ||
} | ||
.aplayer.aplayer-withlist .aplayer-list { | ||
height: auto !important; | ||
padding: 10px 0; | ||
margin-top: 10px; | ||
-webkit-transition: none; | ||
transition: none; | ||
} | ||
.aplayer.aplayer-withlist .aplayer-list-hide { | ||
padding: 0; | ||
} |
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,198 @@ | ||
/** | ||
* | ||
* 音乐搜索器 - JS 文件 | ||
* | ||
* @author MaiCong <[email protected]> | ||
* @link https://github.com/maicong/music | ||
* @since 1.3.1 | ||
* | ||
*/ | ||
|
||
$(function() { | ||
var _this = this; | ||
var player = null; | ||
var nopic = 'static/img/nopic.jpg'; | ||
|
||
// Tab 切换 | ||
$('#j-form').on('click', 'li', function() { | ||
var holder = { | ||
name: '例如: 不要说话 陈奕迅', | ||
id: '例如: 25906124', | ||
url: '例如: http://music.163.com/#/song?id=25906124', | ||
pattern_name: '^.+$', | ||
pattern_id: '^[\\w\\/\\|]+$', | ||
pattern_url: '^https?:\\/\\/\\S+$' | ||
}; | ||
var filter = $(_this).data('filter'); | ||
|
||
$(_this) | ||
.addClass('am-active') | ||
.siblings('li') | ||
.removeClass('am-active'); | ||
|
||
$('#j-input') | ||
.data('filter', filter) | ||
.attr({ | ||
placeholder: holder[filter], | ||
pattern: holder['pattern_' + filter] | ||
}) | ||
.removeClass('am-field-valid am-field-error am-active') | ||
.closest('.am-form-group') | ||
.removeClass('am-form-success am-form-error') | ||
.find('.am-alert') | ||
.hide(); | ||
|
||
if (filter === 'url') { | ||
$('#j-type').hide(); | ||
} else { | ||
$('#j-type').show(); | ||
} | ||
}); | ||
|
||
// 输入验证 | ||
$('#j-validator').validator({ | ||
onValid: function onValid(v) { | ||
$(v.field) | ||
.closest('.am-form-group') | ||
.find('.am-alert') | ||
.hide(); | ||
}, | ||
onInValid: function onInValid(v) { | ||
var $field = $(v.field); | ||
var $group = $field.closest('.am-form-group'); | ||
var msgs = { | ||
name: '将 名称 和 作者 一起输入可提高匹配度', | ||
id: '输入错误,请查看下面的帮助', | ||
url: '输入错误,请查看下面的帮助' | ||
}; | ||
var $alert = $group.find('.am-alert'); | ||
var msg = msgs[$field.data('filter')] || this.getValidationMessage(v); | ||
|
||
if (!$alert.length) { | ||
$alert = $('<div class="am-alert am-alert-danger am-animation-shake"></div>') | ||
.hide() | ||
.appendTo($group); | ||
} | ||
$alert.html(msg).show(); | ||
}, | ||
submit: function submit(v) { | ||
v.preventDefault(); | ||
if (this.isFormValid()) { | ||
var filter = $('#j-input').data('filter'); | ||
var postData = { | ||
music_input: $.trim($('#j-input').val()), | ||
music_filter: filter, | ||
music_type: $('input[name="music_type"]:checked').val() | ||
}; | ||
|
||
if (filter === 'url') { | ||
postData.music_type = '_'; | ||
} | ||
|
||
return $.ajax({ | ||
type: 'POST', | ||
url: location.href.split('?')[0], | ||
timeout: 30000, | ||
data: postData, | ||
dataType: 'json', | ||
beforeSend: function beforeSend() { | ||
$('#j-input').attr('disabled', true); | ||
$('#j-submit').button('loading'); | ||
}, | ||
success: function success(result) { | ||
if (result.code === 200 && result.data) { | ||
result.data.map(function(v) { | ||
if (!v.title) v.title = '暂无'; | ||
if (!v.author) v.author = '暂无'; | ||
if (!v.pic) v.pic = nopic; | ||
if (!v.lrc) v.lrc = '[00:00.00] 暂无歌词'; | ||
if (!/\[00:(\d{2})\./.test(v.lrc)) { | ||
v.lrc = '[00:00.00] 无效歌词'; | ||
} | ||
}); | ||
if (player) { | ||
player.pause(); | ||
} | ||
var setValue = function setValue(data) { | ||
$('#j-link').val(data.link); | ||
$('#j-link-btn').attr('href', data.link); | ||
$('#j-src').val(data.url); | ||
$('#j-src-btn').attr('href', data.url); | ||
$('#j-name').val(data.title); | ||
$('#j-author').val(data.author); | ||
}; | ||
|
||
setValue(result.data[0]); | ||
|
||
$('#j-validator').slideUp(); | ||
$('#j-main').slideDown(); | ||
|
||
player = new APlayer({ | ||
element: $('#j-player')[0], | ||
autoplay: false, | ||
narrow: false, | ||
showlrc: 1, | ||
mutex: false, | ||
mode: 'circulation', | ||
preload: 'metadata', | ||
theme: '#0e90d2', | ||
music: result.data | ||
}); | ||
player.on('canplay', function() { | ||
player.play(); | ||
}); | ||
player.on('play', function() { | ||
var data = result.data[player.playIndex]; | ||
var img = new Image(); | ||
img.src = data.pic; | ||
img.onerror = function() { | ||
$('.aplayer-pic').css('background-image', 'url(' + nopic + ')'); | ||
}; | ||
setValue(data); | ||
}); | ||
} else { | ||
$('#j-input') | ||
.closest('.am-form-group') | ||
.find('.am-alert') | ||
.html(result.error || '(°ー°〃) 服务器好像罢工了') | ||
.show(); | ||
} | ||
}, | ||
error: function error(e, t) { | ||
var err = '(°ー°〃) 出了点小问题,请重试'; | ||
if (t === 'timeout') { | ||
err = '(°ー°〃) 请求超时了,可能是您的网络慢'; | ||
} | ||
$('#j-input') | ||
.closest('.am-form-group') | ||
.find('.am-alert') | ||
.html(err) | ||
.show(); | ||
}, | ||
complete: function complete() { | ||
$('#j-input').attr('disabled', false); | ||
$('#j-submit').button('reset'); | ||
} | ||
}); | ||
} | ||
} | ||
}); | ||
|
||
$('#j-main input').focus(function() { | ||
$(this).select(); | ||
}); | ||
|
||
$('#j-more').on('click', function() { | ||
$(this).hide(); | ||
$('#j-quote').removeClass('music-overflow'); | ||
}); | ||
|
||
$('#j-getit').on('click', function() { | ||
if (player) { | ||
player.pause(); | ||
} | ||
$('#j-validator').slideDown(); | ||
$('#j-main').slideUp(); | ||
$('#j-main input').val(''); | ||
}); | ||
}); |
Oops, something went wrong.