Extend Pushtape Audio player to inlude popout/other options to improve UX

this would bring the whole thing closer to the version of pushtape_mediaplayer i had. sinnce that initially consisted of:
- a fiefiled
- mediaplaylist
- soundmanager2

feel free to turn into a task if you lwant a patch.

Do we have any mockups or additional info that we can add from the design docs? We also might wanna keep exploring http://drupal.org/project/mediafront

This is a somewhat tricky problem. There are a couple ways to do this:

a) Pop-out player - Pop-up blockers may prevent this from working, and for some pop-ups tend to be a nuisance.
b) HTML Frames - Using HTML frames has a huge downside that while browsing the site, the URL will not change so it is kinda impossible to bookmark. Also some browsers get stuck "inside" a frame. Generally a bad experience for site visitors.
c) Autoresume the player - Autoresume would not actually allow continuous play, but would allow the player to "remember" where it was last playing and to continue where it left off on a page load. Not fully continuous, however. Bandcamp and Youtube does this if you reload a page midway through a song.
d) AJAX approach prevents a full page reload. It allows for continuous play and bookmarking of URLs (the javascript modifies the URL). This approach is used on many sites like Soundcloud, George Harrison, Grooveshark, Hype Machine, and Pitchfork. Downside is having to create a ajax type loader for the entire website. Could potentially use the History JS drupal module for implementing the HTML5 History API.

I put pushtape in my sandbox today. I got here looking for information about any audioplayer in it. I just can't find any. Otherwise i'm fairly impressed, i've wanted to compile my own installation for a while to share with my fellow musicians, but i just don't know how to do it, without having to ship a Database along with the drupal files.

I'm a bit of an experienced n00b, i guess for running drupal to push my music since version 5, so if you allow me a little input on this topic: I would really like to recommend SM2. SM2 has a brilliant way to deal with playlists that would be perfect for the album pages. PLayer customisation is VERY easy. As for keeping the audio playing even while going to another page, i wish i knew how to help you other than saying "don't go pop-up".

However: Big up for this project!

I read in the latest commit, that soundmanager2 was added. Which i think is great news. I got the latest 7.x-1.x-dev, put it in my sandbox and inntall but i cant find a way to enable the player. All i get is a plain link am i missing out on the location of the latest dev packages? (BTW, i run this in LIGHTTPD with sqlite3)

Perhaps i should file another issue, but i find it very confusing to have 2 separate content types for albums and tracks. I understand the intention, because of the hole single/EP/LP thing... And the obviously wellcomed possibility to incorporate information about one single track on the album/EP. But i tend to think that the Album or the "release" entity, should be a taxonomy term grouping all the track nodes belonging to that release. After all, isn't an album or EP ust a given playlist?

I reply to myslef, because i see that all the expected modules are present in /profiles/pushtape/modules/ but they do not get enabled. This could be due to my LIGHTTPD missing out on some apache specific rule right?

That initial commit just added the module and library, so things are still pretty raw and not really working just yet. You might want to wait a bit on it or manually add Soundmanager2 to the alpha version if you need it asap.

As far as albums vs playlists, this was discussed at length in another thread (which I can't seem to find atm) but the general gist is that playlists are not identical to albums. Although they both involve arranging tracks into a sequence, they serve different purposes and have different workflow and metadata demands. I do like your idea of using taxonomy for handling playlists.

FYI, a track by itself that is not part of an album is considered a standalone "release". On the releases page, you will see albums and standalone tracks (singles) mixed together, which eliminates the need for separate views for tracks and albums. However if that doesn't work for you, there are separate "track" and "album" only views provided that can be used and modified instead.

https://drupal.org/project/background_audio might suit the issue?

Hi banghouse, how would you integrate pushtape to background player ?

fix typo

Have not tried this player, but the way it works is similar to what I'd like to get working with Pushtape (and is based on SoundManager2).

http://scmplayer.net/

SCM Music Player is a free and open source web music player, that brings a seamless music experience to your website. Support Tumblr, Blogger and various blogs.

Continous Playback Cross Pages - Seamless playback throughout your website.
Full Featured Control - Play, pause, next, previous, seek, shuffle, repeat mode, volume and more.
Custom Skins - Match your look and feel. Choose or design your own skin with CSS.
Dynamic Playlist - Music from various sources: MP3, SoundCloud, Youtube, RSS in HTML5 or Flash.
Flexible UI - Dockable player on top or bottom. Playlist can be toggled.
Setup Wizard - Create your SCM Music Player without any pain.

Updates - I made a custom global player for Pushtape based in SM2:

https://github.com/zirafa/pushtape-player.js

Drupal integration is here:
https://drupal.org/project/pushtape_player

These will be included in the next release. It doesn't solve the problem of seamless playback, but does improve the UX a bit and gets us a step closer.

Awsome Zirafa!!

You state: "It doesn't solve the problem of seamless playback,(...)"

you guys have probably thought of this already, but better safe than sorry: perhaps to achieve seamless playing, there should be a possiblity to upload a full length file (with all tracks supposed to play back seamlessly), and work on some sort of timestamp deeplink system skipping to specified spots within that full length file?

@Sakrecoer

I think the "seamless" issue is more of navigating the rest of the site independently of music playback, not seamless audio playback. I do like the idea of seek points inside a single audio file though...

ah :) of course...
in case this information could be of any use: i believe soundcloud uses backbone.js to achieve that.
http://backbonejs.org/

Yes, a Javascript MVC is really the "right" solution for this. One approach is to try and build a Headless Drupal site built on Pushtape + JSPF or RESTWS, that integrates with a framework like backbone.js or angular.js.

In the meantime, a drop-in solution would be to use something like Ajaxify (https://github.com/browserstate/ajaxify) which uses History.js to dynamically load content without a page refresh. It would probably require a customized theme to implement in Drupal, but it's probably a lot easier at this point than building a JS MVC from scratch.

Of course a pop-up player is still another possibility, though it's probably not the best long term solution.

Just a follow up, the new version of pushtape-player.js script allows for much more dynamic UX. It automatically observes any changes in the DOM when the playlist is modified, which works well for single-page-application and ajax heavy sites.

Here's a link to a demo on github:
http://zirafa.github.io/pushtape-player.js/demo/autoscan-example.html

This solves a crucial problem when building seamless music interfaces, which involves keeping track of the playlist state. As you can see with the demo, the player will always keep track of current playlist state, even if you modify it while it's playing.

To get this working well in Drupal, you'd still need to ajaxify all the http requests. Alternatively one way to achieve a background pop-up player would be to just have the parent window control the pop-up window's list of links using simple jQuery manipulation. i.e.

// Remove the second item from the playlist
$( "ul.playlist li:nth-child(2)" ).remove();

// Append a new item to the bottom of the playlist
$("ul.playlist").append('<li><a href="/path/to/audiofile.mp3">New audio file</a></li>');

Note: These examples would need to fire in the child window (running the pushtape-player.js script) but remotely called from the parent window.