How to encode audio filepaths with base64

1,131 views
Skip to first unread message

jackie_bb

unread,
Oct 2, 2011, 3:14:38 PM10/2/11
to jpl...@googlegroups.com
Hello,

Im trying to encode my audio filepaths so that they aren't visible when you view source.  I know it's still possible to find the audio file by looking in your cache, but this would at least provide a little bit of security from those who don't bother to prod past view source.  From what I've been reading, I think it's doable, but I'm not an expert with javascript, so I'm finding myself stuck.


I tried using php base64_encode when I call the audio file in the head of my page:

$(this).jPlayer("setMedia", {
mp3: "<?php
echo base64_encode($str);
?>"
});

when I view source it converts my file to the base64 string, but the file doesn't play.  I think I might have to mention somewhere in the jquery.jplayer.min.js file that it needs to be decoded?

Any help would be greatly appreciated!

Dustin Blake

unread,
Oct 2, 2011, 5:42:54 PM10/2/11
to jpl...@googlegroups.com
jPlayer doesn't know how to read it.

If your looking to obfuscate filepaths you'd probably be better off writing some code that accepts a query string and does a look up via your own algorithm, then serving the track up in as a response.

So maybe for PHP you pass a get/post request to getsong.php like getsong.php?name=mytrack

The php script should then look in the appropriate directory for your file, and then output it

e.q.

header('Content-Type: audio/mp3');
readfile(path/to/your/file);


so then all you do in the setMedia of jPlayer is put in something like:


Hope this helps


jackie bb

unread,
Oct 2, 2011, 10:19:57 PM10/2/11
to jpl...@googlegroups.com
Thanks, that solution works great.  Thanks also for your instructions, they were very easy for me to figure out!

Cheers



--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/5clNxi_pJHsJ.

To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

jackie bb

unread,
Oct 2, 2011, 10:42:19 PM10/2/11
to jpl...@googlegroups.com
One more question if I may...

I have multiple tracks, and it would be nice to put them in one getsong.php file.  I've put my files one after another like so:

header('Content-Type: audio/mp3');
readfile('path/to/file.mp3');
readfile('path/to/another_file.mp3');

but this is mixing up the player with which song to get...

Dustin Blake

unread,
Oct 2, 2011, 11:01:32 PM10/2/11
to jpl...@googlegroups.com
right, thats because the PHP isn't thinking logically about what file to get.

A simple way to add logic is through if/else statements

e.g

if($_GET['name'] == "mysong_1")
{

    header('Content-Type: audio/mp3'); 
    readfile('path/to/file_1.mp3');

}
elseif($_GET['name'] == "mysong_2")
{
    header('Content-Type: audio/mp3'); 
    readfile('path/to/file_2.mp3');
}

Where mysong_# would be the name passed in the URL to the script (e.g getsong.php?name=mysong_1 etc...)

jackie bb

unread,
Oct 3, 2011, 4:10:59 PM10/3/11
to jpl...@googlegroups.com
Working! Thanks again.



--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/YXAmY9dHa5MJ.

squarecandy

unread,
Oct 3, 2011, 4:44:14 PM10/3/11
to jPlayer: HTML5 Audio & Video for jQuery
Interested in this as well... keep us posted if you find a good
solution!

On Oct 2, 3:14 pm, jackie_bb <jackie.b...@gmail.com> wrote:
> Hello,
>
> Im trying to encode my audio filepaths so that they aren't visible when you
> view source.  I know it's still possible to find the audio file by looking
> in your cache, but this would at least provide a little bit of security from
> those who don't bother to prod past view source.  From what I've been
> reading, I think it's doable, but I'm not an expert with javascript, so I'm
> finding myself stuck.
>
> I've found 2 threads on this topic, but both solutions didn't seem to work.
>
> https://github.com/happyworm/jPlayer/issues/39https://groups.google.com/forum/#!searchin/jplayer/base64/jplayer/bkz...

squarecandy

unread,
Oct 3, 2011, 5:21:23 PM10/3/11
to jPlayer: HTML5 Audio & Video for jQuery
nevermind... looking at the full thread now...

On Oct 3, 4:44 pm, squarecandy <peterw...@gmail.com> wrote:
> Interested in this as well...  keep us posted if you find a good
> solution!
>
> On Oct 2, 3:14 pm, jackie_bb <jackie.b...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Hello,
>
> > Im trying to encode my audio filepaths so that they aren't visible when you
> > view source.  I know it's still possible to find the audio file by looking
> > in your cache, but this would at least provide a little bit of security from
> > those who don't bother to prod past view source.  From what I've been
> > reading, I think it's doable, but I'm not an expert with javascript, so I'm
> > finding myself stuck.
>
> > I've found 2 threads on this topic, but both solutions didn't seem to work.
>
> >https://github.com/happyworm/jPlayer/issues/39https://groups.google.c......

jackie bb

unread,
Oct 3, 2011, 9:07:27 PM10/3/11
to jpl...@googlegroups.com
I seem to have encountered a problem with Safari... the files aren't playing.  When I look in the Activity window, it's finding my getsong.php file, but not loading the mp3s...

I'm also wondering, if it were to load the mp3s, if their filepaths would be exposed in the Activity window, since I haven't encrypted the file...




--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.

Dustin Blake

unread,
Oct 3, 2011, 10:51:42 PM10/3/11
to jpl...@googlegroups.com
I don't think I can help you with the Safari issue.

As for the activity window what do you mean?  I'm not really familiar with Safari outside of checking to make sure site styling is alright.

jackie bb

unread,
Oct 4, 2011, 3:30:30 PM10/4/11
to jpl...@googlegroups.com
When you open Safari's Activity window while on a web page, it lists all the files that load on that page, ie. images, css, php, and audio files.  Obfuscating the file links by getting a php file works perfectly when you view source, in chrome developer tools, and firebug, but I'm thinking that in Safari's Activity page, it will still show the path to the mp3, as it's an element in the page that has been loaded.  I've checked this with Wordpress wp-player which has an option to encode mp3 filepaths, and when you open the Activity window, the decoded filepaths are revealed. 



On Mon, Oct 3, 2011 at 10:51 PM, Dustin Blake <circuit...@gmail.com> wrote:
I don't think I can help you with the Safari issue.

As for the activity window what do you mean?  I'm not really familiar with Safari outside of checking to make sure site styling is alright.

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/AcojagOtaOoJ.

Dustin Blake

unread,
Oct 4, 2011, 3:56:53 PM10/4/11
to jpl...@googlegroups.com
ah, no the only thing that will be shown is the url to the script page where the song is requested

so while you might not see /path/to/actual/file

you will see /path/to/getsong.php?mysong

jackie bb

unread,
Oct 4, 2011, 11:48:39 PM10/4/11
to jpl...@googlegroups.com
hmmm... ok I'll see if I can get it to work.  thanks again for your help.



--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/aqWFj4Zlo3gJ.

Mark Panaghiston

unread,
Oct 5, 2011, 8:02:39 PM10/5/11
to jpl...@googlegroups.com
View this thread for the right way of serving a media file via PHP:
https://groups.google.com/d/msg/jplayer/nSM2UmnSKKA/bC-l3k0pCPMJ

You will have to set the mime tipe and the file... and it should do the rest for you.

It deals with serving the file. Its up to you do define some login or whatever to restrict access.

Dustin Blake

unread,
Oct 7, 2011, 1:29:53 AM10/7/11
to jpl...@googlegroups.com
Thanks for that Mark, I've been scratching my head about the progression display in Chrome.  I figured it was request/response.

jackie bb

unread,
Oct 9, 2011, 6:52:58 PM10/9/11
to jpl...@googlegroups.com
Thanks for the link, although it's a little too advanced for my level of php...
I figured out the problem however, I had written:

header('Content-Type: audio/mp3'); 
which worked in chrome, opera, firefox, but not safari.  then changed it to:

header('Content-Type: audio/mpeg'); 
works in all browsers, still have to test in IE.




On Fri, Oct 7, 2011 at 1:29 AM, Dustin Blake <circuit...@gmail.com> wrote:
Thanks for that Mark, I've been scratching my head about the progression display in Chrome.  I figured it was request/response.

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/BniFOcnaunQJ.
Reply all
Reply to author
Forward
0 new messages