Waveform progress bar suggestion like Soundcloud have

[Jonathan2]

Sometime in the future, this would be a nice effect to add to the
jplayer progress bar:
http://soundcloud.com/boris-johnson-vs-2anondjs/boris-johnson-vs-2-anonymous-djs-is-fatboy-slim-a-dj-sample
- the way it generates the waveform as the progress bar looks pretty
sweet!

Actually, there's no reason that the devs should need to worry about
this. I'll look into it later, there must be a php class that'll turn
a waveform into a graphic.
Stop me if someone's already looking into it!

[Maboa]

Interesting. Let us know how you get on.

Cheers

Mark B

On May 26, 11:01 am, Jonathan2 <digitalto...@gmail.com> wrote:
> Sometime in the future, this would be a nice effect to add to the

> jplayer progress bar:http://soundcloud.com/boris-johnson-vs-2anondjs/boris-johnson-vs-2-an...

[Andy Kelley]

I'm doing this in Django (python).

http://github.com/superjoe30/PyWaveform

I'm about to add gradient support.

On May 26, 2:01 am, Jonathan2 <digitalto...@gmail.com> wrote:
> Sometime in the future, this would be a nice effect to add to the

> jplayer progress bar:http://soundcloud.com/boris-johnson-vs-2anondjs/boris-johnson-vs-2-an...

[Andy Kelley]

Gradient support complete.

Btw if you're still using PHP to develop websites, I highly recommend
you look at a web development framework. Any of the new popular ones
will do the trick, but I especially recommend Django.

[Jonathan2]

Sounds good - I found that it's Sox which makes the waveform for
soundcloud - annoyingly, my host won't compile Sox for me!

As for frameworks, for a small quick site, I don't see that it would
be easier to install and learn a new framework and coding methodology
over just using plain old php5 and various third party classes? I'll
have to read more about it!

[Andy Kelley]

Jonathan,

Even for a "small" site, you won't regret the investment. Even if
there is no code, the templating engine alone is worth it. The motto
is Do not Repeat Yourself - which means that editing and expanding
your website is a breeze because you only ever have to edit things in
a single well defined place.

Also the code in PyWaveform is in C - it would likely be pretty easy
to create a PHP binding.

As for not having sox installed on your shared host, you can install
it yourself if they give you shell access. Without root you can still
set a couple environment variables just so, and configure with --
prefix=/home/yourname/fakeroot and wala, you have sox installed.

[Simon Emmanuel Roux]

Any new development with this idea to integrate waveform display to the player ? I'd love to use it / help making it happen. Would also be great to be able to color code different sections of a waveform to represent the different segments of an audio file.

[Jonathan2]

Well, a long time ago, I tried various waveform generators, including yours. Never got very far - spent a little while battling with the  "No module named cwaveform" but I didn't know enough Python to work out what the problem was (tried renaming, moving files, changing the cwaveform to waveform, putting in same directory... gave up!).

But suddenly, I noticed today you have a much improved C version https://github.com/superjoe30/waveform

So easy, even I could built it in two lines! Here's what you'd do on Ubuntu:

Download the files from https://github.com/superjoe30/waveform/zipball/master, unzip, cd to the directory.

apt-get install build-essential libsndfile1-dev libmpg123-dev libpng-dev 

gcc -o waveform main.c -O3 -lsndfile -lmpg123 -lz -lpng

That's it! (assuming you get no errors). I've now got a compiled binary for Ubuntu 64 bit if anyone wants it.

Incidentally, I really REALLY recommend "normalize audio" first to get a decent waveform. You don't have to mess with your original mp3 as you'll have converted to wav to run waveform anyway, but I'd do this:

apt-get install normalize-audio

Then it's as simple as 

normalize-audio 1.wav

Then, for the "sought to" waveform, use something like:

./waveform --width 730 --height 130 --color-center 0000FFFF --color-outer 0000FFFF 1.wav 1.png

and for the "seeking" waveform, something like:

./waveform --width 730 --height 130 --color-center CCCCCCFF --color-outer CCCCCCFF 1.wav 1_s.png

Don't know if I'm using it right, but it works well and it's damn fast!

Then a little bit of css fiddling

div.jp-seek-bar {

  background: url("1_s.png");

width:730px;

height:100%;

cursor: pointer;

}

div.jp-play-bar {

  background: url("http://1.png");

width:730px;

height:100%;

}

And you end up with something like this. Of course, this is ridiculously large as it's aimed at people with very poor sigh (and needs a fair bit of tweaking as you can see).

So, there you go - excellent bit of code, many thanks Andrew!

[Jonathan2]

Ooops, small typo on the css bit - 

background: url("http://1.png"); 

should be 

background: url("1.png");

of course, I expect you spotted that anyway!

[Andrew Kelley]

Thanks Jonathan! I'm happy that this is what you want.

Also note that you can generate Soundcloud-like waveforms so that the actual waveform is transparent but the background around the waveform is a solid color. That would be something like this:

./waveform --width 730 --height 130 --color-bg 000000ff --color-center 00000000 --color-outer 00000000 1.wav 1.png

[Jonathan2]

Great! Another good thing to know. But now, I'm stuck again, and need a jquery/playlist guru :)

So, my waveforms for each file are the filename minus the extension, +.png and +_s.png for the seek bar image.

So I'd have 

/audio/1.mp3

/audio/1.png

/audio/1_s.png

I can easily get the data into the constructor by just adding another line to the JSON:

waveform:"/audio/1",

which I can easily access via media.waveform. So I know that part seems OK.

Then I thought I could add something to the playlist.js like this addition to, for example, the _createItemHandlers function:

// Create .live() handlers for the playlist items

$(this.cssSelector.playlist + " a." + this.options.playlistOptions.itemClass).die("click").live("click", function() {

var index = $(this).parent().parent().index();

if(self.current !== index) {

self.play(index);

          $('div.jp-seek-bar').css("backgroundImage", "url(" + media.waveform + ".png)"); 

          $('div.jp-play-bar').css("backgroundImage", "url(" + media.waveform + "_s.png)"); 

} else {

$(self.cssSelector.jPlayer).jPlayer("play");

I had a look at the docs at http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/ but I know when I'm beat and just embarrassing myself floundering about out of my depth!

The jquery seems about right as, if I paste this into the console, it changes the images:

$('div.jp-seek-bar').css("backgroundImage", "url(/audio/1_s.png)");

$('div.jp-play-bar').css("backgroundImage", "url(/audio/1.png)");

So if anyone has any ideas about how to actually make this change on the fly when clicking a playlist entry, you'd be helping me over a bit of a hurdle. Thanks!

[Maboa]

Mark P is currently on vacation until Monday - but I'll definitely ping him to get you an answer as it sounds like there is a fair bit of demand for it.

Jonathan2 - from what you wrote it sounds like jPlayer is overwriting any background you set (I'm guessing this since you can change it from the console). You could get around this by creating a custom player or at least the bit that deals with the progress bar. If you can wait until Monday MarkP will be able to give you some more solid advice.

Cheers

Mark B

[Jonathan2]

Thanks Mark;

In fact, I just had to get it done so I kept hacking away at it late into the night until somehow, I struck lucky and got it working!

OK, for you and anyone else interested, in jplayer.playlist.js at around line 376 make this....

this.current = index;

this._highlight(index);

$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);

} else {

   this.current = 0;

... look like this (add the bit in yellow!)

this.current = index;

this._highlight(index);

$('div.jp-seek-bar').css("backgroundImage", "url(" + this.playlist[index].waveform + "_s.png)");

$('div.jp-play-bar').css("backgroundImage", "url(" + this.playlist[index].waveform + ".png)");

$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);

} else {

   this.current = 0;

Obviously, this assumes that you've sensibly named your waveform files as audiofilename.png and audiofilename_s.png and used "waveform" in the constructor.

I probably haven't explained this very well - just wanted to get this up here so both the Mark's knew it was sorted!

Once my current coding headache is over, sometimes over the weekend I'll do a complete writeup and online demo. Hope it'll help someone.

[Maboa]

Finding time to look at this now. We have done something similar here : https://github.com/maboa/Radiolab-Soundcloud-Popcorn.js-Demo

http://hyper-audio.org/r/

Dunno if that's useful. I think we used one graphic and tweaked the css and opacity to display progress.

Cheers

Mark

[Testing by Peter]

Hi All,

Thank you for your support

I tried using below code. 2nd link works fine and it generate in XML as image SVG format. Then I install imagemagick and covert  SVG format to image.

php-waveform-png project on github

php-waveform-svg project on github

[Frank B.]

Thanks Jonathan2!

I assumed this can only be done by modifying the jplayer.playlist.js.
This saved me some hours!

[DasLicht]

Is there meanwhile a solution? PHP would be nice to generate waveforms, or even a linux tool:)