Would having a generic waveform be too confusing for users?

Question

I'm currently working on a redesign of an online radio. It does not have a lot of content, so I decided to make the player the dominant element of the home page. I would like the design itself to be clear and informative: once you look at the page you can easily understand whether the stream is playing or paused. In order to do that, I was planning to show a waveform which would reflect current state of the stream. It would make it pretty obvious whether the audio is playing or not, if it is a still straight line - no audio, otherwise it is playing. I wanted it to look something like this:

However, it turns out that it is technically impossible to do such a thing with streaming media, using only HTML(5). By that I mean that it is impossible to get the data from stream to build the waveform upon. Because I really liked the waveform idea, I came up with showing a generic waveform, it would not reflect the state of the actual audio stream, but it will give a hint to a user whether the radio is playing, or paused. However, it might lead to a confusion, when the stream is silent and the waveform is moving, because the player itself is not paused.

My question is whether I should use a generic waveform or not, because it is too confusing? Are there any other good ways to achieve my goal, except simply showing a Play or Pause icon constantly on the screen?

Answer 1

I think this would be perfectly possible with a stylized waveform that is carefully designed to not look real. If the shape is a bit cartoonlike and simplified, and the movement is pretty regular, I don't think it will confuse anyone.

Also, the consequences of being confused are not that significant in this case. If the user looks at a waveform and at first thinks it is the real waveform being played, what harm will this cause? Outside of the professional audio world, the waveform tends just to be eye candy, anyway.

I do think you should style it to differentiate from a real waveform, but if an occasional person misunderstands it, it would not be a big deal. So, I say go for it if this is stylistically the best for your site.

Some other options if an animated indicator is important to you:

• A beating speaker.
• Some sort of animated circle/loop.

I do think that play/pause would be perfectly sufficient, though.

Answer 2

I think a problem with a generic waveform is that it will be "moving" and indicating sound when there is none (the audio is playing a silent section) and this disconnect would be bothersome (to me, at least). Something like a spinning record would be better. I actually faced this problem a few years ago, I wanted a clear and moving indicator that audio was playing, but I wanted to keep things compact, so I made the play button arrow spin then it was in play mode:

http://vijayanderson.com/projects/quartet-trio/

Very simple tech: just set a class that has a background of a spinning GIF when it's playing.

Answer 3

You have more or less answered the first question. Don't confuse users is a pretty good rule. You might find that there is stylised diagram that shows streaming quality and state but avoid making it look like some it isn't.

What do the users actually want? I suspect that a cool looking waveform is delightful for the first few moments; but soon fades from interest when it is in use. (Stakeholder centric versus user centric)

• a simple, clean and small interface might be a strong user requirement
  • perhaps let them collapse a layout with big helpful buttons to something more compact
• they might want information and links about:
  • what is playing or coming up
  • what channel they are connected to
  • alternatives (similar channels)

Answer 4

Yes, it would. Wavelength is a standard denominator for the sound amplitude (loudness), and using it to represent the stream activity will definitely confuse majority of users.

A better option to use instead would be a bar chart or block-bar chart to display the same data which is a standard visualisation for your case.

Vypr VPN & OS X Activity Monitor, respectively.

You can use D3 to build such a component. https://github.com/mbostock/d3/releases

Answer 5

However, it turns out that it is technically impossible to do such a thing with streaming media, using only HTML(5). By that I mean that it is impossible to get the data from stream to build the waveform upon.

It is not technically impossible to get the data in a pure HTML5 media player. In the Web Audio API, you can take the audio from a playing <audio> element using MediaElementAudioSourceNode and send the data to an AnalyserNode, which allows you to grab snippets of the audio data, while still also having it play through the usual audio output.

Using the same nodes, it is also possible to get frequency-domain samples, for the “graphic equalizer” style display.

Music may still have periods of perfect silence, so if you chose this approach (I'm not addressing whether it is a good idea, only that it is possible) you would want to still give some distinction between “playing but silent” and “paused”. (This distinction would not need to be clear-on-first-glance since it is rare for music to be silent for any significant length of time.) For example, you could have the waveform display area be blank when paused/stopped, as opposed to having a straight line which is the waveform of silence.