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
701 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ust html in ms/access WebBrowswer 11 63
Bootstrap more than 12 columns in row 3 36
HTML Relative path 9 29
bootstrap footer centering and expand problems 7 17
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

930 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now