Download list of songs from grooveshark

A simple Js to download the list of song from grooveshark.

Here is the GitHub Link for this Project : https://github.com/vi3k6i5/grooveshark-song-list

Steps:

1. Copy js from the linked source.

2. Open grooveshark page that has a song list.

3. Open the JavaScript Console from chrome developer tools. 

4. Paste the JS in the console and Press Enter.

5. Leave it for some time as the process for downloading the list of songs is lengthy and takes time.

6. At the end of the script execution a list of songs will be printed on console in JSON format.

6. Copy the list and you may organize the list at your favorite Json Processor.      

    

    Like http://www.jsoneditoronline.org/ or http://pro.jsonlint.com/

Thanks,

PS: I did this project because grooveshark does not provide a direct means to download the list of songs. Also at any point of time they only load 40 songs on the page. Hence it was a little challenging to download the list, and so this JS came into being.

Cheers 

Highlight HTML Element on page

Demo: Click on Highlight

How

you

doin?

Code: How to achieve this effect :

JavaScript:

var transitionTime = 1000,

transitionEffect = 'box-shadow 1s',

shadowEffect = 'inset 0px 0px 7px 0px #FF0000, 0px 0px 7px 0px #FF0000',

removeShadow = function(element) {
    $(element).css({
        boxShadow: 'inset 0px 0px 0px 0px #000, 0px 0px 0px 0px #000' 
    });
},

resetShadow = function(element) {
    $(element).css({
       boxShadow: ''
    });
},

removeTransition = function(element) {
    $(element).css({
        transition: ''
    });
},

highlight = function(element) {
    $(element).css({
        transition: transitionEffect, boxShadow: shadowEffect 
    });
    setTimeout(function() {
        removeShadow(element);
        setTimeout(function() {
            resetShadow(element);
            removeTransition(element);
        }, transitionTime);
    }, transitionTime );
},

highlightFunction = function() {
    var elements = $(".highlight-ele");
    for(var i = 0; i < elements.length; i++) {
        highlight(elements[i]);
    }
}

HTML:

<div class="container-div">
    <div class="margin-div">
        <div class="inline-div highlight-ele" id="div1">
            How
        </div>

        <div class="inline-div highlight-ele" id="div2">
            you
        </div>

        <div class="inline-div highlight-ele" id="div3">
            doin?
        </div>
   </div>
   <div class="margin-div">
        <div class="new-div">
            <input class="highlight-ele" style="border : 1px solid black">                   </input>
        </div>
   </div>
   <div class="margin-div">
        <button onclick="highlightFunction()" style="height: 25px; width: 153px;">
            Highlight
        </button>
   </div>
</div>

CSS:

.inline-div{
    display: inline-block;
    text-align: center;
    height: 50px;
    width: 50px;
    vertical-align: middle;
    line-height: 50px;
}

.new-div {
    display: inline-block;
}

.margin-div {
    margin:10px 10px 10px 10px;
}

.container-div {
    margin: 0px auto;
    width: 178px;
    border: 1px groove;
}

jquery plugin:

I have created a jquery plugin to achieve the same effect Highlighter Plugin for jquery

Just include the js in your code and call highlight method on your selector $(".highlight-ele").highlight();



It is hosted on Github : jquery-highlighter on GitHub