6

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:

Waveform example

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?

  • 5
    Why don't you want to simply show Play/Pause? It's compact (leaving plenty of screen space for other windows), familiar to users, co-locates display and control, and lacks annoying (and, in this case, meaningless) animation. – Michael Zuschlag Oct 19 '15 at 12:43
  • Are you sure that it is impossible? look at smartjava.org/content/… and ianreah.com/2013/02/28/… – noncom Oct 19 '15 at 16:56
  • 3
    It's quite definitely possible, although you might need to build your own streaming solution. – David Mulder Oct 19 '15 at 16:59
  • I don't think a generic waveform is too confusing. I think people are used to these things enough that they'll intuitively know what it means, and will likely use it to indicate that something is playing. I don't know how many people would know/care about the waveform matching the sound. If you need to take up space, then this seems a good solution, although better solutions may exist if taking up space isn't one of your design criteria. – R. Barzell Oct 19 '15 at 17:17
  • @noncom The second link might be very useful, thank you, I will definitely look into that! – Cracker Oct 19 '15 at 17:47
5

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.

| improve this answer | |
  • 1
    For the record, here's what Google Music does: i.stack.imgur.com/Mdz6e.gif (This is displayed while a track is playing.) Because the animation is short and periodic, it immediately becomes obvious that it does not represent any properties of the sound. – Nathan Osman Oct 27 '15 at 19:27
10

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.

| improve this answer | |
  • As well as moving wave form during moments of intentional radio silence being confusing, if the changes in volume of the audio were out of sync with the animation, people like me would be distracted and think something was not working properly. I might even wonder if the audio was coming from a different tab I had open. I'd suggest using something less visually distracting than rotation, however, like a slow-pulsing/moving light or glow effect, slow-changing colour gradient, that sort of thing. – user56reinstatemonica8 Oct 19 '15 at 22:07
  • @user568458 - to an old guy like me spinning has an association with audio - spinning records, spinning open reel tapes... ;) – obelia Oct 19 '15 at 23:00
7

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)
| improve this answer | |
  • Yes. The user knows the radio is playing by hearing it, showing a waveform would be redundant. Internet Radio is also not rocket science. There's plenty of them out there in the wild should you want to do some research on what info are relevant for your listeners. – nightning Oct 19 '15 at 16:15
2

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.

enter image description here

enter image description here

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

| improve this answer | |
  • 1
    Um, I think the OP actually wants to show loudness amplitude. A flatline would be silence hence the radio was offline. – Crissov Oct 19 '15 at 13:01
  • Hm. Then the question is not phrased right, as there is two things to consider on the web radio: the sound equalizer and the stream equalizer. The gap in the amplitude (flatline) on the web radio could mean many things: a gap in the played track, a silence of dj, or the problems with the feed. – Zoe K Oct 19 '15 at 13:08
  • 1
    @ZoeKulsariyeva I am sorry if I phrased the question wrong, English is not my native language. Crissov is right, I want to show loudness amplitude. – Cracker Oct 19 '15 at 17:51
  • @Cracker no problem at all. Then I would say wavelength or bar chart for loudness are both good and conventional, but I think you might need an additional asset to work as an indicator of the sound being playing. obelia has a nice solution down there. – Zoe K Oct 19 '15 at 17:55
1

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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