Jump to content

Html5 Audio player with waveform (example inside)


maxwel

Recommended Posts

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 by maxwel
Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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 by maxwel
Link to comment
Share on other sites

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 by maxwel
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by maxwel
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.