views:

313

answers:

1

Hi all,

I want to produce a simple, static HTML file, that has one or more embedded MP3 files in it. The idea is to have a simple mean of listening to specific parts of an mp3 file.

On a single click on a visual element, the sound should start to play; However, not from the beginning of the file, but from a specified starting point in that file (and play to the end of the file). This should work all locally from the client's local filesystem, the HTML file and the MP3 files do not reside on a webserver.

So, how to play the MP3 audio from a specific starting point? The solution I am looking for should be as simple as possible, while working on most browsers, including IE, Firefox and Safari.

Note: I know the <embed> tag as described here, but this seems not to work with my target browsers. Also I have read about jPlayer and other Java-Script-based players, but since I have never coded some JavaScript, I would prefer a HTML-only solution, if possible.

+2  A: 

I'm sorry but I don't think it is possible to skip to a specific position in a track without any form of client-side scripting. It is possible to just play a track without client-side scripting using a link with its target pointing to an iframe on your page.

Eg.

<a href="audioembedded.html" target="myplayer">Play audio</a>
<iframe src="nothingplayingnow.html" name="myplayer"></iframe>

If you'd like to embed the audio file itself into the html document, I think the closest you'd get would be to use the data URI scheme. All the pros and cons are explained nicely in that article.

But all of this is of course possible if you use a bit of client-side scripting. This flash MP3-player lets you skip to certain positions via a javascript interface. The site also has a generator which lets you make your own player interface very easily.

Sorry, but I think you'll have to use at least some javascript to achieve what you're attempting.

mqchen
Thanks for this detailed answer. Due to my limited knowledge I did not bring it to work right now. Would it be possible to set an initial position right in the <object> tag, like so?:<param name="FlashVars" value="mp3=/medias/another_world.mp3 position=40.1" />
Marcel
I don't think that's possible unfortunately. But if you add an ID attribute to your object (eg. `<object id="myflash" ...>`), and a button which is your skip-to-position-button, it could work like this: `<a href='javascript:document.getElementById("myflash").SetVariable("method:setPosition", 1000)'>Skip 1 sec into track</a>`. You'll also need to add `<param name="AllowScriptAccess" value="always" />` in your object.
mqchen
@mq.chen: I tried to do what you mention in your comment. Unfortunately it still does not work. I seem to have an issue like mentioned here: http://stackoverflow.com/questions/1038668/cross-domain-externalinterface-error-calling-method-on-npobject. However, I can not change the SWF as seems to be required.
Marcel
Sounds like a security issue. I think the only solution would be to distribute the swf file together with your single html. I suppose it is not possible to include rich media in a single html file while requiring it to work with IE. It would be possible to use the `<audio>` tag together with the data URI scheme, but that is not supported by that many browser yet. I'm sorry, but I can't think of any other solution.
mqchen