Мой плеер на js!

Такое дело, вк закрыли сторонним приложениям доступ к аудио, так что теперь мне этот код не к чему) Забирайте кому надо.

Код:

$("body").append('<audio id="Player"></audio>');
var Audio = document.getElementById("Player"),
audiosPatch = 'http://w-0rld.ru/files/images/audios',
audiosStyles = '.AudiosBackground {\
    position: fixed;\
    top: 0;\
    left: 0;\
    width: 100%;\
    height: 100%;\
    background-color: rgb(247, 247, 247);\
    opacity: 0.95;\
    box-shadow: 0px 0px 5px 1px gray;\
    z-index: 228;\
}\
\
.AudiosBlock {\
    margin-top: 50px;\
    margin-bottom: 50px;\
    padding: 10px 5% 10px 5%;\
    width: 100%;\
    height: calc(100% - 100px);\
    overflow-x: hidden;\
    overflow-y: scroll;\
    background-color: white;\
}\
\
.AudiosTop {\
    width: 100%;\
    height: 50px;\
    position: absolute;\
    top: 0;\
    left: 0;      \
    background-color: rgb(255, 255, 255);\
    height: 50px;\
    margin: 0;\
    padding: 0 1% 0 1%;\
    border-bottom: 1px solid #F0F0F0;\
    box-shadow: 0px 2px 1px #C6C6C6;\
    padding-top: 5px;\
}\
\
#AudiosSearch {\
    text-align: center;\
    float: left;\
    width: 90%;\
    border: 0;\
    height: 40px;\
    background-color: #F7F7F7;\
    outline: none;\
}\
button.PlayerTruck {\
    width: 100%;\
    margin-right: 0;\
    background-color: #FFFFFF;\
    border: 1px solid #E8E8E8;\
    color: black;\
    margin-bottom: 5px;\
    display: block;\
    height: initial;\
    padding: 5px;\
    outline: none;\
    cursor: pointer;\
}\
button.PlayerTruck:hover {\
    background-color: #F4F4F4;\
}\
button.PlayerTruck:active {\
    box-shadow: none;\
    background-color: #F7F7F7;\
}\
button.PlayerTruckActive {\
    width: 100%;\
    margin-right: 0;\
    background-color: #F4F4F4;\
    color: black;\
    margin-bottom: 5px;\
    display: block;\
    height: initial;\
    padding: 5px;\
    outline: none;\
    cursor: pointer;\
    border: 0;\
}\
.PlayerTruckHidden {\
display:none;\
}\
.PlayerTruckActiveHidden {\
display:none;\
}\
span.PlayerTitleAuthor {\
    display: block;\
    font-size: 8pt;\
    color: gray;\
}\
span.PlayerTitleSong {\
    color: #565656;\
}\
#AudiosButtonExit {\
    border: 0;\
    background-color: #F7F7F7;\
    float: right;\
    height: 40px;\
    width: 9%;\
    box-shadow: 0px 0px 1px 0px #ECECEC;\
    color: silver;\
    outline: none;\
}\
.AudiosBottom {\
    position: absolute;\
    height: 50px;\
    width: 100%;\
    background-color: #FFFFFF;\
    left: 0;\
    bottom: 0;\
    box-shadow: 0px -2px 1px #C6C6C6;\
    padding: 10px;\
    text-align: center;\
    overflow-y: hidden;\
}\
.AudiosUnit:disabled {\
    opacity: 0.228;\
    transition: 2s;\
}\
.AudiosUnit {\
    border: 0;\
    background-color: #F7F7F7;\
    height: 32px;\
    width: 32px;\
    float: left;\
    padding: 5px;\
    margin: 0px 5px 0px 5px;\
    font-weight: bolder;\
    background-size: cover;\
    outline: none;\
}\
\
button#AudiosPause {\
    background-image: url('+audiosPatch+'/pause.png);\
}\
\
button#AudiosPlay {\
    background-image: url('+audiosPatch+'/play.png);\
}\
\
button#AudiosBack {\
    background-image: url('+audiosPatch+'/back.png);\
}\
\
button#AudiosNext {\
    background-image: url('+audiosPatch+'/next.png);\
}\
button#AudiosReload {\
    background-image: url('+audiosPatch+'/reload.png);\
}\
.AudiosTitle {\
    float: right;\
    padding: 5px;\
}\
.AudiosIndicator {\
    position: absolute;\
    left: 0;\
    bottom: 0;\
    width: 100%;\
    height: 2px;\
    background-color: #F7F7F7;\
    border-top: 1px solid #F4F4F4;\
}\
.AudiosPlayed {\
    position: absolute;\
    left: 0;\
    bottom: 0;\
    width: 0%;\
    height: 2px;\
    background-color: #000000;\
    z-index: 101;\
    transition: 0.5s;\
}\
input[type=range] {\
  -webkit-appearance: none;\
  width: 85px;\
}\
input[type=range]:focus {\
  outline: none;\
}\
input[type=range]::-webkit-slider-runnable-track {\
  width: 100%;\
  height: 8.4px;\
  cursor: pointer;\
  animate: 0.2s;\
  background: none;\
}\
input[type=range]::-webkit-slider-thumb {\
  height: 32px;\
  width: 10px;\
  background: black;\
  cursor: pointer;\
  -webkit-appearance: none;\
  margin-top: -12px;\
}';
PUT        = '\
<div class="AudiosBackground" style="display:none;">\
<div class="AudiosTop">\
<input id="AudiosSearch" class="input" placeholder="Поиск...">\
<button id="AudiosButtonExit">X</button></div>\
<div class="AudiosBottom">\
<button id="AudiosPause" class="AudiosUnit" style="display: none;"></button>\
<button id="AudiosPlay" class="AudiosUnit"></button>\
<button id="AudiosBack" class="AudiosUnit"></button>\
<button id="AudiosNext" class="AudiosUnit"></button>\
<input id="AudiosVolume" class="AudiosUnit" type="range" value="100">\
<img src="/Audios/loading.gif" id="loading" style="display:none;">\
<a title="Нажмите, что-бы скачать." class="AudiosTitle" download></a>\
</div>\
<div class="AudiosIndicator">\
<div class="AudiosPlayed">\
</div>\
</div>\
<div class="AudiosBlock">\
</div>\
</div>';
Activator  =     "#PlayerActivator",
Window     =     ".AudiosBackground",
Block      =     ".AudiosBlock",
Player     =    "#Player",

Play   = "#AudiosPlay",
Pause  = "#AudiosPause",
Prev   = "#AudiosBack",
Next   = "#AudiosNext",
Volume = "#AudiosVolume",
Search = "#AudiosSearch",

PlayerTruck             = ".PlayerTruck",
PlayerTruckActive       = ".PlayerTruckActive",
PlayerTruckActiveHidden = ".PlayerTruckActiveHidden",
PlayerTruckHidden       = ".PlayerTruckHidden",

Truck        = "#Truck",
client_id    = "5569755",

Close        = "#AudiosButtonExit";

if (location.hash.length == 134 || location.pathname == "/?module=audios")
{
Audios();
}
$(Activator).click(function(){ 
if ($(this).attr("use") == "1"){
$(Window).fadeIn();
document.title = title + border + "Аудиозаписи";
history.pushState(null, null, "/?module=audios");
}
else{
Audios();
}
return false;
});


function Audios()
{
document.title = title + border + "Аудиозаписи";
history.pushState(null, null, "/?module=audios");
$("body").append(PUT);
$("head").append('<style id="audios">'+audiosStyles+'</style>');

$(Close).click(function(){
$(Window).fadeOut();
document.title = title + border + $("body").attr("page");
history.pushState(null, null, $("body").attr("page-url"));
});

var authors = ["1", "2", "3", "4", "5", "6", "7"];
var titles  = ["1", "2", "3", "4", "5", "6", "7"];

for (var i = 0; i < authors.length; i++) {
n = i + 1;
$(Block).append('<button title="'+authors[i]+' - '+titles[i]+'" class="PlayerTruck" num="'+n+'" url="http://w-0rld.ru/files/music/'+n+'.mp3">\
<span class="PlayerTitleAuthor">'+authors[i]+'</span>\
<span class="PlayerTitleSong">'+titles[i]+'</span>\
</button>');
}
$(Play).click(function(){
$(Play).hide();
$(Pause).show();
if ($(Player).attr("number") == null)
{
$(Truck+'1').trigger('click');
}
else
{
Audio.play();
}
});
$(Pause).click(function(){
$(Play).show();
$(Pause).hide();
Audio.pause();
});
$(Prev).click(function(){
$(PlayerTruckActive).prevAll(PlayerTruck).filter(":first").trigger('click');
});
$(Next).click(function(){
$(PlayerTruckActive).nextAll(PlayerTruck).filter(":first").trigger('click');
});
$(Volume).mouseup(function(){
Audio.volume = this.value / 100;
});
$(Search).keyup(function(){
if (this.value == '')
{
$(PlayerTruckHidden).attr("class","PlayerTruck");
$(PlayerTruckActiveHidden).attr("class","PlayerTruckActive");
}
else
{
$(PlayerTruck).attr("class","PlayerTruckHidden");
$(PlayerTruckActive).attr("class","PlayerTruckActiveHidden");
$(PlayerTruckHidden+"[title *= '"+this.value+"']").attr("class","PlayerTruck");
$(PlayerTruckActiveHidden+"[title *= '"+this.value+"']").attr("class","PlayerTruckActive");
}
});


$(PlayerTruck).click(function(){
URL    = $(this).attr("url");
TITLE  = $(this).attr("title");
ID     = $(this).attr("num");
// Сброс
$(".AudiosPlayed").attr("style","width:0%;");
$(PlayerTruckActive).attr("class","PlayerTruck");
// Установки
$(this).attr("class","PlayerTruckActive");

$(".AudiosTitle").html(TITLE);
$(".AudiosTitle").attr("href", URL);

$(Player).attr("src", URL);
$(Player).attr("number", ID);
$(Player).attr("title", TITLE);

document.title = TITLE;

Audio.play();

$(Play).hide();
$(Pause).show();

$("#loading").show();
});

Audio.oncanplay = function() {
$("#loading").hide();
};

Audio.ontimeupdate = function() {

percent = 100 * Audio.currentTime / Audio.duration;
$(".AudiosPlayed").attr("style","width:"+~~percent+"%;");

if (window.innerWidth < 768)
{
$(".AudiosTitle").html("↓");
}
else if ($(".AudiosTitle").html() == "↓")
{
$(".AudiosTitle").html($(Player).attr("title"));
}

};

Audio.onended = function() {
$(PlayerTruckActive).nextAll(PlayerTruck).filter(":first").trigger('click');
};

$(Activator).attr('use','1');
$(Window).fadeIn("slow");
}

Требует jquery.
Что-бы запустить введите Audios();

 

Трэш код.

 

Что ты такое?

 

спс за компименты

 

Блин, посоветуйте четкий поисковик+плеер для музыки из ВК. В дороге с телефона слушал на pesni dot me, но там уже не пашет.

 

Сейчас только ждать чуда что разработчики догадаются использовать токен официальных приложений