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
703 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
  • 6
  • 6
  • 2
  • +2
16 Comments
 
LVL 3

Expert Comment

by:4runnerfun
ID: 35130354
0
 
LVL 3

Expert Comment

by:4runnerfun
ID: 35130361
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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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 500 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 500 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

808 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