Can someone point me to a good, simple 'jukebox' type thing?

[L.Adlon]

On my current site, I'm using some 3rd party bit of code to display a sort of jukebox/mp3 player to play some of my music as part of my portfolio. It seems to work fine (although I haven't been able to test it on multiple platforms/browsers), but that was years ago, and I'm wondering if there might be something better.

 

The one I'm currently using is from Premiumbeat. From what I see, the code defines a variable (SO) as a new SWFObject, then adds various variables/attributes, then does a write ("flashplayer"). (Sorry, I'm not an HTML scripting type)

 

Whatever the case, the result is an embedded box/window with transport controls, and the songs displayed in a clickable list. That's all I need... the list of songs, and the ability to select any of them, and have it play.

 

Anything out there that anyone would recommend? Simplicity is what I'm after. No need for bells and whistles. Just compatibility!

[Ingolme]

Flash is still the most widely compatible system to make sound players.

 

Some mobile devices don't support flash, though. HTML 5 has a new <audio> element, but if you want to create a playlist with names of songs and the rest you're going to need to program it in Javascript. Perhaps somebody has already made a playlist Javascript program, I'd search for that.

[L.Adlon]

I suspect the one I'm using is Flash-based. For one thing, it mentions SWFObject... which, oddly enough, I just 'discovered' a few days ago, trying to find an alternate/better method of embedding Flash movies in my website. My current method was a bit of premade code and stuff from some person online, and I now replaced it with SWFObject.... but, looking at it, it may very well be the same type of thing (...just a newer/better version/utilization of it, I guess).

 

The new SWFObject thing solved a number of issues I was facing with the Flash integration in my site, which was very welcome. I also realized I could replace some of the looping Flash animations with looping animated GIF versions, which solved a few things, too. Even if they fail, at least they will show the first frame, which works great, too.

 

Ya, I never really thought about it, until you just mentioned it now, that the present jukebox thing may not work on mobile devices. I addressed the whole Flash support thing wtih the Flash movies, but never thought to consider the jukebox.... (Again, that's the very reason I avoid premade code... especially where I don't understand how they work!)

 

Damn... That has really got me wondering, now... I thought that jukebox was a really nice solution, but you're right, it may not work on some mobile devices... or computers with Flash disabled/uninstalled, for that matter.

 

I'm not sure about the HTML5 thing, though... Their seemingly simple and all-powerful <video> tag ended up (to me at least) a ridiculous joke... The TAG is simple enough, but the amount of support code that was required seemed to make it even more complicated and inconvenient than the methods it was made to eliminate/simplify! (I may be wrong, but from what I read up on it, when trying to switch over to it, it seemed far more complex than the regular HTML ways)

 

I guess that even though they don't natively support it, some of the mobile devices have Flash playing plugins installed by their users, enabling them to view Flash sites.

 

Kinda sucks that the music may not work. The other Flash stuff is purely aethetics, so it's not a complete loss if the site is viewed on a non-Flash system... but not being able to listen to the music portfolio is a serious letdown.

 

I guess I'll use the current jukebox for now, but if anyone knows of some existing (and more compatible) method, please let me know.

 

I guess I could go really barbaric, and just have links to the mp3 files? Let the native media player on the computer play them?

[L.Adlon]

Anyone else? I'm not sure if I should use my current jukebox or risk trying some other one I might find on the web.

 

The current one seems to be javascript based, but also uses a swf file. I'm not a coder, at least in this sort of sense, so I can't really follow it fully.

 

Seems to be creating a bunch of variables, the first involves SWFObject, and the others are playback parameters.

 

Not sure if this one I'm using will continue to be compatible over time, or what.

 

 

All I need is a jukebox type thing on my site, where it shows a list of 6-8 songs store on the webspace, and you click on them to play them. Alternatively, it could have transport controls to play and to jump to the next song.

Edited June 16, 2014 by L.Adlon

[L.Adlon]

I found the 'DewPlayer', which seems pretty clean and simple. I think I'll use that. Anyone have any opinions on it?

[L.Adlon]

DewPlayer is cool, but I can't seem to get it to play more than one song, even though I seemingly have it coded properly to play multiple files (and I'm using the 'multiple' version). It only seems to see the first file.

 

argh...

[L.Adlon]

For those following along... I got the Dewplayer to finally work... No idea what I did differently. But, once I conquered all that, I realized that the Dewplayer is not an HTML player, so my music wouldn't be heard on several devices (...as was the case with my previous mp3 player I was using on my site).

 

The jPlayer looked very good, but I was really confused by the installation. The quickstart guide seemed relatively easy enough... but when I tested it, it claimed my browser or Flash needed to be upgraded, which I don't think is the case. I couldn't get anything to work, and things just got too complicated with all the coding involved.

 

I then found another HTML/Flash player called MediaElementPlayer. That one was much easier, and all I had to struggle with was my usual battle with CSS positioning (....I can never get that to fully work!). Ultimately, I just used a layout that didn't need special positioning, and all is well. Just got to try it on some other platforms to be sure.

[L.Adlon]

ARRRGH....

 

Okay, I could really use some help with this. Sorry... Got another bit of frustrating weirdness happening. This is why I don't like using premade scripts... I don't know how it works, and I'm often powerless to modify it.

 

So, what I can tell you is this...

 

I'm using MediaElement Player (an HTML/Flash hybrid audio/video player).

 

Works fine so far in everything, but is exibiting one major glitch.

 

The HTML code for the player for each song is this:

<audio id="player8" src="mp3/song8.mp3" type="audio/mp3" controls="controls" class="songplayer"></audio>       <div class="songtitle">This is song number eight</div>       <script>        $('audio,video').mediaelementplayer();       </script>

There's a MediaElementPlayer folder that contains a number of .js files, two .swf files, and some .css files. I'm assuming the javascript is for the HTML5 option, the .swf is the fallback method, and obviously the .css is to style the player interface. Beyond that, I'm out of my element.

 

I have 8 'instances/occurrances' of the above code... each pointing to a differnt song. Originally, the ID's were identical (which I know is very wrong, but I wasn't sure if the code was specifically hardcoded with that one ID). Seemed to work either way. But, today, I changed it so that each instance used a different ID (Player1, Player2, etc)... with the assumption/hope that the IDs were somehow dynamically created within the script or something other than hardcoded.

 

Now, the thing is... it all works. In Firefox and Explorer, it seems to work great. On an iTouch, the players appeared and worked... BUT, the one issue (that I know of) is that it would stack multiple copies of the player where a single player should be.

 

More specifically, it seems that the first player instance would have 8 players stacked. The second instance had 7. The third had six... and so on. With the last instance (correctly) having just the one.

 

Problem is, I don't know javascript, and even if I did, I wouldn't know the workings of the player and the support files... I'm (assumingly) slave to the scripts, and clueless what my options are.

 

I thought originally it was because of the (previously) identical ID's, but it's doig the stacking even with unique ID's.

 

I know there's not much here to go on, but based on your understanding of how this type of system would work, can anyone come up with some theories as to why it's stacking like that, and what I could try out?

 

Hope someone can help. As usual, your efforts are always appreciated.

 

(I should point out, the reason I have multiple instances of the player is because MediaElement Player does not have playlist capability. Otherwise, I'd just have one instance, and have it play multiple songs.)

 

BIT OF A CLUE: Just out of curiousity, I removed all but one of the <script> sections from each instance... thinking that maybe only one was needed. I loaded that up and tried it on the iTouch. Interestingly, what I got was the first player (with the <script> displaying once (properly), and all the other players used the fallback method (showing a DIFFERENT player, but (properly) one instance of each). Even stranger (to me, at least) was that these fallback players (which I assume are the Flash versions) actually WORKED. Both player types (HTML5 and Flash) work on my iTouch. How is that possible?

Edited June 23, 2014 by L.Adlon

[L.Adlon]

So, here's where I'm at right now. And, again, please remember that although I do know some ActionScript, I am in no way a javascript coder type of guy. Completely out of my element here...

 

The latest test has two 'instances' of the player (...and by instance, I just mean, the <audio> appears twice on my page.. it's not being called up by javascript or anything.

 

In the first, I kept the accompanying <script> bit. In the second, I removed it (...again, with the (hypotetical) assumption that it only needs one <script> on the page?

 

The stacking I was getting before (multiple copies of each player stacking on top of each other when viewed on an iTouch) seems 'remedied' as a result, with the two players now being two single players (with no other additional players stacked on top of them).

 

My previous setup worked great on Firefox and Internet Explorer. Only IOS (...specifically, my iTouch) was doing the stacking thing.

 

With this new test coding, I get two (single) players... each different (assumingly, the second is the fallback version, with would be Flash-based).

 

What is strange, is that BOTH appear to work... which doesn't seem possible on an iTouch. How can the Flash-based one work? If so, what's the point of having the HTML5/Flash hybrid?

 

Very confused and lost. Hoping someone can shed some light.

 

Here's the test coding (...again, this is using the MediaElement Player scripts/files for an HTML page):

<audio id="player1" src="mp3/Song1.mp3" type="audio/mp3" controls="controls" class="songplayer"></audio><div class="songtitle">This is song one, with the script.</div><script> $('audio,video').mediaelementplayer();</script><audio id="player2" src="mp3/Song2.mp3" type="audio/mp3" controls="controls" class="songplayer"></audio><div class="songtitle">This is song two, without the script.</div>

Edited June 23, 2014 by L.Adlon

[L.Adlon]

Weird... It seems I don't even need the <script> stuff at all. The HTML5(?) version of the player seems to work on everything.... well, except for Internet Explorer. There, it 'works' but 8 times out of 10, the browser hangs (seemingly due to the songs being loaded in the background?). Completely random... Some of the players do the preload fine, others hang. Different patterns each time. Ones that worked before, don't... and vice versa.

 

The iTouch and Firefox seems perfectly happy with just the:

<audio id="player2" src="mp3/Song2.mp3" type="audio/mp3" controls="controls" class="songplayer"></audio><div class="songtitle">This is song two, without the script.</div>

So... What exactly is the Flash version needed for? Browsers that don't support HTML5? Which would those be?

 

 

But, still... IE is giving me grief. So, this isn't solved yet.

Edited June 23, 2014 by L.Adlon