?
Solved

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

Posted on 2011-03-14
16
Medium Priority
?
718 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:gabrielPennyback
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 2
  • +2
16 Comments
 
LVL 3

Expert Comment

by:4runnerfun
ID: 35130354
0
 
LVL 14

Expert Comment

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

http://mediaelementjs.com/
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 19

Expert Comment

by:quizengine
ID: 35130958
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 35139232
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
 
LVL 17

Expert Comment

by:nanharbison
ID: 35150696
And remember that if your viewers are on an iPhone or Droid, they won't be able to view a flash file!
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 2000 total points
ID: 35150815
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
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 35183445
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
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 35224440
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35224550
<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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35224570
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35224572
DOOOOOHHHH!  stupid stupid stupid!!!

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

Open in new window

0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 35241855
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
 
LVL 14

Assisted Solution

by:Designbyonyx
Designbyonyx earned 2000 total points
ID: 35242192
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
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 35281561
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
 
LVL 1

Author Closing Comment

by:gabrielPennyback
ID: 35281573
Thanks again!

- John
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question