JavaScript pour sélectionner l'extrait de la piste audio

Question

Je travaille sur un projet en PHP, où à partir d'une bibliothèque de pistes, un utilisateur peut sélectionner une piste, choisir un extrait de cette piste de quelques secondes et utiliser cette extrait en tant que paramètre de recherche sur la page suivante.

Le client souhaiterait qu'une forme d'onde de la piste soit affichée (celles-ci ont déjà été générées en tant que fichiers PNG), avec une 'tête de lecture' indiquant la position de lecture actuelle (devrait être assez facile à faire). L'utilisateur doit pouvoir sélectionner un point de départ et un point final pour sa sélection en faisant glisser des barres verticales, auditionner l'extrait sélectionné (en appuyant sur la barre d'espacement ou similaire), puis cliquer sur 'Rechercher' pour soumettre un formulaire HTML. Les seuls paramètres dont j'ai réellement besoin à partir du formulaire sont les positions de début et de fin de l'extrait audio sélectionné. Donc, c'est ce que le client veut, et je suis à la phase de remue-méninges. Jusqu'à présent, j'ai un tas de fichiers mp3 et des graphiques de forme d'onde correspondants. En ce qui concerne la prise en charge des navigateurs, il sera correct de spécifier que le navigateur doit être "la dernière version de ...", mais je voudrais offrir un support pour tous les grands noms: Safari, Firefox, Opera, IE, Chrome . Avez-vous des suggestions de bibliothèques JavaScript ou de solutions que je devrais envisager pour faciliter l'implémentation: l'intégration du fichier audio, l'interface de contrôle de lecture et l'interface de sélection d'extraits. Bien qu'il puisse être possible de générer des fichiers OGG correspondants pour tous les mp3 (pour aider à une implémentation HTML5), je préférerais ne pas le faire si possible, car cela complique les choses. Donc, idéalement, je voudrais une solution mp3 seulement qui offre un soutien multi-navigateur. Peut-être quelque chose comme jPlayer serait une possibilité? Je connais certainement jQuery, donc l'utiliser serait un bonus.

Existe-t-il des bibliothèques que je pourrais utiliser et qui pourraient m'aider avec l'interface de sélection d'extraits? Dans un monde totalement idéal, ce serait une solution avec une «barre de défilement», c'est-à-dire que lorsque vous faites glisser les poignées de début et de fin, le son de la «tête de lecture» est prévisualisé instantanément.

Un grand merci pour vos idées et suggestions!

EDIT (plus d'informations):

J'espère pouvoir créer quelque chose de similaire à cette démo: http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm sauf la caractéristique supplémentaire qu'un utilisateur peut sélectionner un « extrait » de la tracez, en utilisant les barres de récurage de début et de fin, et pouvez auditionner l'extrait par en appuyant sur lecture. Donc, mon interface souhaitée est comme ceci:

• sur chargement de la page, la piste commencerait en mémoire tampon, et le bouton de lecture joueraient dès le début comme normal si pressé
• si l'utilisateur fait glisser une barre de gommage à partir du bord extrême gauche de la piste, le son de la tête de lecture serait prévisualisé (comme avec la démo I liée à), et en relâchant la barre de récurage, la lecture continuerait de là à la fin de la piste
• si l'utilisateur traîne une autre barre de défilement à l'extrême droite de la piste, le son de la tête de lecture serait de nouveau prévisualisé. Cependant, lorsque la barre est relâchée, la lecture doit revenir à la barre de défilement GAUCHE, et continuer à partir de là. (Si cela est trop difficile à réaliser, je serais heureux avec la barre de défilement de droite pour ne pas prévisualiser le son comme il était traîné, mais juste pour agir comme un «marqueur» pour la fin de la sélection).
• les deux barres de récurage ne peuvent pas se croiser, de sorte que la gauche est toujours 'start' et la droite est 'end' de la sélection.
• Une fois que les barres ont été déplacées et qu'une sélection a été effectuée, la lecture doit boucler l'extrait sélectionné indéfiniment, jusqu'à ce que vous appuyiez sur 'stop' .
• Dans un monde idéal, j'aimerais que les barres de récurage s'alignent sur une grille de secondes entières, de sorte que les valeurs de début, de fin et de longueur de l'extrait soient toujours un nombre entier de secondes. A défaut, je vais arrondir les nombres à l'entier le plus proche plus tard en JavaScript.

Answer 1

Pour la sélection:

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

Comme pour JavaScript faire un lavage de lecture, bonne chance avec ça ... Ressemble plus une chose flash ou html5