We help IT Professionals succeed at work.

Sample music. Not flash anymore

ec2011
ec2011 asked
on
I am developing a web site for a classical pianist, and I need to have a page with play/pause for hearing mp3 samples of the artist performance. Currently the site is built in Flash and the samples are sfw, so in order to play with, let say iPads, I am recoding the site with css and html only.

So what I need is the the coding to replace the swf that plays the requested sample. This should be compatible with main browsers.

Thanks a lot in advance !
Comment
Watch Question

iGottZFrontend Engineer

Commented:
you should check this out then:

http://jplayer.org/

its the best for html5 audio in my opinion.
iGottZFrontend Engineer

Commented:
i should mention that it falls back to flash if the browser does not support html5 audio.
besides that you should forward multiple audio formats because some browsers do not support mp3, IE as example does not support ogg etc.
its all described in its documentation. i hope you have fun with this player. it saves alot of developement time.

Commented:


Hello ec2011,

You need this command to put in your browser:

<embed src="warning.mp3" autostart="true" loop="false" width="360px" height="18px" />

Open in new window


You can change width and height if you want.

I will attach you HTML file for checking if this work on your browsers but you need to choose some demo.mp3 file:

  mp3.html

Commented:


Just one notice. The external MP3 file must have a name warning.mp3.

But you can change a code and file.


regards

Nrisimha

Author

Commented:
Here is a better explanation:
I have ten buttons which links to ten different songs each one in two types: .mp3 and .ogg, for browser issues. These songs are in separate folders(mp3 and ogg).

What I need to do is that each of these buttons play/stop the sample song performed by the artist.

In addition, if a user clicks on one button, the previous song that could be playing, must STOP in order to hear the selected one without overlapping.  with the previous.

I don't want the default controls, but a customized button.

Thanks to all

Commented:

And you want all of that without AUDIO Player in Web browser?
Although, only the AUDIO Player has a buttons !!!

You have to explain that much, much, much better !


regards

N.

Author

Commented:
I send an image of what is current working in a Flash page. The buttons you can see call swf files that contains the music samples to hear (with a green button for play and light green button for stop playing function).
I want to do basically the same, but without Flash, only html css js

THANKS  hope better explanation with the image!
buttons.png
Frontend Engineer
Commented:
you answered like you have not even seen my posting.

srsly. take a look at this:
jplayer.org/latest/developer-guide

you could simply write jquery controls for it in javascript. its all documented there.
reinventing the wheel is stupid if there is already a wheel that has been tested for ages.


or.. do you have problems writing anything like that in javascript? if so i could write you a simple wrapper that does exactly what you want.