Javascript для выбора фрагмента из звуковой дорожки
Я работаю над проектом на 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 ответ
Для выбора:
http://docs.jquery.com/UI/Slider
Что касается JavaScript, выполняющего очистку воспроизведения, удачи в этом... Звучит скорее как flash или html5