Experimental alternative to the default Drupal audio players (re-submit)

Events happening in the community are now at Drupal community events on www.drupal.org.
Dublin Drupallera's picture

(re-submitting this because the previous post couldn't be edited and placed in the correct group)

Hi guys,

I've been playing around with a new alternative to the default audio players that come with Drupals audio suite of modules. It's in early beta, but, when I showed a client how it worked, they wanted it yesterday.

So, you can see a preview of it at the following links:

http://www.the4ofus.com/classified_personal

http://www.the4ofus.com/heaven_and_earth

http://www.the4ofus.com/fingerprints

Key functionality/ergonomics would be as follows:

  • Allows you to "preview all" like on amazon.com
  • Allows the user to click to play another song and automatically stops playing the previous song, if another one is clicked. With the existing audio players visitors have to click to stop a song before playing another one.....to avoid 2 songs playing at the same time
  • When a song finishes playing it automatically moves to the next song. as opposed to having the user click to play each song
  • Avoids the buffering issue which sometimes occurs using the button player that comes with the audio.module
  • Volume, pause and play control
  • Tested and works with opera, IE 7, IE 6, Firefox (and the new beta)

The audio player is controlled using a mix of mainly prototype and soundmanager2. It's a fairly heavy set of js at the moment but the plan is to trim it down and either create an add-on .inc for the audio.module (if there is enough interest) or integrate it into views, so it can be used for any drupal playlist.

An example of similar functionality can be found at the excellent muxtape site: http://muxtape.com or of course on Amazon.com - here's an example of their "preview all" playlist for REM,

Any comments, criticism or suggestions welcome. Anyone with old versions of safari, please give it a spin and let me know if it works okay on older versions of safari.

I'm hoping to catch the eye of other art & music developers who maybe heading towards the same objective and who may have tackled the above functionality already in a more efficient way.

cheers

Dub

Comments

It looks great Dub! Congrats

chrisroditis's picture

It looks great Dub! Congrats for your work. It is certainly something that the drupal music community has been looking for for a long time. Are you planning on releasing it as a audio.module add-on player or a separate module?

OpenMusic, a network of Drupal based music social communities
TemplateMonster templates 20% off

A healthy disregard for the impossible.

thanks

Dublin Drupallera's picture

thanks Christopher,

Not sure yet, whether it should be an audio.module add on or simply a drop-in theme thing. The script catches all mp3 files on the page (each song is appended with a track_id so it knows the order) and just plays them, so it's something that could be inserted into a theme as opposed to something more complicated.

It's still a work in progress, so, I'll post up here when it's ready for usage and decide then what's the best way forward.

I quite like the simplicity of the way they do things on muxtape.com: http://kire.muxtape.com/ (which is a mobile friendly site as well). It's very simple, clean and leaves a lot of scope for theming.

available?

cryptoguru's picture

Hi Dub,

your demo looks perfect!
Is it available anywhere? (in any form)
Would love to try it on my site

Cheers

Stu

not yet

Dublin Drupaller's picture

if anyone is looking for a copy...just drop me an email and I can send you a zip of the javascript + example html if you want to play around with it.

the code needs more work to get it into a 'releasable' state. e.g. a lot of the prototype functions aren't being used, so the js could do with a tidy up.

I'd love to try out a copy in my app.

jsulmar's picture

Hi Dub, In your discussion at groups.drupal.org/node/10869, you described your "Experimental alternative to the default Drupal audio players". I really liked the examples and I'd love to try it out in my application. Right now, I'm using SWF tools with Flowplayer3. Although this plays the list nicely, it does not present a very friendly UI for controlling the play. You indicated that you are willing to send a copy of your developmental zip. If this is still the case, I'd be very interested in trying it out. Thanksl

..

Dublin Drupaller's picture

I'll email you the zip, but, worth mentioning that the javascript for that "experimental alternative" is very heavy..about 280kb for each page load, which is a lot.

I've moved on to an even newer player which has the main functionality (continues on from previous song etc.) the experimental one had but is much much lighter, code-wise.

http://groups.drupal.org/node/19309

Dub

Newer Player

jsulmar's picture

Dub...
I understand that 280kb is quite large. If you rather recommend the technology you describe in http://groups.drupal.org/node/19309#comment-74419 I will try to adapt that. In comment-74419 you provide a list of modules, a snippet, and a link to a demo. I assume you built the demo using those modules and snippet. Are other components also needed (e.g. a player)? Do you have any more advice on creating a system like your demo? I'd like to try to build this. Thanks very much for sharing your research, I think lots of Drupal users will benefit.

..

Dublin Drupaller's picture

it might be easier to use the following module for the player:

http://groups.drupal.org/node/19309#comment-97530

or else follow the step by step I posted in the other thread. (incidentally, you don't need the getid3 module installed. I can't edit the list of modules on that thread)

hope that helps
dub

Very timely!

gusaus's picture

Great job Dub! Your examples have already been a huge help for a band site (and hopefully profile) we're currently building (been posting notes in this massive thread). Indeed it would be ideal to get additional views from those who have achieved similar functionality as there seems to be a countless number of modules and javascript tricks.

Maybe this warrants a wiki post.

BTW - is there a reason this post is marked as 'private'?

Gus Austin
PepperAlley Productions

Gus Austin

..

Dublin Drupallera's picture

I didn't mean to make it private, Gus. not sure if it's a bug on the site or a problem with my account.

That wiki-page looks very useful,

Definitely very cool

zirafa's picture

Definitely very cool functionality dub.

I updated this node to be public, fyi.

I really like the idea of

zirafa's picture

I really like the idea of this as a drop-in theme thing. Maybe a mini-module of sorts that plays nice with audio module? Something like you could enter in what URLs you want to turn it on (similar to how you tell drupal which pages you want blocks to appear) or PHP for which pages you want it to appear on.

audio*
node/424

The actual javascript player could be like a player that is fixed positioned at the bottom corner of the page like an overlay. Sort of like Gonze's Yahoo Media Player.

But I'm not sure if this is how you intended it to work.

Just curious - how come you chose prototype instead of jQuery?

prototype v jquery

Dublin Drupallera's picture

Hi Zirafa..

thanks for making it public.

re: why prototype?
A javascript guy who was helping me started the mock-up using prototype and stuck with it. It was based on a prototype demo that already existed so it was simple enough to tweak for my needs. The final version should really use jquery, seeing that's part of core now.

That yahoo media player is interesting. Do you know if that is open source?

Dub

jQuery Media module?

gusaus's picture

Not sure if/how this would come into play w/ what we're talking about - just thought I'd throw it out there:
http://drupal.org/project/jquery_media

Gus Austin
PepperAlley Productions

Gus Austin

I'm not sure if it is open

zirafa's picture

I'm not sure if it is open source, but Lucas Gonze who created it might be willing to share source or some info His blog can be found at http://blog.gonze.com . He is a cool guy.

quick implementation of the Yahoo Media Player

ica's picture

Looks an interesting option. For Drupal ideally it could be a player plugin option to jsmedia.module to wrap Yahoo Media Player
but for a quick solution without a plugin would be include the code below on your page.tpl.php
<script type="text/javascript" src="http://static.delicious.com/js/playtagger.js"></script>
the js on Yahoo include -or get it & name your own and keep it on your site & include from there
http://mediaplayer.yahoo.com/js
tut's
http://developer.yahoo.com/mediaplayer/
http://mediaplayer.yahoo.com/

ps: i have not tested this method and i might be wrong but in theory any mp3 uploaded with a CCK filefield would be playable with the YMP

Many good options...

gusaus's picture

...but a streamlined set/process would be huge! I've complied various options in a wiki - http://groups.drupal.org/node/10894 - would be great to demo some options in a sandbox and/or possibly do a dojo session or workshop? Think there would be some nice interest.

Gus Austin
PepperAlley Productions

Gus Austin

Looks Excellent!

galooph's picture

Great work Dub!

Do you need any beta testers? I'm doing a small site for my brother and this looks ideal.

Dan

funny -- exact same thing

thomas23's picture

Galooph, when I read your post my first thought was "I haven't posted here allready, have I?" LOL as I'm developing a site for my brother's band, too.

to Dub, thanks for in-sight-of-land signal :)

thomas23's picture

It looks very interesting even though I wish I'd know what parts are yours (the player bit) and which are due to view or other modules.

I would really like to have some "where to start" hints since I would love to integrate this functionality in some way or another. Especially what could be the way to lead to a similar "album view" and lyriks + download/buy link (my offset is funcioning audio.module by/album/albumname stuff but that's it, still a rather node-list-like page, done nothing with views.module yet).

Dub, have you done that site or does it "just" integrate your player code? Could you (or someone else?) give directions what's neede or where to start?

I'd greatly apprechiate it!

Cheers.

Edit: A great feature (if not allready available) would be to allow playing a (user?)defined playlist while the visitor is at a specified domain, i.e. when someone visits my site no matter which (drupal-only?) page is viewed the player keeps playing (it technically not possible using js the module to be could include an admin option "allow player in pop-up" to open a popup from the "play page").

updating thread

Dublin Drupaller's picture

just a quick update. I done another, much lighter (code-wise) alternative audio player for a new discography.module that's in development.

Click through here for more details and a demo:

http://groups.drupal.org/node/19309#comment-74419

It's using soundmanager2 which is much lighter code wise and offers much more control over the flash player..while still maintaining the core functionality of the alternative posted on this thread...i.e. it's elegant, stops playing another track when you click on another...and continues to play all the tracks on the page.

It also allows you to control the colours of the flash player using css which is very useful when tailoring it for a specific site.

dub

Awesome...thanks

jumoke's picture

Awesome...thanks

Music

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: