yensdesign – Tutorials, Web Design and Coding » Blog Archive » Create an amazing music player using mouse gestures & hotkeys in jQuery

We available for hire! — Need help with a web or mobile project?

Create an amazing music player using mouse gestures & hotkeys in jQuery

December 4th, 2008

What’s up guys? Today I am very proud to announce a BIG & INTERESTING tutorial focused on improve the user’s interaction in your web applications.

We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Because I told you that it’s a big tutorial, this time I will show you a live working example in this video:

But as always, you can test the real demo over here

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

So guys, come with me and jump into the tutorial

There are a lot of online jukebox based on javascript interaction such as plusmusica, but the most of them ignore the power of mouse gestures and hotkeys. We are planning to include these features to plusmusica in the next public beta (It will be great!) but meanwhile we are developing other features we want to show you how to create your own rich music player based on mouse gestures & hotkeys instead of hide it. We want to share with you our knowledge, do you remember?

Let’s go!

Step 1: Fast xHTML layout!

In this tutorial we will make very very easy the xHTML layout and his explanation, we won’t stop so much over here because the interesting part is in the interaction with the interface using jQuery. So excuse me if i don’t spend break some semantic & basic layout rules

We will make use of the “non-footer” method to position the playerbar of the music player at the bottom of the page without scrolls to make it more beautiful.

This tip is very interesting guys, a lot of webpages use that method to get their footer division at the bottom of the page regardless of the height’s content.

So let’s take a look at the layout structure that we will create:

Nothing special, only the mentioned method that have a special part on the css… Here you have the xHTML code:

[code language="html"]



	
	
	
		
	


	
	
	
		
			
				&amp;amp;amp;amp;amp;nbsp;
			
			
				
				
				
			
			&amp;amp;amp;amp;amp;nbsp;
		
	
	
	
	


[code language="css"]
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
	background: #272727;
	line-height:14px;
	font-size: 12px;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	margin:0pt;
	cursor:default;
	overflow: hidden;
}
html,body{
	height:100%;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
a{
	text-decoration: none;
}
/******* GENERAL RESET *******/

/******* CONTAINER *******/
#container{
	background: transparent url(images/instructions.jpg) no-repeat scroll left top;
	margin:0 auto;
	width: 1000px;
	min-height: 100%;
	padding:0;
	position:relative;
	text-align: center;
}
/******* /CONTAINER *******/
/******* BAR *******/
#barContainer{
	background: #006cb7;
	height: 118px;
	color: #fff;
	margin: -119px auto 0;
	position:relative;
	border-top: 1px solid #00c6ff;
}
#bar{
	width: 1000px;
	line-height: 118px;
	margin: 0pt auto;
}
#bar #play{
	float: left;
	width: 100px;
	background: transparent url(images/play.jpg) no-repeat scroll center 22px;
}
#bar #play a{
	display: block;
}
#bar #song{
	width: 800px;
	float: left;
	background: transparent url(images/barBackground.jpg) no-repeat scroll center top;
	text-align: center;
	font-size: 24px;
	margin: 0pt auto;
}
#bar #song #previous{
	float: left;
	background: red;
}
#bar #song span.title{
	margin: 0 15px 0 15px;
}
#bar #song #next{
	float: left;
	background: blue;
}
#bar #volume{
	float: left;
	width: 100px;
	background: transparent url(images/vol3.jpg) no-repeat scroll center 22px;
}
/******* /BAR *******/
[/code]
And now we create an specific CSS file named ie6.css because Microsoft Internet Explorer 6 doesn't suppor the min-height property used at the container division:
[code language="css"]
#container{
	height: 100%;
}
[/code]
That's all guys, I know that the container background-image has a poor layout but as I told you, we must go fast to jump into the interesting part on this tutorial  
Step 2: Explaining what we are looking for
As I told you at the begining of this tutorial, we will create a music player with a rich interaction. These are the actions that the music player will support:

Mouse gestures with Click & Drag

Previous song on click and drag to the left
Next song on click and drag to the right
Increase Volume on click and drag to the top
Decrease Volume on click and drag to the bottom


Mouse click

Play / Pause by clicking Play / Pause button
Previous / Next song by clicking ">>" and "<<" buttons


Hotkeys

Previous song by pressing left directional arrow
Next song by pressing right directional arrow
Increase Volume by pressing up directional arrow
Decrease Volume by pressing down directional arrow
Play / Pause by pressing spacebar



Don't be afraid, there are a lot of things that our music player will do, but the jQuery implementation is easier than you imagine.
We will create in 2 javascript files: a player javascript object that contains the neccesary functions and a file with jQuery to manage all the music player events.
Let's create them!
Step 3: The player.js javascript object
As I told you we will need a javascript object called player to manage all these actions that we have listed before at step 2. So this is the code:
[code language="javascript"]
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle &amp;amp;amp;amp;amp; Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: [email protected]
//@license: Feel free to use it, but keep this credits please!
/***************************/

//This is the class that interact with the interface
var player = new (function(){
	//Simulate a playlist
	this.playList = ["Cold Play - Fix you", "Madonna - Give it 2 me", "Mirror's Edge Theme Song - Still Alive", "Rihanna - Unfaithful with Lyrics"];
	//The song position
	this.position = -1;
	//The current volume
	this.volume = 3;
	//Status: 0:pause, 1:play
	this.status = 1;
	//Jump to the next or first song if the it is in the last position
	this.nextSong = function(){
		if(this.position+1 == this.playList.length)
			this.position = 0;
		else
			this.position++;
		//So, the reference to this class is not lost
		var me = this;
		$(".title").fadeOut(200, function(){
			$(this).text(me.playList[me.position]);
		}).fadeIn();
	}
	//Jump to he previous or last song if it is in the first position
	this.prevSong = function(){
		if(this.position-1 < 0)
			this.position = this.playList.length-1;
		else
			this.position--;

		var me = this;
		$(".title").fadeOut(200, function(){
			$(this).text(me.playList[me.position]);
		}).fadeIn();
	}
	//Increase the volume in one point
	this.volumeInc = function(){
		if(this.volume +1 <= 3){
			this.volume++;
			var me = this;
			$("#volume").fadeOut(200, function(){
				$(this).css("backgroundImage", "url('css/images/vol" +  me.volume + ".jpg')");
			}).fadeIn(200);
		}
	}
	//Decrease the volume in one point
	this.volumeDec = function(){
		if(this.volume -1 > 0){
			this.volume--;
			var me = this;
			$("#volume").fadeOut(200, function(){
				$(this).css("backgroundImage", "url('css/images/vol" +  me.volume + ".jpg')");
			}).fadeIn(200);
		}
	}
	//Toggle play &amp;amp;amp;amp;amp; pause
	this.playPause = function(){
		this.status = !this.status;
		var me = this;
		$("#play").fadeOut(200, function(){
			if(me.status == 0)
				$(this).css("backgroundImage", "url('css/images/pause.jpg')");
			else
				$(this).css("backgroundImage", "url('css/images/play.jpg')");
		}).fadeIn(200);
	}
});
//Starts playing  
player.nextSong();
[/code]
If someone is lost, please read one more time the code and pay attention to the comments from the code and remember that we are creating a javascript object called player!
Step 4: Adding jQuery magic & events
Yes guys! jQuery strikes back! And one more time we will use it to make easier the event's management and to add a little magic to our interface, you know  
Let's take a look at the code for events.js javascript file:
[code language="javascript"]
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle &amp;amp;amp;amp;amp; Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: [email protected]
//@license: Feel free to use it, but keep this credits please!
/***************************/

var captured = false;
var originalPoint = {x:0,y:0};
var newPoint = [];
//Different mouse gesture types
var MoveTypes = { Up: 0, Right: 1, Down: 2, Left: 3 };

var isIE = navigator.appName.toLowerCase().indexOf("explorer") > -1;

document.body.onmousedown = function(e){
	//When user clicks in the page, the click coords are captured
	if(isIE)
		originalPoint = {x: event.clientX, y: event.clientY};
	else
		originalPoint = {x: e.pageX, y: e.pageY};
	captured=true;
};

document.body.onmouseup = function(){
	//The user up the button click, the gesture willo not be captured
	captured=false;
};

document.body.onmousemove = function(e){
	//If user has button click pressed
	if(captured){
		//Click coords are captured and compared with the original coords
		if(isIE)
			newPoint = {x: event.clientX, y: event.clientY};
		else
			newPoint = {x: e.pageX, y: e.pageY};
		//Search for what is the mouse direction
		var diffPoint = {x: newPoint.x - originalPoint.x, y: newPoint.y - originalPoint.y};
		if(diffPoint.x >= 100)
			onMouseCaptured(MoveTypes.Right);
		else if(diffPoint.x <= -100)
			onMouseCaptured(MoveTypes.Left);
		else if(diffPoint.y >= 100)
			onMouseCaptured(MoveTypes.Down);
		else if(diffPoint.y <= -100)
			onMouseCaptured(MoveTypes.Up);
	}
}

//This function is called when an mouse gesture is captured
// moveType is an enumeration of type MoveTypes
function onMouseCaptured(moveType){
	captured = false;
	originalPoint = newPoint = [];
	//call different function for each mouse gesture
	switch(moveType){
		case MoveTypes.Up:
			player.volumeInc();
			break;
		case MoveTypes.Down:
			player.volumeDec();
			break;
		case MoveTypes.Left:
			player.prevSong();
			break;
		case MoveTypes.Right:
			player.nextSong();
			break;
	}
}

//Captures the key press events
document.onkeydown = function(e){
	var ev = isIE?event:e;
	if(ev.charCode &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; ev.charCode == 32)
		player.playPause();
	else{
		switch(ev.keyCode){
			case 32:
				player.playPause();
				break;
			case 39:
				player.nextSong();
				break;
			case 37:
				player.prevSong();
				break;
			case 38:
				player.volumeInc();
				break;
			case 40:
				player.volumeDec();
				break;
		}
	}
}
[/code]
Nothing special except how to detect the mouse gestures on this code, so let me to explain you a little about them:
When the user makes a click on the screen, we have a starting point. Then the user drags the mouse pointer around the screen and finally releases the click, so we got have a ending point.
The pointer moves in X and Y direction, so we only need to do a substraction: (ending point) - (starting point) and detect if the final result is more than 100 or -100 pixels to know what kind of movement did the user (up / down or left / right).


Allright? One more time it's easier than we thought  
Well guys, hotkeys are easier than the mouse gestures, you need to control the onkeydown event and detect wich key was pressed to execute the corresponding action.
Step 5: Testing our awesome music player with mouse gestures and hotkeys!
That's all guys, I hope you enjoy this tutorial as I did when I wrote it  
You can try the tutorial online here to see how It is working and download here all sources.
One more thing guys! As always I advice you that we are sending invitations to our readers to let them try plusmusica.com. If you want to try it, send me and email or just post a comment! See you on next tutorial guys and thanks for your comment, I love to see how feedburner counter is growing each day  
One more thing...
Best 350-018 online preparation by certkiller guarantees you exam success even under timed condition. Just download the 350-029 products and pass your exam on first attempt guaranteed plus practice for E20-001.

Tags: amazing, gestures, hotkeys, javascript, jquery, mouse, music, player, Tutorials
Category: Coding, Tutorials, Web Design

This entry was posted on Thursday, December 4th, 2008 at 6:11 pm and is filed under Coding, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Enjoy this post?

Your vote will help us to grow this website and write more entries like this one :)

We available for hire! — Need help with a web or mobile project?

From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.

If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.

chris. jack

December 5th, 2008

really amazing, thanks for sharing

Adrián Mato Gondelle

Thanks chris

Cohen

December 9th, 2008

Very nice..
I am interested in the private beta?

Yeah of course Cohen, here you have

37 Phenomenal jQuery Plugins and Demos for Developers : Speckyboy - Web Design, Web Development and Graphic Design Resources

December 10th, 2008

[...] Music Player using mouse gestures & hotkeys [...]

Brad

December 11th, 2008

I’ve found gestures to be handy. Had fun with the demo. Would love to get an invite so I can see the beta.

@Brad thanks for posting, here you have your invitation

Links of interest | Ionut Staicu - Webdeveloper Blog

[...] Create an amazing music player with mouse gestures and keyboard control using jQuery [...]

Делаем удобный интерфейс плеера ≈ Чернев.ру

[...] Оригинал статьи(так скачиваем исходники) Эта заметка была создана в Четверг, Декабрь 11, 2008 в 19:13 и находится в категории Css, javascript, Дизайн. Вы можете подписаться на RSS 2.0 канал. А так же оставить комментарий, или трекбек с вашего сайта. [...]

davidcostales blog » Reproductor de música hecho con jQuery

[...] ha escrito un interesante tutorial jQuery (Crear un reproductor de música mediante gestos dle ratón y teclas de acceso rápido) se centró [...]

Criar um incrível Leitor de Músicas com jQuery | Webgrafismo

December 12th, 2008

[...] – Tutorial: http://yensdesign.com Demonstração: http://yensdesign.com/tutorials/musicplayer Licença: [...]

Rod Shields

Perfect! This is exactly what I needed. A little too big but hopefully I can figure it out

jQuery Music Player Using Mouse Gestures & Hotkeys | TechUED blog

[...] has written an interesting jQuery tutorial (Create an music player using mouse gestures and hotkeys) focused on improve the user’s interaction in your web applications. There are a lot of online [...]

Execuro

ok so i get how to create it, but how do i link my music files?
thanks in advance

@Execuro this tutorial covers the interface interaction, you need to use now an opensource flash player and use javascript to send actions to it.

Good luck

H.S.

thanks this is just what i was looking for however how do i get the audio to play?

Ajaxian » Music Player UI

December 17th, 2008

[...] has a nice little example of a music player UI that uses mouse gestures and key handling to give a clean [...]

Todd

Software emulation of iRiver’s “Choat”? Sweet.

http://www.engadget.com/2007/10/10/brando-brings-irivers-s7-choat-dap-to-the-states-at-last/

Hades

December 18th, 2008

excellent!

Javascript News » Blog Archive » Music Player UI

Lecteur multimédia avec jQuery | HQD Software

December 19th, 2008

[...] Tutoriel AJAX, jQuery, jQuery UI, Librairie [...]

Syntactic Sugar » Blog Archive » jQuery Gestures

December 21st, 2008

[...] time I like to take a break and work on a one night project. Today's project was inspired by this article. Although I loved the idea, I found it lacked several things [...]

links for 2008-12-21 « boblog

[...] Create an amazing music player using mouse gestures & hotkeys in jQuery We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse. (tags: music webdesign) [...]

Bogdan Popa

Invite, please?

anyulled

December 22nd, 2008

Excuse me, does this really plays mp3 files? I can get to hear the audio, and I will like to use it for a personal page.

@any Hi! Please red the comments above and you will find the answer

ruqqq

December 23rd, 2008

Great. Nicely done. But in my opinion, there’s a little flaw in the design.

Gestures are nice, really. Makes your life easier. But for certain things, gestures might be overused. Taking it into the context of this example, I would say that the use of gestures ONLY for the volume control is overkill.

Situation:
Someone is making noise at me. I NEED to listen.
Problem:
Where’s the mute button? Or better, I don’t want to stop my music. Can I just adjust the volume to immediately be 1%?

The other problem I find with the current implementation is that: 1 swipe, 1 level. It’ll work better if it’s implemented in a way that you can use the mouse like a knob: Click, drag the mouse down slowly, volume changes along accordingly; Done without many swipes.

The last problem, there’s no ‘click & change volume’ implementation. I see that for the rest of the controls, we can just click and perform their corresponding functions. But for volume control, there’s nothing. I personally believe in treating the user as idiots. Hence, I would design something that is easy to use (which in this case does fulfill), pragmatic and standardize. So in this scenario, if we can click for other controls, why can’t we click on volume?

Well, these are just MY opinions. It might be ignorable. Furthermore, I would say that the current implementation is already quite good. It’s clean and pretty to use. Good job on that.

@ruqqq Thanks for posting your opinion great comment!

This example is just a prototype to lear how to control mouse gestures. In a real case it’s would be harder to think about the final solution for all those problems that you have commented and others.

Nathan

December 24th, 2008

Hey, This is great. Thanks for posting this!

Would love to get an invite so I can see the beta.

Thanks

37 Fenomenales jQuery Plugins y Demos para Desarrolladores | ProyectoAurora.com

December 25th, 2008

dr.emi

December 28th, 2008

Very Amazing and interactive resource and sample, downloaded !!! THANKS

Натан

January 5th, 2009

Очень вам признателен, на самом деле полезная инфа.

jQuery Music Player - Tutorial for creating a music player with jQuery | Greepit.com - A Handsome Design Blog

[...] this feature, we can change with just a song click and move the mouse, so to increase the volume. View Tutorial Share this post: Share this post with the [...]

David Mulder

January 10th, 2009

I have been searching for several hours for simple mouse gestures for my open source project blogora, after I failed myself, this is seriously incredible. In a second I plan to watch through the whole archive of this blog, hoping there will be anything as inspiring as this. Thanks very very much.

PS. If plusmusica is as elegant as this tutorial, then I would love to have a invitation, merely to check out the code and any other new features you (plural?) have thought of.

Fred

Hey, love the idea…
Can I get an invite on plusmusica please. Thank you!

@Mulder & @Fred Thank you so much! Here you have your plusmusica invitation

In this private beta we don’t have implemented yet the mouse gestures because we research another kind of menu, you will see that it’s very interesting too

Thanks for your comments! I love to see people enjoying tutorials on yensdesign

January 15th, 2009

I would love an invite, thanks.

@TJ Yeah of course! Can you send me your e-mail?

ArticleSave :: Uncategorized :: 45+ New jQuery Techniques For Good User Experience

January 16th, 2009

[...] 47. Amazing Music Player Using Mouse Gestures and HotkeysLearn how to create an amazing music player, coded in XHTML and jQuery, that makes use of mouse gestures and hotkeys. You can click and drag the mouse to interact with the music player’s interface or use directional keys and the space bar instead of the mouse. [...]

Mike Ridelmann

Great tutorial. I’ve been a Prototyper for a while now since I do rails dev. But I’m getting won over by JQuery as the days go by.

Can I get an invitation to the plusmusica beta also?

Cheers!!

@Mike Haha Welcome! I was lucky, 1 year ago meet jQuery and the javascript world… so I didn’t need to change to other library

By the way, I have sent you an invitation to try plususica.com!

Muchas Gracias Adrian!

45+ New jQuery Techniques For Good User Experience | How2Pc

Tim

I cannot get the demo page to play any sound. I don’t have Quicktime or Windows Media player plugins in my web browser. Does this rely on them?

@Tim Sorry for the inconvenience but it’s only an example of the interface, using mouse gestures, not a music player.

For a music player you have plusmusica.com, I have sent you an invitation already

tj.taylor [at] gmail.com Thanks for the invite.

Cerium

January 17th, 2009

Nice tutorial, simple to understand & really powerful, congrats !

PS : Can I get an invitation to plusmusica.com, please ?

@Cerium Thanks for your interest! Here you have

I cann’t wait the release of the new public beta of plusmusica to let all register in… arg!

Alex

January 18th, 2009

Thanks for that – great stuff!

45+ New jQuery Techniques For Good User Experience « DesignDevoted

simon

Hey guys.. Amazing Player! The Interface is really that simple its awsome.

I would greatly appreciate it, if you could send me an inivitation to plusmusica!

@simon Thank you so much! Here you have your invitation

New jQuery Techniques For Good User Experience : from smashingmagazine.com « Arunbluebrain’s Flex

January 19th, 2009

Thanks a lot, AdrianMG!

Steve

Love this idea. Would appreciate an invite Adrian. Thanks.

@simon You are welcome! Enjoy it please!

@Steve Thanks for the interest, here you have your invitation

VaiT

Great idea and very well implemented.

Please can i have an invitation to Playmusica?

Matthew Wilcoxson

January 20th, 2009

Ever come across the music player “Songbird” ? It allows control to be triggered from a webpage. I think it would work really well with your code. (Have a look at http://wiki.songbirdnest.com/Developer/Developer_Intro/Webpage_API if you are interested)

@Matthew Thanks for posting! Didn’t know about this API, thanks for sharing!

Ey guys, here you have the music part: http://yensdesign.com/2009/01/playing-and-controlling-mp3-songs-and-flv-videos-with-javascript/

45+ New jQuery Techniques For Good User Experience | The Blog Specialist

January 21st, 2009

45+ New jQuery Techniques For Good User Experience | SuperBlog

January 22nd, 2009

jQuery Music Player - Tutorial para crear un reproductor de música con jQuery at Blog Borchani Studios

January 23rd, 2009

[...] Sitio: yensdesign.com [...]

вopcepдeчки

January 27th, 2009

Автору памятник нужно поставить за такое!:)

Legend of Arimanthias Script Buster

January 29th, 2009

have been looking for a way to get this links and page containing such a vital info about scripting
anyways thanks pal for your understanding…
Big ups

Free Ajax Scripts » Blog Archive » JQuery Music Player

[...] Info and Download : Download JQuery Music Player [...]

netbull

February 3rd, 2009

Hi, i`m searching for cool player for my site. I`m currently using a flash player with dynamic xml playlist. Can this player be integrated ?

@netbull Thanks for posting! Here you have: http://yensdesign.com/2009/01/playing-and-controlling-mp3-songs-and-flv-videos-with-javascript/

@Adrián Hi and thank you for the replay. I`m looking for something more advanced.. like player in this tutorial but with ability to add/remove songs in playlist (just a button), progress bar, playlist (several song), buttons…

I found good way to do that is possible whit Flex, but this is something new for me and is little bit complicated.

I don`t want to give me the source code, just guide me to tutorial or something like that (of you want of course.

Example: like imeem.com player.

Regards,
NetBull.

@netbull Ok… so you will need to know more about javascript… For example, you can create an array of songs to manage lists and their songs and so on.

It’s more complex than expected, sure

yes, but I need to be dynamic because my site is like plusmusica.com (search engine) and I have module for playlists and users can search for songs and add them theyr playlists, so I need this player to read dynamic generated xml :/

I`m such a noob

My Little List of jQuery Tips, Tricks and Resources | Moral Fibre

February 5th, 2009

[...] Create a amazing Music Player using Mouse Gestures Hotkeys in jQuery [...]

legend

how do i get the music to play on my website; wat am looking at is the playlists does it mean i have to create one myself?

100 Best JavaScript Resources | Spoonfed Design

February 9th, 2009

[...] Music Player Using Mouse Gestures and Hotkeys [...]

The Clown

February 20th, 2009

Hey Yen,

I signed up for your site twice but it gave me an incorrect error for password failure? Anyways, can’t I just play my own mp3′s on my server with this great plug-in? Thanks!

Chaimi

March 3rd, 2009

Опутеть как интересно, во задвигаете. Класс!

Ronald Holland

March 6th, 2009

Spell-Check power!

Roguens Loriston

March 13th, 2009

This is cool. I plan to implement it on my website. Great tutorial.

Bruno

March 31st, 2009

Good Show. One nag, though.

The Volume controls:
Rather then fading out and then into the new state, the icons should fade into one another, so that the visual behaviour of changing the volume doesn’t look so erratic.

mike

April 3rd, 2009

Hi, I came across your page while searching the net for an answer to my problem, I am searching for a way to assign hotkeys to my music player, would you be able to help please? Thanks.

Monster-Design

April 15th, 2009

Hi there good stuff i like this script, but i have a question!
will i be able to use this player as a Radio Player on Websites?

Yes if you build a script to manage a list of songs. But it will be a “static” radio, not a “dynamic” radio.

Goanty

April 25th, 2009

Классная статья, кстати автору хочу предложить установить от яндекс.денег фишку на сайт “Дай рубль”. Я бы дал, так сказать на поддержание.

emoruffino

April 29th, 2009

if you can get this to work with iradeo…

i would love to feature this on my radio stations website.

Internetagentur

Thank you, this has me very helped.

12 Outstanding JQuery Resources & Tutorials | Free Tutorial 4 All

May 13th, 2009

[...] time I like to take a break and work on a one night project. Today’s project was enthused by this article. Although I loved the idea, I establish it lacked several things [...]

Create an amazing music player using mouse gestures & hotkeys in jQuery - Tutorial Collection

June 8th, 2009

[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 4:12 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

» Top10 Simplest jQuery Tutorials WebAir Blog

June 22nd, 2009

[...] Amazing Music Player Using Mouse Gestures and Hotkeys [...]

53 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection | 1stwebdesigner - Love In Design

June 28th, 2009

[...] 24.Create an amazing music player using mouse gestures & hotkeys in jQuery: Screencast [...]

Best Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection | guidesigner.net

June 30th, 2009

Ramani Sandeep

July 9th, 2009

really great work…

i have one question ..how to add mp3 files in players.js file. or which place i hv to put the mp3 files that i can play ..

45+ New jQuery Techniques For Good User Experience « Ramesh

15 Awesome tutorials and resources for web developers - Talk about Deal – Blog

July 21st, 2009

[...] Music Player with mouse gesturesThis tutorial illustrates how to implement an amazing music player using mouse gestures & hotkeys in jQuery. [...]

Shawn

July 24th, 2009

however i know this is the player interface
but how to include my music file inside?
can i have a clearly guideline

jonny

July 26th, 2009

Thanks for the script I ove the interface, i wish i can hire you to programe my site regards

jQuery Music Player Using Mouse Gestures & Hotkeys « Xpertspot Systems

July 27th, 2009

[...] http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/ [...]

100个最佳的JavaScript资源(81~100) - Hobo

August 12th, 2009

[...] jQueryjQuery匹配栏目高度Scrollable图片和信息滚动效果JcropJQuery截取图片插件Music Player Using Mouse Gestures and Hotkeys用鼠标或者快捷键来控制音乐的播放Moo [...]

Zipsites Official Blog - Useful Web Resources for PHP Developers

August 13th, 2009

rh van den heuvel

August 20th, 2009

i’ve failed when i made everything
and i opend the html file i see
only codes from part 1
somebody help me?

50 Useful New jQuery Techniques and Tutorials « Tech7.Net

August 24th, 2009

[...] Create an amazing music player using mouse gestures & hotkeys in jQueryWe will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse. [...]

XtraMile, Inc. » 30 Useful jQuery Techniques

AMB Album » 50 Useful New jQuery Techniques and Tutorials

August 25th, 2009

50 Useful New jQuery Techniques and Tutorials - Programming Blog

50 Useful New jQuery Techniques and Tutorials | huibit05.com

50 Useful New jQuery Techniques and Tutorials « Kata learns to code

August 26th, 2009

七平米 » 50个有用的jQuery应用技术和指导

[...] 24.使用jQuery的鼠标和热键创建一个播放器 [...]

50 Useful New jQuery Techniques and Tutorials « William Rodriguez Portfolio

Script jQuery hữu dụng « “Ngoc Design”

August 28th, 2009