I'm working on an outlining application that syncs items in the outline to recorded audio. The ideas is that you can play the audio from a specific place in your document, or get to an item from a specific place in the audio.

Therefore, playback would happen in one of two ways: 1) Play audio from current text selection 2) play audio from playhead.

Further, each item in the outline doesn't necessarily have audio associated with it.

I'm trying to design the interface that helps users accomplish all these goals with the simplest UI possible. Looking for clever ideas.

I've thought about having a little audio icon appear to the left of the items with audio. When clicked, it would play the audio from that point. However, this makes the text interface a bit cluttered (items also have collapse symbols and text list symbols).

Any suggestions?

2 Answers 2


Adding play icon next to each paragraph is a good solution.

If you do not want to clutter your UI, you could include separate player and put marks on timeline corresponding to each paragraph beginning.

On my mockup each paragraph also has a link that moves player to its beginning (#1—#5). Play icon on the left of the paragraph is the current playing position: this way you could see where audio is right now (re-read if you do not get something), and also stop it from text.

enter image description here

  • I like the player idea. However, an outline isn't always straight numbers like that. there could be bullet points, multiple #1's, etc. Any ideas with the timeline for that?
    – Dexter
    Commented Sep 27, 2011 at 15:45
  • Well, you could number paragraphs as you want: 1,2,3, 1.1, 1-1, 1.a etc. Any signs will work. Commented Sep 28, 2011 at 4:42
  • For many outlines, the user expects '•' signs, or something similar. I don't think it would right to require symbol formats just because of audio.
    – Dexter
    Commented Oct 3, 2011 at 20:01

Almost the same as the solution of Nikita Prokopov above.

Add the play icon next to each paragraph, but only show it if the user hovers over the paragraph. That way you don't clutter the UI. (Only works if for desktop)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.