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?