Need free mp3 music player with play, pause, stop and volume controls and progress bar -OR- a flash music player component

I've been looking for a super simple html script (with js if necessary) to play single mp3's. I have a very simple one but all it has is play and stop. Is it possible to find either:

- an html script that gives me play, pause, stop and volume controls. A progress bar would be very nice as well.. OR
- flash player that comes with the source .FLA file?

Or is there a flash component like the FLV player for playing mp3's?

Thanks!

John
LVL 1
gabrielPennybackReliability Business Tools Analyst IIAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
DesignbyonyxConnect With a Mentor Commented:
If you want to target the widest amount of people, you have to use HTML5 with flash fallbacks.. again:

http://mediaelementjs.com/

This allows you to deliver audio and video to different devices and browsers using the same look and feel across all of those mediums.  I have done a whole lot of research in the past 2 weeks for a big project I am working on for a video company... and Media Element is the best option for reaching the widest audience while maintaining a custom and consistent look and feel.  Look here for supported browsers and devices.
0
 
4runnerfunCommented:
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
DesignbyonyxCommented:
How about HTML5 for those who are capable, and a Flash/Silverlight fallback ... all using the same skin:

http://mediaelementjs.com/
0
 
quizengineCommented:
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thanks guys (that includes women too). I still haven't had time to try any of this out yet, but i will as soon as I can.

- John
0
 
nanharbisonCommented:
And remember that if your viewers are on an iPhone or Droid, they won't be able to view a flash file!
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Between my day job and my family I haven't been able to try any of this out yet. Those of you with both will probably understand why. :-)  But I'm hoping I'll get to it sometime soon. Thanks for your patirnce.

- John
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Hi, Designbyonyx, thanks for the link. I got as far as I could with the mediaelements player and it looks pretty slick. There are a couple of things I would like to do but there are so many files I don't know where to begin.

1) I need to set the default to play when the page loads.
2) I need to be able to adjust the width of the player easily.
3) I need to be able to customize the colors of the player, especially the background gradient of the timeline when you press play.

I'm guessing that a lot of the files that come with it are unnecessary for a simple one song audio player. If you can help me with the three items above that would be awesome.

Thanks,
John
0
 
DesignbyonyxCommented:
<audio src="some-file.mp3" id="myPlayer" />

1) Call the play() method:
$('#myPlayer').mediaelement({
  success: function(mediaElement, domElement) {
    mediaElement.play();
  }
});

Open in new window


2) You should be able to style the "audio" tag however you want, and mediaelement will replace it with the proper player:

/* CSS */
#myPlayer {
  width: 400px;
}

// OR, when you set up the player

/* Javascript */
$('#myPlayer').mediaelement({
  audioWidth: 400,
  audioHeight: 30,
  success: function(mediaElement, domElement) {
    mediaElement.play();
  }
});

Open in new window


3) You can edit the CSS sprite.  I'll let you figure that one out.  Just look for an image that has all the controls on there... open with photoshop and edit things as you need.

NOTE: You must REPLACE elements in the sprite without changing the size of anything
0
 
DesignbyonyxCommented:
DOH!

Excuse my type-o... I was calling "mediaelement" when it's really "mediaelementplayer":

$('#myPlayer').mediaelement({
  audioWidth: 400,
  audioHeight: 30,
  success: function(mediaElement, domElement) {
    mediaElement.play();
  }
});

Open in new window

0
 
DesignbyonyxCommented:
DOOOOOHHHH!  stupid stupid stupid!!!

$('#myPlayer').mediaelementplayer({
  audioWidth: 400,
  audioHeight: 30,
  success: function(mediaElement, domElement) {
    mediaElement.play();
  }
});

Open in new window

0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thanks, this is great information. Now please forgive my stupidity. I'm fine with css but but where do I place your codes? Which document?

$('#myPlayer').mediaelement({
  success: function(mediaElement, domElement) {
    mediaElement.play();
  }
});

AND

$('#myPlayer').mediaelement({
  audioWidth: 400,
  audioHeight: 30,
  success: function(mediaElement, domElement) {
    mediaElement.play();
  }
});

Thanks,
John

MY CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery.js"></script>	
	<script src="mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="mediaelementplayer.min.css" />

<title>Rivers of Gold</title>
<style type="text/css">
<!--
body {background:#000000 url(GoldenGlass.jpg) no-repeat; margin:0px}
#container{width:1080: margin:0 auto}
#img1{width: 450px; margin:0 auto}
-->
</style>
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="container">

<div id="img1">
<img src="../demo/RiversOfGold.png" />
</div>
 
<div align="center">
<audio id="player2" src="../media/RiversOfGold.mp3" type="audio/mp3" controls="controls">		
<script>
$('audio,video').mediaelementplayer();
</script>
</div>  
</div>
</body>
</html>

Open in new window

0
 
DesignbyonyxConnect With a Mentor Commented:
So you see this line in your code:

$('audio,video').mediaelementplayer();

Open in new window


You can change it to this:

$('#player2').mediaelementplayer({
  audioWidth: 400,
  audioHeight: 30,
  success: function(mediaElement, domElement) {
    mediaElement.play();
  }
});

Open in new window


And I feel it's my duty to say this.  Unless this is a personal website or a site which you don't expect to get much traffic... don't automatically play audio when the page loads.  You should never force a visitor to listen to something.  If you really want them to listen to the audio, then you need to build the page with the audio player as the center piece of the page.

I personally listen to music when I am on the web... and when a site automatically plays music without me doing anything... well that really pisses me (and a lof of other people) off.
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thank you for being so patient, I really appreciate it. And yes this is a private website, although now you have me thinking that maybe this isn't such a good idea since i want people to hear the whole song from the beginning I guess.
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thanks again!

- John
0
All Courses

From novice to tech pro — start learning today.