Html5 Audio player with waveform (example inside)

[maxwel]

trying to find some good Html5 Audio player with waveform that can be good as this example

 

http://virtualdjradio.com/djsets/djset.php?mixid=11578-1

 

 

does the example above use specific source code that known? or an api?

 

i need even a begging code to begin with zz. i am so bad at javascript and still new in html5 but any support should help in supporting me and learn at the same time.

 

Thanks in advance

 

Maxwel

Edited June 18, 2013 by maxwel

[requinix]

It's actually just a couple overlapping divs: one has the waveform as an image and the other provides the blue highlighting.

 

After some quick searching I found these:

* Extract Wavelength from MP3 as an Image

* Optimizing the PHP MP3 waveform generator (followup to Generating MP3 waveforms with PHP)

* Reading 16 bit wav file

The file gets converted from MP3 to WAV so actually it would work on any audio file format - if you can convert it, which may mean you need one or more programs to support it (eg, ffmpeg and lame).

[maxwel]

you are the best really and you always help thanks alot actually do u mind being my supporter/helper until i am done with this project? i wish u dont mind

 

here is a script of a html5 audio that go canvas but the problem is that it work correctly when i let it play alone but when i jump with the head (line that indicate current point) it messes up the time and the line reach the end of the canvas before the song itself ends.

 

here is the code

var c = document.getElementById('canvas');

c.onclick = jump;

var x = c.getContext('2d');
var a = document.getElementById('audio');
  
 
var isPlaying = false;

a.load();

window.setInterval(draw, 100);

/*
x.fillStyle = "rgba(200,0,0,0.5)";
x.fillRect(0,0,820,140);
*/

function draw()
{
	x.clearRect(0,0,820,140);
	
	// play head
	
	x.strokeStyle = "rgba(0,0,0,0.8)";
	x.beginPath();
	x.moveTo(pos(a.currentTime), 0);
	x.lineTo(pos(a.currentTime), 129);
	x.closePath();
	x.stroke();	
	
	
	setTime();

	
	// buffer head
	
	x.fillStyle = "rgba(0,0,0,0.2)";
	x.fillRect(0,129,pos(a.seekable.end(0)),140);
		

}

function setTime()
{
	var text = Math.floor(a.currentTime / 60);
	text = text + ":";
	var seconds = Math.floor(a.currentTime % 60);
	if(seconds < 10)
	{
		text = text + "0";
	}
	text = text + seconds;
	document.getElementById("time").innerHTML = text;
}

function jump(e)
{

     var x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
     
     x = x - 20;
     
     var pos = (x/820) * a.duration;
     
     if(pos < a.seekable.end(0))
     {
     	a.currentTime = pos;
     }
}

function pos(time)
{
	return Math.round((time / a.duration) * c.width);
}




var duration;
 
window.onload = function getDuration() {
	audio = document.getElementById("audio");
	audio.addEventListener("loadedmetadata", function(_event) {
		duration = audio.duration;
	




		var text1 = Math.floor(duration  / 60);
	text1 = text1 + ":";
	var seconds1 = Math.floor(duration % 60);
	if(seconds1 < 10)
	{
		text1 = text1 + "0";
	}

	text1 = text1 + seconds1;
	document.getElementById("totaltime").innerHTML = text1;
	


		});

}

also i got another problem which is totaltime (duration) of the song, it sometimes load correctly and another it gives 0:00 (especially if the song is loaded for the first time but still it does that also if song did loaded before) any idea?

 

i guess i found my starting point of this project just need help/support to make it and at same time to learn more about html5 and js

 

Thanks,

Maxwel

Edited June 18, 2013 by maxwel

[requinix]

There are a number of events related to playback. timeupdate looks particularly promising.

[maxwel]

still donno why when i jump through the song the time indicator dont end the song at the correct time.... but when i play without jumping it end at the right time?!

Edited June 19, 2013 by maxwel

[maxwel]

help is needed so bad

[requinix]

What is the code you have now that uses the timeupdate event?

[maxwel]

this is the whole js code which do everything in the html5 audio player. i don\t get what u mean by timeupdate event

 

i am 0 at javascript but insisting to know more and to do that player while learning

 

and here is the player i use : http://mbrservices.no-ip.org/Player1.html

var c = document.getElementById('canvas');


c.onclick = jump;


var x = c.getContext('2d');
var a = document.getElementById('audio');
  


var isPlaying = false;


a.load();


window.setInterval(draw, 100);


/*
x.fillStyle = "rgba(200,0,0,0.5)";
x.fillRect(0,0,820,140);
*/


function draw()
{
x.clearRect(0,0,820,140);


// play head


x.strokeStyle = "rgba(0,0,0,0.8)";
x.beginPath();
x.moveTo(pos(a.currentTime), 0);
x.lineTo(pos(a.currentTime), 129);
x.closePath();
x.stroke(); 




setTime();




// buffer head


x.fillStyle = "rgba(0,0,0,0.2)";
x.fillRect(0,129,pos(a.seekable.end(0)),140);




}


function setTime()
{
var text = Math.floor(a.currentTime / 60);
text = text + ":";
var seconds = Math.floor(a.currentTime % 60);
if(seconds < 10)
{
text = text + "0";
}
text = text + seconds;
document.getElementById("time").innerHTML = text;
}


function jump(e)
{


     var x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
     
     x = x - 20;
     
     var pos = (x/820) * a.duration;
     
     if(pos < a.seekable.end(0))
     {
      a.currentTime = pos;
     }
}


function pos(time)
{
return Math.round((time / a.duration) * c.width);


}








var duration;


window.onload = function getDuration() {
audio = document.getElementById("audio");
audio.addEventListener("loadedmetadata", function(_event) {
duration = audio.duration;










var text1 = Math.floor(duration  / 60);
text1 = text1 + ":";
var seconds1 = Math.floor(duration % 60);
if(seconds1 < 10)
{
text1 = text1 + "0";
}


text1 = text1 + seconds1;
document.getElementById("totaltime").innerHTML = text1;






});


}














function audioPlayPause()
{
if(isPlaying)
{
isPlaying = false;
a.pause();
document.getElementById('pp').innerHTML = "Play";
}
else
{
isPlaying = true;
a.play();
document.getElementById('pp').innerHTML = "Pause";
}
}




function audioStop()
{
if(isPlaying)
{
audioPlayPause();
}


a.currentTime = 0;
}

i think its gonna be tough task but i want to do it

Edited June 19, 2013 by maxwel

[requinix]

It's working for me... No matter what I do it always ends at 1:21.

 

Your code is using the loadedmetadata event to get the length of the audio. (Trying: it doesn't seem to show correctly on the page.) I was saying you can also use the timeupdate event to follow along with the player as it goes, rather than repeatedly draw()ing and checking the currentTime.

[maxwel]

yea with current mp3 it does work well but with other it doesn't (especially with bigger files) let me show u i changed the mp3 file with bigger one please revisit : http://mbrservices.n...rg/Player1.html

 

And take a look at how it mess up after jumping xD and i would like to know more about how to use timeupdate event with the code.

 

Thanks alot,

Maxwel

[requinix]

Still works for me.

 

For timeupdate I'm talking about

a.addEventListener("timeupdate", function() {
	// update label and slider according to a.currentTime
});

[maxwel]

the play head (time indicator) ends at the 4:18 and the current time reaches 4:18as well but the song at that time didnt end yet. its still playing (that happen only when u jump through time line) but it doesn't happen when u leave it play all song alone without distraction, any help?

[requinix]

Ah, I see. Hear, even. I wasn't actually listening to the audio so I couldn't see anything happening.

 

What browser are you testing in? I think there's a bug with Chrome: I can consistently make the audio control think it's 14 or 21 seconds off (depending what I do), and seeking works fine my IE.

[maxwel]

i use chrome :S, but is there any way to bypass that problem with chrome?

 

Thanks

[requinix]

I haven't found a way yet. I'm basically just Googling around for inspiration.

[maxwel]

Thanks for the regular help by the way i got 3 questions if u dont mind answer me them  oh by the way i found that the player works 100% great with safari as well, you can try it as well .

 

First is what language is this script? and how to install/ use it with php?

http://rg42.org/wiki/sndfile-waveform

 

What about this? isnt that c++? how to compile/install/use it with php?

https://github.com/cappelnord/waveformgen

 

Last is this, how to use this player, where it's source?

 http://jplayer.org/

 

Sorry for asking much but i am not that good with js as stated before and wanted to know about other 2 waveform generators cuz they seems give better results than one i use at the moment.

 

Thanks very very much for all your help,

Maxwel

Edited June 20, 2013 by maxwel

[requinix]

First is what language is this script? and how to install/ use it with php?

http://rg42.org/wiki/sndfile-waveform

That's a regular program written in C - not a "script". Check if it mentions any libraries it needs to run, and if not you can probably just compile it yourself for your machine.

 

What about this? isnt that c++? how to compile/install/use it with php?

https://github.com/cappelnord/waveformgen

Also a program, also written in C.

 

Last is this, how to use this player, where it's source?

 http://jplayer.org/

jPlayer is a jQuery plugin. Take a look at its quick start guide.

[maxwel]

thanks for the info so much appreciated

 

Any success in knowing why google chrome does that with my player?

 

Thanks in advance,

Maxwel

[maxwel]

any luck in knowing the problem that cause chrome to do that?!

[maxwel]

hello

[maxwel]

Any solution yet?

Edited June 24, 2013 by maxwel

[requinix]

No. How's your search gone?

[maxwel]

been searching heavily but none :/ idk is it me only who facing such prob?! LS btw i want to learn more javascript and jquery especially through the net is there a good and free/cheap way for doing  that? also i got a problem with jplayer thingy u mind  posting it up here in that thread?

 

Thanks for all ur help and support,

Maxwel

[maxwel]

anything new there? still stuck with that player  and google chrome bug,, did ya find anything yet about it?

 

Thanks,

Lion

[maxwel]

bump