Fixed an API parsing error with Tumblr’s new Neue Post Format (NPF). Happy New Year 🙂
Update [09/18/17]
Fixed mixed active content errors. Updated SoundCloud API client_key. Updated post detailing Adobe Flash deprecation and Streampad end-of-life.
Update [10/18/15]
Fixed Flash click-to-play on Chrome browser
Update [09/24/15]
Changed to Tumblr API v2 with OAuth Key Moved assets to GitHub mirror for SSL Fixed player disappearing in tumblr.com/customize due to mixed active content Fixed some cosmetics
Update [05/26/15]
Overhauled post formatting and script hosting. Minimized copy-and-paste overhead. Added jQuery for $.ajax calls. Added support for Bandcamp (individual tracks only). Added high-efficiency scrolling for large playlists in WebKit browsers. Added disabled tracks detection. Integrated SoundCloud API to allow SoundCloud Playlists. Changed menu UI for playlists.
Update [09/06/14]
Bug-fix: Last.fm scrobbling integration.
Fixed a few things with the playlist, artists and titles, and Last.fm
now works again. You can click what used to be the Profile button
(renamed Last.fm Scrobbler button) to connect your Last.fm account to
Streampad and have your listening history scrobbled to Last.fm. Note:
only posts with proper artist and track titles will get scrobbled.
Update [08/28/13]
NEW feature: Seamless Cross-page Playback.
You can now
keep Streampad v2 playing while navigating through your own blog’s
pages! No more music resetting for users without infinite scroll! 😉
This
is enabled by default, but it is still an experimental feature so you
may experience some problems. Needless to say, I’ve done almost a week’s worth
of testing up to this point so it should be alright, but if you’re
having trouble you can turn it off.Also, I’ve condensed the scripts into
one so the copy-and-paste won’t be as large.
Update [04/20/13]
NEW:Repeat. You can now repeat a single track over and over again by toggling the Repeat button.
NEW: Toggle Shuffle Button. You can now turn shuffle on/off by toggling the Shuffle button.
NEW: Shuffle. You can now shuffle songs.
NEW:Play songs from other tumblr blogs: you can now play songs from other tumblr blogs (must be audio posts).
NEW:Blacklist by tag. you can now set a “Do not play” Playlist tag, which will make the player not play audio posts if they are tagged with it.
NEW:Transparent Streampad. you can now toggle the Streampad Player to be transparent.
NEW:Play forever.
Streampad now automatically starts playing the first song in the
playlist after the final song plays. Also, pressing the ‘Previous track’
button when the first song is playing now jumps back to the last song.
NEW:Mute Button. Volume
controls have been improved and now have a mute button. Toggle mute by
clicking on the volume button. Also, if Volume Controls are disabled,
volume will automatically be set to loudest setting since your
preferences are saved to the Flashplayer and it remembers how loud your
volume is across all blogs that have Streampad.
NEW:Playlist tag no longer has to be unique.
You can set a Playlist tag which will make the player only play audio
posts which are tagged with this specific tag. In this update, the tag
no longer needs to be unique to audio-posts, and it can contain
text/photo/etc. posts without crashing the player. E.g. I can now tag
both a photo post and audio post with ‘music’ and when I specify the
playlist tag to be “music”, Streampad will play music posts only tagged
“music”.
NEW: Show ID3 tags for audio captions: Changes the
audio caption on the Streampad Bar to show [Artist] – [Track Title]
which is grabbed from the ID3 tags in the audio post (instead of showing
the description text of the post).
Update [6/15/13] Streampad v2 now works correctly with Safari and Opera
browsers. Not sure why webkit browsers can’t parse the JSON fast enough
before the dynamically appended js script element is removed via script
cleanup, so I disabled script cleanup.
Also modified the ‘Loading Audio Posts…’ to display how many songs
have loaded so far, to help users with very large playlists. Ex. ‘Loading Audio Posts… 120 of 1000’
Bug-fix [6/05/13] Fixed player choking with ’%’ characters causing malformed URI error.
Bug-fix [3/21/13] Fixed SoundCloud Sets
(SoundCloud playlists) from choking up the player. SoundCloud Sets are
not compatible with Streampad v2 at the moment. If you think you’re
missing an audio post from SoundCloud, check to see if you posted a
SoundCloud Set instead of an individual song. They will NOT be streamed
through Streampad. Only individual SoundCloud songs will be picked up by
Streampad.
Bug-fix [3/15/13] Fixed SoundCloud posts not working after tumblr switched to iframes for audio player.
Bug-fix [1/30/13] Temporarily (or permanently? hah.) solves problems caused by tumblr API encoding audio URLs.
Bug-fix: the player now safely ignores Spotify audio posts
which it wasn’t originally designed to handle because they are actually
iframes and don’t link to an actual .mp3 file. This is probably the
major cause of all the complaints that I’ve seen where their Streampad
was not working properly and it was stuck at “Loading Audio Posts…”.
It’s because they posted or reblogged a post with a Spotify track and it
made the entire thing stop working.
Some additional technical information which you may or may not care about:
So what I’ve done over the last week is put together a ’monkey patch’ for the Streampad audio player. This is designed only to work on tumblr (as I only edited the tumblr part of the code)
The reason I monkey patched it was because I wanted a couple of
features on my Streampad that weren’t available in the original code
(e.g. shuffling songs, looping when playlist ended, showing the artist
and track title, etc.).
It started off as more of a hobby-related
type of thing where I just wanted to experiment with the code to see
what I could do, and I was really bored. But then I started thinking
maybe other people would want this so I decided to type up a little
tutorial. Along the way there were quite a couple of issues, not to
mention near the end I was getting pretty frustrated with certain bugs
so I kind of just ended off writing hacky and inefficient code. But then
on tackling the vary last problem, I just couldn’t get it working
because of how messy it was, so I cleaned things up a bit and rewrote it
all. It’s still hack-y, but oh well. Hey, I’m not the best
JavaScript-er, but it works pretty much flawlessly! I mean, I’ve tested
multiple scenarios of this extensively and it works in all the major
browsers AFAIK (Firefox, Chrome, IE7/8, Safari, Opera)
Now, what I’ve done is pretty much port the entire Streampad theme customizer
onto tumblr, making it usable with the customizable/boolean variables
on here. This way, if you want to change your Streampad colours or
settings, you won’t need to go back to the Streampad site and re-copy
your code. All you need to do is select your options through tumblr’s
theme customizer.
Also, you’ll notice the ‘Standard Streampad Bar’ option is
defaulted to being checked. If unchecked, another layout will appear
(example is the one on this blog). This is a custom design of mine which
is derived from the small tab music player, and you can edit the CSS if
you want/know how to. It slides out and starts playing when you hover
your mouse over the little tab on the bottom left corner of the screen.
Also, the little music icon (which you can replace if you know how to)
starts and stops based on whether or not the music is playing. It’s
pretty useless stuff, to be honest, lol, but sometimes the little things
make it more aesthetically pleasing overall.
(Removed 01 Feb 2013 to simplify installation.)
There were a few problems that arose, but they were thankfully resolved without too much work:
The array: for the tag playlist and filtering out Spotify posts, I
had to think of a way to selectively remove these posts. I went with
using indexOf() to match on each post that was to be removed, but this
is my first time using javascript arrays, so.. yeah. I basically made
the script loop through each track of the original array and spat out
the new array to be parsed by the music player. It’s pretty inefficient
imo to go through tracks one by one and match them, but this was the
only idea I could think of/had enough technical experience to work with.
Also, Array.indexOf() only works on IE9 and above, so older IE
browsers would show errors. Fixed by manually adding in the function,
and more about this can be detailed in this post here.
The next issue was the shuffle: I had to redefine the next/previous
track function so that it would shuffle songs, and this was pretty easy
to do. But upon closer inspection, this wasn’t a true shuffle since the
audio-player only preloads the first 20 songs at a time and when you get
to song 21 it loads the next 20, so I wanted to implement a ‘true’
shuffle which would also take into consideration the posts greater than
21. I ended up just making it preload all the songs in the playlist,
which I imagine will put more of a strain on tumblr’s servers,
especially if the user has a large playlist, but it’s calling 50 tracks,
the API limit, at a time now.
Volume/mute: it looks quite simple on the interface but it’s actually
hard to change in terms of the code. I tried to adhere to using only
basic javascript since the original code was written only in javascript,
otherwise I would use javascript library or something like jQuery which
at least supports the .on() bindings. For the volume controls, it was a
dynamic p that was being created/destroyed each time the person hovered
over the volume button and they used custom event listeners in the
original code, so I had to change some of that. The volume button now
reflects the state of the volume in real time, so if you drag the volume
to the lowest point, the volume button graphic will become ‘muted’, and
if it was previously muted and you start dragging up again, it will
become ‘unmuted’. Also, toggling the mute will still save the previous
volume setting so you can just click the button for an instant
sound-off/sound-on.
The mute graphic was also a bit of a hack that I did because I didn’t
want to redo the button graphics sprite which the original code called
upon. Basically, the unmuted state of the button shows the original
‘volume’ picture, and the muted state shows the same picture but without
the curved volume sound waves on the right. It’s still using the same
graphic though, and all I did was create another p the size of the part
that was cut out and position it on the right of the original p. Then,
when the user clicks the mute button, the original p shrinks -12px in
width and the new p gains +12px in width. Add in a few click handlers
and it seems like the button never changes but the graphics do. In
reality, the button width simply shrinks off to the left and is covered
by the other blank half of the button. It’s quite the lazy approach but
ah well, it works well.
The slideout on-hover layout: I used jQuery for most of it along with the Streampad Player API, and also the jquery.transition plugin by louisremi to use CSS3 transitions (which supports hardware acceleration) to animate the bar.
(Removed 01 Feb 2013 to simplify installation.)
Anyway, there’s probably more to talk about but I can’t think of much
right now so I’ll end it off here. You can find more details about the
first update I made to streampad below.
Old post
If you don’t know what Streampad is yet, from Streampad itself:
Streampad is the simplest way to play music on your Website or blog. It automatically detects and displays artist information and cover art. You pick the color, and choose from other customizable features. Streampad’s [a piece of] cake to install.
Basically, like other music players on tumblr (Grooveshark, Hypster, Billy, SCM Music player, Tumblr Music Player, Playlist), it plays music on your tumblr page. It sits neatly on the bottom of your page, and usually integrates well with any other widget you have installed, as well as infinite scrolling.
However, unlike all those music players mentioned above, Streampad gets its audio tracks using the Tumblr API v1, which means your playlist is automatically generated from your existing tumblr audio posts.
So far, and as far as I know, Streampad is the only player that functions this way. For all the other ones you need to either upload your own music or select songs to put on your playlist. In some ways, that’s a huge benefit because you will have access to a ton of pre-existing and newly-released songs for free (and legally too) which most of these players will offer in exchange for putting a big “buy” button next to all their tracks or some form of advertisement.
But for those of you who like to keep a simple, synchronized playlist which will always match the music content you post on tumblr, or maybe for those who are running music blogs, I think you’ll probably like Streampad better than anything else for the time it saves is unrivaled to any other currently released player.
Rundown of key components Streampad supports: – Supports multiple platforms – Custom progress bar colours, text/background colours, default text – Has options to hide volume controls, disable popout listening, etc. – Allows fullscreen listening – Allows autoplay – Automatically gets music tracks from all existing Tumblr audio posts via API – Supports scrobbling to Last.fm, sharing with AIM, and keeping listening history on AOL Music.
Minor issues to consider: – Can’t manually select which tracks to not play, apart from deleting the audio post itself on Tumblr. – The music you play is limited to whatever is posted on Tumblr as an audio post, including external mp3s and Soundcloud files; you can’t pick songs from YouTube or from an existing library. – Doesn’t support continous playback when visiting other pages on the blog. This means that the player will restart when you go to Page 2.
1) Select the “tumblr” icon 2) Follow steps under “GET THE CODE” in the dropdown that should appear.
Note: if you want to customize your player with colours and all that, you should scroll to the bottom of that page and customize it before copy-and-pasting the code. The code in the box automatically updates with the customizations you make.
******************* Customization Glossary ******************* Background color: colour of your Streampad bar. Text color: colour of text on your Streampad bar. Default Text: text which shows up on the bar when the page loads. Note: if you want this to be blank, just put a space in. Play Button Display: toggle whether or not you want to show the Play Button icon. Autoplay: toggle whether or not music will automatically start playing after Streampad loads. Note: I highly suggest you disable autoplay because, well, it’s autoplay. And don’t even try it on a blog without infinite scrolling because you’ll tick off your visitors so much by restarting the song every time they visit a new page. Allow Popout: toggle whether or not you can open the playlist in a new window and listen from there. Progress Bar (Front) Color: colour of the indicator bar showing the current position of the song. Progress Bar (Back) Color: colour of the indicator bar showing music that has completely buffered (loaded). Enable Playlist Drawer: toggle whether or not to show a button which reveals your entire playlist in a list. Also displays Amazon/iTunes advertisement buttons. Auto Show Playlist On Play: toggle whether or not to automatically make Playlist Drawer pop up when music starts. Enable Volume Controls: toggle whether or not to show the ability to change the volume. Button Color: select colour theme for the buttons. (format: button colour-shadow colour)
****** EXTRAS ******
Rearrange order of playlist:
To rearrange the order of songs being played back, go to the original audio post and edit the timestamp (the date) of the post. The player grabs the most recently dated posts first, so if you want to put a certain song at the front of the playlist, give the audio post of that certain song a recent date to put it in front of the other audio posts, and the order will switch. Changes aren’t reflected immediately, and they take a few minutes to register.
How to put Streampad on top:
Someone asked me how they could move the Streampad bar to the very top, instead of it sitting at the bottom like usual. Although this is highly unrecommended, you can still do it.
Warning: this will break some functionality of your Steampad because the “Follow” and “Dashboard” buttons (the tumblr controls) will overlap. Also, the volume control will still appear on the bottom.
Add this code to your Custom CSS box (Customize > Advanced > Add Custom CSS):
Alternatively, since it’s at the top now and people can freely scroll down the page, you can make it stay at the very top if you don’t like the streampad bar moving with the page while you scroll. For those who prefer this way, use this code instead:
(Note: if this isn’t working, or anything you put in the Custom CSS box has no effect, your theme may have disabled the Custom CSS feature. E.g some themes by Max Davis.
In that case, you will have to enable it by adding this snippet right before the closing </head> in your HTML code🙂
<style type="text/css"> {CustomCSS} </style>
Transparent Streampad:
(Note: this should work on all modern browsers with the exception of IE 8.0 and under, as this will render the entire bar invisible in older browsers that have compatibility issues such as IE 8.0. If you’re an Internet Explorer 8 user and you really want this done, message me, but it will take a lot more to get it working. Upgrading your browser is the easiest solution. :D)
If you’re unsatisfied with the colour choices (which is pretty much every single colour imaginable by the way) Streampad gives you, you can opt for a transparent bar. To get transparent Streampad bar, edit your Streampad code which looks something like this:
If you don’t see the &bgcolor parameter, add it in to the end of the script so it resembles something like the above code. You might have start from scratch, add in the transparency, and then redo your customizations if you’re having trouble.
There will be a few visual glitches, like the volume bar turning transparent as well, or the icon border bars still showing, but generally it will turn your Streampad transparent, displaying the content and colour of whatever is underneath it.
For more advanced users familiar with CSS and HTML, you can change the level of transparency, the opacity of the Streampad bar, as well as get rid of the user icon, number of plays, fullscreen button, and the logo. (although, you should be leaving it up for credit/copyright purposes).
I’m not going to jump into that right now since it’s harder to explain, but I might in the future if I have some time.
Show ID3 Track Title and Artist: Something of a little nuisance that I found when I first installed Streampad was that, while everything was great and all, you couldn’t get the title and artist to show up as the caption for the current song. Instead, Streampad would only pick up the description or text of the audio post, and sometimes people would leave this information out. It’s not that you can’t listen to music without knowing what it’s called, but some people may want that.
To show the artist and title instead of the audio post description text, you’ll need to copy and paste this code into your <head> in Custom HTML. Make sure you add this line in UNDER the original Streampad code, and not above/before.
In short, this script basically tells Streampad to grab the ID3-artist and ID3-title from tumblr’s API, instead of the post description.
For those confused, ID3 tags are what tells Tumblr what the artist name, track title, and album name is when you upload the song. It’s pretty common knowledge that you can edit these values by editing the audio post after posting it. You know, this page?
So basically instead of retrieving the text from the post itself like it usually does, Streampad now retrieves this information and displays it in the format of “Artist – Track Name”. I made some adjustments so that in the event where the song was missing its track name, but had its artist information, or where it had the track name, but was missing its artist information, it would show as “Unknown Track” and “Unknown Artist” respectively. If both the ID3 tags for artist and track name were missing, it would then default to the text description of the audio post, like before.
I have to say, I’m not the best with javascript, but I somehow made it work, haha.
Of course, there are more things you can display, like the album name, or whatever else is supported in the Tumblr API, but again, I’m not going to dive into that today.
