Javascript для выбора фрагмента из звуковой дорожки - PullRequest
1 голос
/ 08 декабря 2010

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

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

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

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

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

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

РЕДАКТИРОВАТЬ (дополнительная информация):

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

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

1 Ответ

0 голосов
/ 08 декабря 2010

Для выбора:

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

Что касается JavaScript, выполняющего очистку воспроизведения, удачи вам в этом ... Звучит скорее как flash или html5

...