Skip to content

Commit

Permalink
更换播放器、增加歌词显示、更新接口
Browse files Browse the repository at this point in the history
  • Loading branch information
maicong committed Dec 8, 2017
1 parent 9acdf78 commit 6dbaf9b
Show file tree
Hide file tree
Showing 10 changed files with 652 additions and 2,493 deletions.
349 changes: 254 additions & 95 deletions core/music.php

Large diffs are not rendered by default.

File renamed without changes.
170 changes: 170 additions & 0 deletions static/css/style.css
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
198 changes: 198 additions & 0 deletions static/js/music.js
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('');
});
});
Loading

0 comments on commit 6dbaf9b

Please sign in to comment.