2010-12-08 1 views
1

Я работаю над проектом на PHP, где из библиотеки треков пользователь может выбрать трек, выбрать фрагмент из этого трека длиной в несколько секунд и использовать его фрагмент в качестве параметра поиска на следующей странице.Javascript для того, чтобы выбрать фрагмент из аудиодорожки

Клиент хотел бы, чтобы отображалась форма сигнала дорожки (они уже были сгенерированы как файлы PNG), причем «playhead» показывает текущую позицию воспроизведения (должно быть довольно легко сделать). Пользователь должен иметь возможность выбирать начальную и конечную точки для их выбора, перетаскивая вертикальные полосы, прослушивая выбранный фрагмент (путем нажатия пробела или аналогичного), а затем нажмите «Поиск», чтобы отправить HTML-форму. Единственными параметрами, которые мне действительно нужны в форме, являются начальная и конечная позиции выбранного аудио фрагмента.

Итак, это то, чего хочет клиент, и я нахожусь на этапе мозгового штурма. Пока у меня есть куча mp3-файлов и соответствующая графика осциллограмм. Что касается поддержки браузеров, все будет в порядке, чтобы указать, что браузер должен быть «последней версией ...», но я хотел бы предложить поддержку для всех больших имен: Safari, Firefox, Opera, IE, Chrome ,

Есть ли у вас какие-либо предложения по библиотекам или решениям JavaScript, которые я должен рассмотреть, чтобы помочь в реализации: внедрение аудиофайла, интерфейса управления воспроизведением и интерфейса выбора фрагмента. Хотя возможно создание соответствующих файлов OGG для всех mp3-файлов (чтобы помочь с реализацией HTML5), я бы предпочел не по возможности, поскольку это усложняет ситуацию. Поэтому в идеале я бы хотел использовать только mp3-решение, предлагающее кросс-браузерную поддержку. Возможно, что-то вроде jPlayer было бы возможно? Я, конечно, знаком с jQuery, поэтому использование этого будет бонусом.

Существуют ли какие-либо существующие библиотеки, которые я мог бы использовать, которые могли бы помочь мне с интерфейсом выбора фрагмента? В совершенно идеальном мире это было бы решение с помощью «скраб-бара», то есть при перетаскивании рукоятки запуска и конечной точки звук в «playhead» просматривается мгновенно.

Большое спасибо за любые идеи и предложения!

EDIT (больше информации):

Я надеюсь быть в состоянии создать что-то подобное этому демо: http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm кроме с добавлена ​​возможность, что пользователь может выбрать «фрагмент» из трек, , используя пусковые кусты для начала и конца, и может прослушивать фрагмент на нажатием на кнопку. Итак, мой желаемый интерфейс, как это:

  • на странице загрузки, трек начнет буферизацию, и кнопку воспроизведения будет играть с самого начала, как обычно при нажатии
  • если пользователь перетаскивает скраб бар от левого края дорожки, звук в playhead будет предварительно просмотрен (как с подключенной демонстрацией I ), а при отпускании панели скрапа воспроизведение будет продолжаться оттуда до конца дорожки
  • , если пользователь перетащит другую панель для очистки из крайнего правого края дорожки, звук в playhead снова будет просмотрен. Тем не менее, когда барабан отпущен, воспроизведение должно вернуться назад к краю LEFT, и продолжить оттуда. (Если этого достичь слишком сложно, я бы доволен правой панелью для очистки, чтобы не просматривать звук, поскольку он был перетащен, но он просто стал «маркером» для окончания выбора).
  • два скраб-бара не могут проходить друг с другом, поэтому левый всегда «старт», а справа - «конец» выбора.
  • После того, как полоски были перемещены, и выбор сделан, воспроизведение должно циклически отбирать выбранный фрагмент, пока не будет нажата кнопка «stop» .
  • В идеальном мире я бы хотел, чтобы решетки сбрасывались до сетки целых секунд, так что значения начала, конца и длины фрагмента были всегда целым числом секунд. В противном случае я буду просто округлять числа до ближайшего целого числа позже в JavaScript.

ответ

0

Для выбора:

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

Что касается JavaScript делает вычищение воспроизведения, удачи с этим ... Звучит больше как флэш или html5 вещь

+0

С размещая, я что эта демонстрация jPlayer - http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm - позволяет выполнять очистку с помощью поддержки HTML5/Flash. Это выглядит великолепно, так что теперь мой вопрос заключается в расширении примера добавления второй панели очистки и предварительного просмотра выбора. Я обновлю свой оригинальный вопрос! – 2010-12-08 13:02:16