Getting line numbers or having trouble copying? Pastebin.
Example:
3) Press Update preview > Save > Refresh the page and you should get all the options.
You may have to wait a few minutes for your settings to refresh. Try to do a couple of hard refreshes (Ctrl + F5) if you’re still not seeing any changes. This also applies to waiting for new songs which you’ve just reblogged to update in your playlist.
Here are the options, which are self explanatory:
SP Player Colour: the colour of the Streampad bar.
SP Progress Buffer Colour: the colour of the indicator bar showing music that has completely buffered (loaded).
SP Progress Song Colour: the colour of the indicator bar showing the current position of the song.
SP Text Colour: the colour of text on the Streampad bar.
SP Enable Autoplay: automatically start playing music after Streampad loads.
SP Enable ID3 Audio Captions: fetch track info from the post’s ID3 tags (displayed in the form of [artist] - [track title]).
SP Enable Shuffle: shuffle songs (users can still turn it off with shuffle button).
SP Enable Transparency: make the Streampad bar transparent.
SP Show Click To Play Button: show the Play Button icon.
SP Show Fullscreen Button: show a button which enables full screen playback.
SP Show Playlist Menu: show a button which reveals the entire playlist in a list.
SP Show Playlist On Play: automatically make the Playlist Menu pop up when music starts. (Playlist Menu must be enabled)
SP Show Plays Counter: show the number of times the current song has been played.
SP Show Popout Button: show a button to open the playlist in a new window and listen from there.
SP Show Profile Button: show a button to open the Profile Menu that lets you log into AOL Music/AIM/Last.fm (may not work anymore).
SP Show Repeat Button: show the repeat track button.
SP Show Shuffle Button: show the shuffle songs button.
SP Show Volume Controls: show a button to change/mute the volume.
SP API Blog URL: the full URL of the tumblr blog you wish to play tracks from.
SP Buttons Colour: the colour theme for the buttons.
Format: [button colour]-[hover colour]
Choose from presets : white-gray, white-black, black-gray, black-white, blue-white
SP Click To Play Text: the text which shows up on the bar when the page loads. If you want this to be blank, just type a single space.
SP Dont Play Songs Tagged: the tumblr tag which, if entered, will filter out audio posts tagged as such and not play them. If left blank, all your audio posts will play.
SP Play Songs Tagged: the tumblr tag which, if entered, will filter out audio posts tagged as such and only play them. If left blank, all your audio posts will play. (If “Dont Play Songs Tagged” and “Play Songs Tagged” are both defined, “Dont Play Songs Tagged” will have priority.)
SP Playlist Menu Height: the default height, in pixels (px), of the Playlist Menu.
Happy streampad-blogging! :p
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 div 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 div the size of the part that was cut out and position it on the right of the original div. Then, when the user clicks the mute button, the original div shrinks -12px in width and the new div 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 here.
1,190 notes
260 Comments
i-am-melissa likes this
victoria---locust likes this
truehiphopculture likes this
littlesecretss- likes this
bouncingquarians likes this
jesstacularspectacular likes this
julliennikka reblogged this from jduthemes
tb-1life2live likes this
asndr likes this
treadingthroughfreefall likes this
homeofthetrillest likes this
akiyamalemonlipsan reblogged this from jduthemes and added:
[[MORE]]
therealorgasm likes this
queeative123 likes this
concupiscentandeclectic likes this
jphani likes this
satintease likes this
carl-that-kills-people likes this
chubadmirer likes this
everydayiswinter likes this
bois-sacre likes this
madamba-enitx likes this
xamaba likes this
zeebirdz likes this
shenannii likes this
dannyelrey likes this
sincerelydeise likes this
xoxosopheaa likes this
ashleighamaro likes this
loserboypanda likes this
themissunderstoodz likes this
mrluhan likes this
insearchofzero likes this
hisunshiine reblogged this from jduthemes
stunleh likes this
jester-agron likes this
adanfigueroaslb86 likes this
race-cars-and-weed-jars likes this
pushacherry likes this
whitepapermoon reblogged this from jduthemes
musingsfromthecorner likes this
tiifffannny likes this
whitenoisetherapy likes this
colourcharcoal likes this
neoafrican likes this
elluiwoohyun likes this
voidcollar likes this
anniesaias likes this
eiiyaaah likes this
herroojimmyphann likes this
Show more notes
#streampad
#streampad music player
#streampad not working
#streampad player
#shuffle streampad
#streampad v2
#tumblr
#tutorials
#fixes
Reblog 07/08/12 URL
Older
Newer
