Каковы опции для агностического браузером способа сделать веб-слайд-шоу с аудио?
У меня есть требование для соединения приложения, которое генерирует веб-показ слайдов.
Это должно смочь сделать необычные переходы между повторными изображениями (в браузере) и также обеспечить аудио, в то время как те изображения отображаются. Переходы между изображениями должны быть задержаны, пока аудио не закончено (каждое изображение будет иметь свой собственный аудиотрек).
Это также должно быть создано с программой так никакие необычные инструменты разработчика GUI - я хочу смочь просто генерировать XML или файлы простого текста, которые могут или быть загружены непосредственно в браузер (а-ля jQuery) или скомпилированы со свободно распространяемым инструментом (а-ля Открывают Laszlo).
Вся моя веб-работа до настоящего времени была J2EE, но я думаю, что время, что я проверил некоторые более богатые клиентские инструменты. Я имел беглый взгляд и в Открываю Laszlo и в jQuery, но я не уверен, как я пошел бы о синхронизации слайдов с аудио. Базовый процесс будет:
- начните аудиотрек.
- переход к изображению.
- ожидайте, пока аудиотрек не закончен.
- промывка и повторение.
Действительно ли этот вид вещи возможен с jQuery? Кажется, существует огромная сумма материала DOM-управления, но я ничто не могу найти очевидным об аудио синхронизации.
Я открыт для других предложений, если у Вас есть они, но требование для свободно распространяемых инструментов является абсолютом. Это, вероятно, исключит большинство решений для типа Adobe Flash.
5 ответов
Я рекомендую jPlayer http://www.happyworm.com/jquery/jplayer/ в качестве обработчика событий аудио. jPlayer великолепен, потому что он также поддерживает HTML5 аудио.
Затем вы можете использовать функцию onSoundComplete callback в jPlayer, чтобы вызвать изменение изображения. Слишком много скроллеров/слайд-шоу изображений jQuery, чтобы перечислить, но лично мне нравится Cycle: http://malsup.com/jquery/cycle/
Вы можете записать это в ActionScript 3 с помощью библиотек Flex (SDK свободен). Я не знаю ни одного другого варианта, особенно учитывая требования к синхронизации со звуком.
Используя AS3, вы можете загрузить XML-файл, который описывает ваше слайд-шоу, загрузить соответствующие ресурсы, использовать любое время и записать практически любые эффекты, о которых вы только можете подумать.
.Да, jQuery может это сделать. Для аудио, используйте аудио тег HTML5 с флэш откатом для Opera&IE.
Когда вы меняете img, вы можете изменить аудио url.
.Вероятно, это перебор, но если ключевым критерием является перераспределяемый игрок, вы можете попробовать использовать Unity. Веб-плеер является бесплатным и свободно распространяемым.
Несмотря на то, что в html5 появился новый яркий и блестящий аудиотег, его действительно нельзя использовать, пока большинство браузеров серферов его не поддерживают. Это означает, что флэш - единственный вариант для аудио. Хотя я думаю, что использование Flash/Actionscript для всего приложения может быть простым способом использования нескольких технологий. Я могу порекомендовать Soundmanger в качестве очень удобной библиотеки javascript для управления аудио. Он работает с крошечным флэш-роликом, который на самом деле проигрывает клип, но скрывает все взаимодействия за красивым api (включает в себя кучу событий).
Так что это может быть вашим аудио бэкэндом. Для управления всей сценой я бы действительно выбрал jQuery, но это дело вкуса. Самый простой способ - это получить JSON-файл (и либо "оценить" его, либо разобрать с помощью JSON2 Script), который содержит все изображения и аудио URL (или сгенерировать его прямо в вашем js-коде или что-то в этом роде). Поставьте вашему экземпляру Soundmanager клипы, предварительно загрузите некоторые или все изображения и готово к работе.
Когда дело доходит до эффектов перехода изображения, вы можете сделать много с jQuery/JS/HTML, но вы можете сделать MUCH больше с Flash, что приводит к моему первоначальному предложению использовать Flash и ActionScript для всего проекта.
Надеюсь, это немного поможет, удачи!
p.s. Вот пример синхронизации javascript/аудио. Страница пытается имитировать музыкальную запись (на немецком языке, к сожалению), ждет окончания песни ;).