Javascript to select snippet from audio track

I'm working on a project in PHP, where from a library of tracks, a user can select a track, choose a snippet from that track of a few seconds in length, and use that snippet as a search parameter on the next page.

The client would like a waveform of the track to be displayed (these have already been generated as PNG files), with a 'playhead' showing the current playback position (should be pretty easy to do). The user should be able to select a start and endpoint for their selection by dragging vertical bars, audition the selected snippet (by pressing the space bar, or similar), and then click 'Search' to submit an HTML form. The only parameters I actually need from the form are the start and end positions of the selected audio snippet.

So, this is what the client wants, and I'm at the brainstorming phase. So far, I have a bunch of mp3 files and corresponding waveform graphics. In terms of browser support, it's goin开发者_StackOverflow中文版g to be OK to specify that the browser must be 'the latest version of...', but I would like to offer support for all the big names: Safari, Firefox, Opera, IE, Chrome.

Do you have any suggestions of JavaScript libraries or solutions I should consider to help with implementation: embedding the audio file, the playback control interface, and the snippet selection interface. Although it might be possible to generate corresponding OGG files for all the mp3s (to help with an HTML5 implementation), I'd prefer not to if possible, as it complicates things. So ideally I'd like an mp3-only solution which offers cross-browser support. Perhaps something like jPlayer would be a possibility? I'm certainly familiar with jQuery, so using that would be a bonus.

Are there any existing libraries I could use which might help me with the 'snippet selection' interface? In a totally ideal world, it would be a solution with a 'scrub bar' - i.e. as you drag the start and endpoint handles, the sound at the 'playhead' is previewed instantly.

Many thanks for any ideas and suggestions!

EDIT (more information):

I'm hoping to be able to create something similar to this demo: http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm except with the added feature that a user can select a 'snippet' from the track, using start- and end-point scrub bars, and can audition the snippet by pressing play. So, my desired interface is like this:

• on page load, the track would start buffering, and the play button would play from the beginning as normal if pressed
• if the user drags a scrub bar from the far left edge of the track, the sound at the playhead would be previewed (as with the demo I linked to), and on releasing the scrub bar, playback would continue from there to the end of the track
• if the user drags another scrub bar from the far right of the track, the sound at the playhead would again be previewed. However, as the bar is released, the playback should jump back to the LEFT scrub bar, and continue from there. (If this is too difficult to achieve, I'd be happy with the right-hand scrub bar to not preview the sound as it was dragged, but just to act as a 'marker' for the end of the selection).
• the two scrub bars cannot pass each other, so the left one is always the 'start' and the right is 'end' of the selection.
• once the bars have been moved and a selection has been made, the playback should loop the selected snippet indefinitely, until 'stop' is pressed.
• in an ideal world, I'd like the scrub bars to 'snap' to a grid of whole seconds, so that the snippet start, end and length values are always a whole number of seconds. Failing that, I'll just round the numbers to the nearest integer later in JavaScript.

---

For the selection:

http://docs.jquery.com/UI/Slider

As for JavaScript doing a playback scrubbing, good luck with that... Sounds more like a flash or html5 thing