Это авторский (адаптированный) перевод статьи.
Источник: http://www.linchoucheng.com/how-to-prototype-sound-app-with-audio-playback-in-axure-rp/
Автор: Lin Chou, Cheng.
Дата публикации: 8 июля 2017 г.
Перевод: Акшура 🔥 (https://t.me/axureaxure)
-----------------------------------------------------------------------------------------------
Добавление возможности управления проигрыванием аудио в Axure RP
Как практик и преподаватель мастер-классов по UI/UX могу сказать, что проектирование и эмулирование реалистичных моделей интерфейсов с расширенным мультимедиа контентом никогда не бывает простым. Один из самых часто поднимаемых вопросов/задач, встречавшихся мне, это:
Как воссоздать функциональный интерфейс который мог бы проигрывать потоковое аудио или аудио файл, как на настоящем веб сайте?
Если быть честным, то это достаточно сложный вопрос и он не может быть решён просто "на раз-два"; на данный момент нет какого-либо готового решения для этой задачи, и наилучшим решением будет сделать его самому. Ну, тогда иди и делай "живой" прототип.
Для реализации этой задачи воспользуемся программой для прототипирования Axure RP. Полазив по официальному Форуму Axure, вы увидите порядка 26 061 просмотра, набранных с 2011 года по теме интеграций аудио.
В этом треде из категории "продвинутое прототипирование" уже есть подходящее, работающее решение для проигрывания и управления аудио потоком. Но для начинающих специалистов в Axure это решение может быть сложным для понимания.
Поэтому я решил снять своё обучающее видео и показать рабочий процесс создания аудио проигрывания в Axure RP. Показанный в нём пример в большинстве своём основан на решении Мэтью Нирента, которое он опубликовал на Форуме Axure в 2014 году.
Как всем известно, в Axure можно на выходе получить прототип в HTML+CSS+Javascript - такой вот готовый монстр. С помощью веб-браузера и разметки HTML5, которая используется в самом прототипе, мы можем воспроизвести опыт реального управления воспроизведением звука, который можно найти в любом обычном музыкальном приложении.
Главная идея этого метода основана на коде javascript, который работает в веб-браузере. Чтобы её реализовать нам нужно, во-первых, создать контейнер для управления аудио с помощью динамических панелей Axure. Затем разместите в нём аудио трек или ссылку на потоковое аудио (любые, на ваше усмотрение - п.а.).
После этого нужно будет всего лишь добавить кнопки запуска и паузы аудио, повесив на них событие OnClick с небольшим javascript кодом.
Чтобы продолжить дальше, скачайте и откройте этот файл: axurerp_codeSnippets_audioPlaybackControl - или просто скопируйте его из поля ниже
//code snippets
//-----------------------
//событие onLoad
//-----------------------
javascript:void( $('[data-label="audioHolder"]').append("<audio controls id='player'><source src='https://ia800302.us.archive.org/20/items/grimms_english_librivox/grimm_39_theelves.mp3' type='audio/mp3'>Browser does not support the audio element.</audio>") );
//-----------------------
//событие onClick для кнопки "Проиграть" (playButton)
//-----------------------
javascript:void( $("#player")[0].play() );
//Set playBackConsole to pause state
//-----------------------
//событие onClick для кнопки "Пауза" (pauseButton)
//-----------------------
javascript:void( $("#player")[0].pause() );
//Set playBackConsole to pause state
Итак, комбинируя представленный код и возможности Axure по демонстрации прототипа (показывается на видео, как выгружать прототип в веб на Axure Share - п.а.), вы сможете проектировать аудио-ориентированные приложения и использовать их в других проектах и экспериментах.
Примечания от автора перевода:
1) Где взять ссылку на аудио?
На любой сервис залейте, который даёт прямую ссылку на файл, и скопируйте ссылку на этот MP3 файл в указанное место JS кода.
2) Что делает JS код при событии OnLoad? (первый, самый большой кусок кода)
Он работает так: при загрузке виджета (событие OnLoad для любого элемента на странице, т.к. тут не принципиально (кроме имени виджета, т.к. в коде идёт привязка к виджету по имени)) функция JS привязывает к указанному виджету код, который подгружает указанный MP3 файл в проект. Для чего? Чтобы потом кнопками Play и Pause запускать или останавливать проигрывание этого файла.