Author Topic: [Java Script] Incompetech Radio  (Read 1093 times)

Offline Boom

  • Basement Dweller
  • Moderator
  • Jukebox Hero (Stars in their eyes)
  • ***
  • Posts: 5964
  • Reputation: 130
  • Changing the world one brick at a time.
    • View Profile
  • Alias: Deathwishez
  • Blockland ID: 9740
[Java Script] Incompetech Radio
« on: December 31, 2015, 07:24:19 PM »
I made something today in a few minutes.

I like listening to the music over at Incompetech, but I always hated the fact that I had to play each song individually, or had to go find a playlist on YouTube. I wanted the ability to just play songs at random, and never have to find a new playlist, collection, or whatever, when a new song was added.

Naturally, I visit the site, and decide to reverse engineer it's Search mechanic to grab all of the songs on the site, at least in JSON form. I discovered that the site follows a convention that I could exploit. As such, I did.

Here's the code I came up with:
Code: [Select]
// Fix Site Bug
var footer = document.getElementById('footer');

if(footer)
footer.remove();

// Initialize Radio Object
radio = {
player: document.getElementById('incomplayer'),
pieces: [],
started: false,

loop: function()
{
console.log('Loop');

setTimeout(function()
{
radio.loop();
}, 1000);


if(!this.started || this.player.ended)
this.next();
},

next: function()
{
console.log('Next');

var index = Math.floor(Math.random() * this.pieces.length);
var piece = this.pieces[index];

if(piece !== undefined)
{
html5play(piece);
this.started = true;
return true;
}

return false;
},

start: function()
{
console.log('Start');
this.loop();
}
};

// Add the Pieces to the Radio
$.getJSON("pieces.json", function(data)
{
data.forEach(function(piece)
{
radio.pieces.push(piece.filename);
});
});

// Start the Radio
setTimeout(function()
{
console.log('Initial');
radio.start();
}, 100);

It's not my best work, but it gets the job done.

In short, I created a 'Radio' object, that grabs the filenames of all of the songs, and slaps one into the music player. I probably could have used a more intelligent means of figuring out when the song ends, but I couldn't be bothered to do more than a simple loop.

Also, I noticed that the footer of the site was causing tons of issues, so I added a bit to delete it.



Anyways, to use this, just copy it, and paste it into the console. If you don't know how to open that, it's F12 on most browsers. You'll need to be on http://incompetech.com/music/royalty-free/music.html for this to work.

Perhaps one day I'll make this a standalone script with more options. But for now, this is what I have.

Offline McTwist

  • Programmer
  • Forum VIP
  • Exceptional Member
  • **
  • Posts: 841
  • Reputation: 20
  • Scrambled eggs
    • View Profile
  • Alias: Tyzaack
  • Blockland ID: 9845
Re: [Java Script] Incompetech Radio
« Reply #1 on: December 31, 2015, 08:17:42 PM »
Make it an add-on. People would love that.



Other than that, the closest thing I came to this was to use youtube-dl to download a playlist of videos and convert it to mp3.
"I did not bump this topic. I was just late replying."

Offline Boom

  • Basement Dweller
  • Moderator
  • Jukebox Hero (Stars in their eyes)
  • ***
  • Posts: 5964
  • Reputation: 130
  • Changing the world one brick at a time.
    • View Profile
  • Alias: Deathwishez
  • Blockland ID: 9740
Re: [Java Script] Incompetech Radio
« Reply #2 on: December 31, 2015, 09:16:34 PM »
Not all of the pieces have a video to go with it.

Also, as I'm still working on this, I've come to two possible outcomes:

1) Create a Script that must be executed on the Incompetech Music Page.

This can be done with a bookmark, and could eventually require no programming knowledge to operate.

This would also always be up to date, as I can access the music data on the site.

2) Create a Standalone Page that can be visited.

This gives me more control over what I can do, and how I want to display everything.

However, I cannot access the music data, so I would have to periodically update it. I could circumvent this if I could beat the Same-Origin Policy for XML HTTP Requests.

This method is easiest for me to develop in.



I may end up doing the second approach, and then finding a way to convert to the first. Most of the work ends up being the same. All that really matters is where the music data comes from.

Offline Boom

  • Basement Dweller
  • Moderator
  • Jukebox Hero (Stars in their eyes)
  • ***
  • Posts: 5964
  • Reputation: 130
  • Changing the world one brick at a time.
    • View Profile
  • Alias: Deathwishez
  • Blockland ID: 9740
Re: [Java Script] Incompetech Radio
« Reply #3 on: January 07, 2016, 09:14:20 PM »
Here is my second iteration:

Code: [Select]
document.body.innerHTML = '<div id="radio" style="display: flex; flex-direction: column; align-items: center; margin: 50px auto; padding: 20px; border: 3px solid #222; border-radius: 16px; background: #333; max-width: 500px"><h3 id="now-playing" style="color: white; margin-top: 0;">Now Playing</h3><div style="width: 330px; display: flex; align-items: center;"><audio id="audio" preload="none" controls><source id="mp3source" type="audio/mpeg">Your browser does not support the audio tag.</audio><span id="skip" class="glyphicon glyphicon-fast-forward" style="position: relative; top: 0; left: 2px; margin-left: -17px; border-radius: 5px; padding: 5px 15px 9px 12px; color: #EFEFEF; background: #1A1A1A; font-size: 16px;"></span></div></div>';

$(document).ready(function(){radio={player:$("#radio")[0],audio:$("#audio")[0],pieces:[],next:function(){var i=Math.floor(Math.random()*radio.pieces.length),o=radio.pieces[i];void 0!==o&&radio.play(o.filename)},play:function(i){$("#now-playing")[0].innerHTML=i.substring(0,i.length-4),$("#mp3source")[0].src="http://incompetech.com/music/royalty-free/mp3-royaltyfree/"+i,radio.audio.load(),radio.audio.play()}},$.getJSON("pieces.json",function(i){i.forEach(function(i){radio.pieces.push(i)}),radio.next()}),radio.audio.addEventListener("ended",radio.next),$("#skip").click(function(){radio.next()})});

I've compacted everything, included a Skip functionality, and reworked the entire look and feel of the player.

Enjoy.

(To use this, copy it, and paste it in the console while on http://incompetech.com/music/royalty-free/music.html)

I may eventually add more details about the song, like description, feel, the date it was uploaded, etc. Let me know what you guys think.

Offline Boom

  • Basement Dweller
  • Moderator
  • Jukebox Hero (Stars in their eyes)
  • ***
  • Posts: 5964
  • Reputation: 130
  • Changing the world one brick at a time.
    • View Profile
  • Alias: Deathwishez
  • Blockland ID: 9740
Re: [Java Script] Incompetech Radio
« Reply #4 on: January 12, 2016, 03:34:52 PM »
Third Iteration:

Code: [Select]
document.body.appendChild(document.createElement('script')).setAttribute('src','http://pastebin.com/raw/tLCcFr1z');

You'll notice that this one is far shorter. That's because I've begun using Pastebin for this project.

Changes:
  • Graphical Overhaul
  • Added Download Button
  • Added Song Genre, Feel, Beats per Minute, Instruments, Description, and Accreditation
  • Added Custom Logo

Here's what it now looks like:


Offline Jesusfish

  • Fresh Member
  • *
  • Posts: 19
  • Reputation: 0
    • View Profile
Re: [Java Script] Incompetech Radio
« Reply #5 on: January 17, 2016, 07:47:32 AM »
Great job, Boom!

Offline Boom

  • Basement Dweller
  • Moderator
  • Jukebox Hero (Stars in their eyes)
  • ***
  • Posts: 5964
  • Reputation: 130
  • Changing the world one brick at a time.
    • View Profile
  • Alias: Deathwishez
  • Blockland ID: 9740
Re: [Java Script] Incompetech Radio
« Reply #6 on: January 17, 2016, 03:03:43 PM »
Thanks!

I'm still working on the fourth iteration, will should hopefully be a bit more cross-browser friendly.

Offline Solomon2

  • New Poster
  • Posts: 2
  • Reputation: 0
    • View Profile
Re: [Java Script] Incompetech Radio
« Reply #7 on: January 20, 2016, 12:44:17 AM »
Wonderful work that very helpful to us, thanks!  ;)


---------------------------------------------------------------------------------------------------------------------
Xperia Z5 silicone case
« Last Edit: January 21, 2016, 03:20:10 AM by Solomon2 »