implement a group of files (mp3) to the playlist of a mediaplayer

joel · 2011-03-16 21:58:43

Hi,

I’m looking for a way of getting a grouped set of files appear in a media player playlist.

My client needs to do the following:

Create a new files category
Upload the mp3 into that specific category
Call this category via custom fields

and the player + playlist gets attached to the article.

I’ve figured out all of the above except for the integration with the player. I’ve stumbled upon jplayer which looks great, but I just can’t sort out how to combine this with my idea of usage.

All ideas are welcome.

Last edited by joel (2011-03-16 21:59:07)

jakob · 2011-03-16 22:50:04

Hi Joel,

One open-source player I found really easy to implement and that builds itself from a normal unordered list is cashmusic’s flowerplayer. It’s easy to style, looks a lot less technical (and IMHO nicer) than most of the players and it’s dead easy to produce the code.

In my case, I uploaded the files via the files panel, gave them a description and assigned them a category, e.g. “audiofiles”. Then I used this in my HTML head section:

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script src="<txp:site_url />js/libs/flower_core.js" type="text/javascript"></script>
<script src="<txp:site_url />js/libs/flower_init.js" type="text/javascript"></script>

and this in my page template:

<div class="flower_soundplayer">
   <ul>
<txp:file_download_list category="audiofiles" limit="99" break="">
      <li><a href="<txp:site_url />files/<txp:file_download_name />" title="<txp:file_download_description />"><txp:file_download_description /></a></li>
</txp:file_download_list>
   </ul>
</div>

If you want a different playlist per article, e.g. an album name, you could create a file-category for each album (or sub-categories of a parent category if you want to be really neat) and use a custom field called “album_name” for the album. Then put the above code in your article form and replace the third line with:

<txp:file_download_list category='<txp:custom_field name="album_name" />' limit="999" break="">

and it will build the playlist from the category you entered into the custom field “album_name”. You could also use txp:category_list in combination with the code above to create a discography of album playlists if you wanted (this is where it pays to have a parent_category in which all the albums are stored).

PS: if you like it, do donate. CASHmusic is a non-profit working together with creative commons and some good musicians. They have a few other small tools like a photo and video lightbox, a floating player, “tweet for a track” or “facebook like” for a track but you can use just what you need. More stuff is also in preparation such as email for a track with list management and other music management tools. In short, nice people, nice spirit, nice work.

Last edited by jakob (2011-03-16 23:09:20)

joel · 2011-03-18 11:42:32

Thanks a lot! I will certainly have a look at this! :)

joel · 2011-03-22 20:53:43

I’ve got this working with the custom field option. Unfortunately all articles that uses this very article-form gets the same music player output. How do I fix this?
txp:chh_if_data?

Thanks a lot in advance!!! :)

els · 2011-03-22 21:47:19

<txp:if_custom_field>?

joel · 2011-03-22 22:23:44

Els wrote:

<txp:if_custom_field>?

Of course!!! Thanks a lot! :))

GugUser · 2012-01-19 00:42:09

With Textpattern 4.4.1 I must disable in the file directory the .htaccess file for this to work. Or someone knows another solution?

GugUser · 2012-01-19 22:28:04

Im Textpattern 4.4.1 I made something similar with MediaElement.js and created a macro (smd_macro) <txp:audio id="of the audiofile" />:

<audio controls preload><txp:file_download_list id="{audiofile}" break="">
	<source src="/dokumente/<txp:file_download_name />" /></txp:file_download_list>
</audio>

This works, but only if I disable in the file directory the .htaccess file. Someone knows another solution?

jakob · 2012-01-19 22:59:23

I think the htaccess_dist file that is placed in the /files directory (or /dokumente in your case) disallows all direct linking of content within it. If you want to prevent hotlinking but allow your script to access the directory, you may need to use another htaccess-based hotlink prevention solution that allows access from within your local domain but not from outside. Google will show you many variants.

GugUser · 2012-01-20 03:36:51

I don’t think that this has to do with a hotlink prevention solution. I’ve found a solution that seems to work.

In my case with the .mp3-file, replace the line …

RedirectMatch 403 .*

with …

RedirectMatch 403 (.*[^.mp3])$

jakob · 2012-01-20 07:20:53

Yes, that would work but allows open access to mp3 files in your /dokumente directory. However, I thought the reason you had the htaccess active in the first place was to try and prevent direct linking to the file and allow access only through the player.
The theory (not sure how reliable it really is in practice) behind the “prevent-hotlinking”-inspired variant is that it would allow you to provide direct link access only to links coming from a specified referer, e.g. from your own domain. Links from elsewhere or direct calls would be disallowed.

Last edited by jakob (2012-01-20 07:22:03)

philwareham · 2012-01-20 09:45:10

jPlayer is a great option for an MP3 player. Easy to re-skin as well.

Textpattern CMS

Textpattern CMS support forum

#1 2011-03-16 21:58:43

implement a group of files (mp3) to the playlist of a mediaplayer

#2 2011-03-16 22:50:04

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#3 2011-03-18 11:42:32

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#4 2011-03-22 20:53:43

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#5 2011-03-22 21:47:19

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#6 2011-03-22 22:23:44

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#7 2012-01-19 00:42:09

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#8 2012-01-19 22:28:04

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#9 2012-01-19 22:59:23

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#10 2012-01-20 03:36:51

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#11 2012-01-20 07:20:53

Re: implement a group of files (mp3) to the playlist of a mediaplayer

#12 2012-01-20 09:45:10

Re: implement a group of files (mp3) to the playlist of a mediaplayer

Board footer