Adding Audio & Sound Playback Control in Axure RP

As a practitioner & trainer for lean UIUX workshop, the art to prototype and emulate a realistic experience model that is rich with multimedia content is never easy. One of the most frequently raised questions or challenges that I have encountered was:

“How do I fake a functional UI that can playback audio or music data as if the real thing?”

To be frank, this is an advanced question, and it can’t be implemented with the typical “fancy-&-flippy” prototyping tools out there; no drag & drop solution would address your needs, and the best way to do it is to code it yourself. Go build a live-data prototype then!

Although having said so, there is a way to do so with a layer-based prototyping tool [1]  like Axure RP. By crawling around the Axure Forums, you shall find that there were nearly about 26061 views that being garnered around the threads, which are audio-related since 2011.

Axure RP, Forum, Sound, Tutorial, Thread, List

By visiting this thread which listed under the Advanced Prototyping categories, there is already an effective workaround solution for audio stream playback and control. But for newbies who are just started out with Axure, the demonstrated examples might be way beyond their comprehension.

So, I decided to create this tutorial video and show you the workflow on how to develop a simple audio stream playback control with Axure RP. The demonstrated example here was mainly based on Matthew Nearents‘ solution, which he had kindly posted in Axure Forums in 2014.

As we all know that the output of Axure prototype is an HTML+CSS+Javascript hybrid-ready monster, by leveraging the web browser and the HTML5 Audio tag that we use to render our prototype, we can emulate the experience of having a real audio playback control that found in a typical music app.

The idea of behind this technique is mainly powered by the javascript that runs in the web browser.  To do so, first, we need to create an audio holder that made out of Dynamic Panel in Axure. Then, load it with an audio stream of your choice.

Axure RP, Audio, Playback, Sound, Javascript, js, tutorial, Lin Chou Cheng, prototyping, UiUX, Ui, ui, ux

Later, you would just need to create the play and the pause button with an onClick event listener that had some javascript attached to it.

To follow this tutorial, just go to download and open up this document [2]

axurerp_codeSnippets_audioPlaybackControl.

Or, you can simply copy & paste it from below:

//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 for playButton 
//----------------------- 
javascript:void( $("#player")[0].play() ); 
//Set playBackConsole to pause state 

//----------------------- 
//onClick for pauseButton 
//----------------------- 
javascript:void( $("#player")[0].pause() ); 
//Set playBackConsole to pause state

 

So, by combining the demonstrated walkthrough here with the Axure porting technique that I have shared with you on the other day, you should be able to prototype a sound-related mobile app and use it for any lean UX studies purposes!


Reference

1. Bona Kim. (2014). Comparing Popular Layer-Based and Code-Based Prototyping Tools. UX Magazine. http://uxmag.com/articles/comparing-popular-layer-based-and-code-based-prototyping-tools

Leave a Reply