I have a site (http://www.chu-bops.com) It shows 9 series. Each series has a set of artists and titles. The images are loaded dynamically.
I would like to be able to click on an image of an album and play an mp3 file associated with the image. The <embed> tag doesnt need to show a playlist, in fact, I want the player to be hidden.
Can anyone provide sample code of a click event to play mp3?
Thanks
Firefox 3.5 supports the <audio> tag for OGG files (and WAV), if you’re interested in converting them to that format. It is extremely simple to use. You can hide it via CSS and control it via the DOM (it has play() and stop() methods).
For browsers that don’t support <audio> or if you need to use MP3, you could embed a very simple Flash player (such as this one), which you could also control via separate links. If the Flash plugin isn’t installed, then I would just offer the MP3 for download, for the user to play in the media player of their choice.
One piece of advice: don’t play the music automatically! Let the user choose if and when to play it.
I have tried several of these programs and the problem is that they dont intergrate well into a MVC environment or an organized file structure. I tried the sample file first to make sure that it works. I then split the files up into organized folders (i.e. js - javascript files, css - css files, music - mp3 files, inc swf - fla, swf. In this structure the player will not work after I change the paths to the location of the files. If it cant accomodate this then the program was poorly written. I have worked many years within the MVC environment and I will not have a messy file structure.
Any other suggestions? Code snippets? Or is it just that it wont play music?
There’s no reason a particular file structure should cause the player to suddenly stop working. I tried it out. The path to the file has to be relative to the location of the SWF.
The HTML file and MP3 file are in the “dump” folder. It has a sibling folder called “barney”, which is where the SWF file is. Therefore, the URI in the OBJECT and EMBED tags is: …/barney/niftyplayer.swf?file=…/dump/siboney.mp3
My apologies for sounding so anal. Actually I did get it to work (I think) . Im at work but I took a few moments of free time to really take a look. I cant verify it without speakers but the player comes up and seems to be playing. I have to check to see that it can play different files based on the artist I click on. Let you know later this evening. Your suggestion of not autoplaying has been taken. It seems to work on IE6, IE7, Firefox 3.53 and Safari 3.3.2.
Very nice, raffles. 
NiftyPlayer seems to work with one exception; IE6. Lots of people are still using that version of browser (just like people are still smoking cigarettes).
Damn Microsoft for producing that product!
Any, is there anyway I can do to it to work with ALL browsers?
IE6 should not be a problem, as long as it can embed flash content, then it should be work, as the MP3 player capabilities lie with the flash plugin.
Perhaps it’s to do with the way you’re embedding it. What exactly doesn’t work in IE6?
I have the autostart disabled. In IE6 the player doesnt show. It displays a blank rectangle.
Dont start telling me to do things on my local computer. There are other people that are using the same browser and they see the same thing. I cant have users doing things to their computer just to see something on my site.
Just want to get that straight from the start.
Works for me in IE6. Just tested that page in IE6 and the song plays, with autostart disabled. Check that you’ve got all the parameters right, that it’s “twice cooked” (i.e. that the parameters are correct for the OBJECT and EMBED elements) and that your page isn’t in quirks mode.
A link would help with solving your problem as “it doesn’t work” is not a lot to work on, but I don’t want to start telling you to “do things”.
When I say it doesnt work, I mean based on the description I explained previously. The page loads and the place on the page that the player is supposed to be just displays and blank rectangle.
ref: http://www.chu-bops.com click on Pat Benetar.
Im at work now and we have IE7 so I’ll let you know when I get home. I have IE6 there.
Thanks
I see nothing on the page relating to Pat Benatar (which you haven’t spelled correctly) on the link you provided. On this page there is, but it’s clicking Abba that brings up the player, not Pat Benatar. Anyway, it isn’t working in IE6 for me either, all I see is the white rectangle. Right-clicking it, the context menu says “Movie not loaded”. Apparently this is a problem other people have had. Solution:
- SWF filename must not contain spaces
These steps got IE6 working when before it said “movie not loaded” when you right-clicked the Flash area.
Also try adding this attribute to your OBJECT tag:
data="inc/niftyplayer.swf"
(source)
By the way, you really should remove the two <!–Written by Buck Powell –> comments from the top of the page, as they are putting IE6 into Quirks Mode. Besides, you have those comments elsewhere anyway. You must not have anything at all before the DOCTYPE in order to trigger Standards Mode in IE6.
Maybe it’s a quirks mode problem, but it’s more likely that the OBJECT tag is messing things up. I think using SWFObject is your best option, it’s the “accepted” and most trusted way to insert Flash content into a page. Since you’re using JavaScript anyway, it should be pretty easy to do.
The only problem I see with your link is that its just a plain page. Its not a full-blown website.
To be specific…I cant get the same results if I download the page, put it in my localhost directory and try to run it. All I get is "Nifty player should appear below:. Thats it.
That shouldn’t matter. Well, if you run it from your localhost directory, do you also have the SWF and MP3 files in there, with the correct file references in the OBJECT and EMBED tags?
Seriously, I would use SWFObject. It is painless and robust.
Ok, I started from scratch…
I started with the base files and put it all back together. When I put everything back, the problem I discovered was that the css on my highslide was making it not show. (display:none)
When the page loads, it shows the pictures. When you click a picture, it displays a larger pic with details. Ive got to figure out how to get around that, since it doenst happen in IE7, Firefox or Safari.