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
698 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
Comment Utility
0
 
LVL 3

Expert Comment

by:4runnerfun
Comment Utility
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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
Comment Utility
0
 
LVL 1

Author Comment

by:gabrielPennyback
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 1

Author Comment

by:gabrielPennyback
Comment Utility
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
Comment Utility
<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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks again!

- John
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
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…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
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 …

743 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

17 Experts available now in Live!

Get 1:1 Help Now