Скроблинг last.fm и HTML5 player на molpa

    image

    Привет.

    Я уже дважды писал на хабре о своем мэшапе для прослушивания музыки по альбомам — molpa.ru, над которым я активно работаю. Сегодня мне хотелось бы рассказать о нововведениях на нем и технических моментов их реализации.

    Скроблинг last.fm


    Несмотря на очень даже простое и приятное API last.fm, скроблинг в last.fm зачем-то обособлен и, мягко говоря, неудобен в использовании, никаких тут jsonp и crossdomain, получайте обычный POST который не так-то уж и просто отправить средствами браузера.

    Единственный способ который я нашел позволял это сделать это отправка POST через скрытый iframe, примерно таким образом:

    $("body").append('<div id="hide"></div>')
            .find("#hide").html("").hide()
            .append('<iframe name="fm"></iframe><form id="send" target="fm" method="POST" action="http://ws.audioscrobbler.com/2.0/"></form>');
     
    for(in post){
            $("#send").append('<input name="' + n + '" value="' + post[n] + '" type="hidden"/>');
    }
     
    $("#send").submit();

    Довольно дурацкий способ, при вполне юзабельных ему альтернативах.


    HTML5 player


    Что-бы идти в ногу со временем, я решил установить на сайт HTML5 player, с откатом на flash для старых браузеров, первым претендентом был плеер Soundmanager, но он оказался слишком громоздким, проект я планирую оптимизировать под мобильные браузеры, а там такая махина ни к чему.

    Поискав еще какое-то время, я взялся за написание своего плеера, я запланировал его делать как обработчик поверх объекта HTML5 — audio, с полной эмуляцией этого объекта средствами FLASH, первая версия этого творения занимала всего около(точно уже не припомню) пяти килобайт флеша и примерно столько несжатого кода на js, я был просто в восторге. ActionScript — оказался довольно не сложный и приятным языком.

    Но однажды во время доработки моего плеера, изучая различные материалы по JS и AS, я наткнулся на готовый плеер который делает, в принципе тоже самое, что я хотел делать в своем, и был хорошо документирован. В итоге я решил не дописывать свой велосипед, а использовать уже готовое решение.


    Планы на будущее


    В мои планы теперь входит отрисовка нового универсального интерфейса, который можно будет одинаково удобно использовать как в мобильных браузерах, так и в браузерах ПК.
    Так же я планирую начать оптимизацию своего кода, хотелось бы одновременно уменьшить его размер и увеличить производительность, или хотя бы найти идеальный баланс :)

    Надеюсь, мой опыт был вам хоть немного полезен ;)
    Поделиться публикацией
    Комментарии 12
      0
      Прикольная штука jPlayer, но есть один косяк: он не отображает сразу duration трека, просто увеличивается этот параметр во время загрузки. Обычно, флеш плееры отображают сразу.
        0
        Вот именно поэтому пока что использую метод soundmanager2, а именно скрытый флеш-блок. HTML 5 audio еще так далек от юзабельности к сожалению :(
        0
        Скробблинг включен, песни не скробблятся.
          +1
          Буду разбираться, иногда возникает ситуация, что запрос отправляется и даже можно получить правильный ответ отладчиком, но запросы не обрабатываются lasft.fm.
          –2
          html5, все дела… всё это конечно мило, но если нельзя прослушивать собственные аудиозаписи, то мне это нафик не нужно. прошу прощения, если что.
            +1
            Очень приятный сервис, отличная работа.
            Было бы неплохо, если бы рядом с названием альбома показывалась дата выпуска.
              0
              Такой пунк есть в todo, но я забыл его почуму-то, очень скоро сделаю.
              +1
              Приятно удивила полная работоспособность на iPhone 4 в Safari. Так держать! :)
                0
                Блин! Круто! А я думал придется допиливать и тестировать под каждую платформу :)
                0
                Поправьте на скроББлинг.

                А еще вас на сайте «Cкроллинг включен»
                (И подвиньте его правее от Избранного)

                И непонятно пока как его выключить, этот скробблинг.
                  0
                  По поводу POST-запроса. Так не пойдет?

                  var url = "get_data.php";
                  var params = "foo=bar&boo=far";
                  http.open("POST", url, true);

                  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                  http.setRequestHeader("Content-length", params.length);
                  http.setRequestHeader("Connection", "close");

                  http.onreadystatechange = function() {
                          //Call a function when the state changes.
                      if(http.readyState == 4 && http.status == 200) {
                          alert(http.responseText);
                      }
                  }
                  http.send(params);
                    0
                    Отличный проект. Пользуюсь и очень нравится. Ещё бы лириксы он вытаскивал из вконтактика или внешних сайтов — было бы супер :)

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое