I've never been happy with the old 'iTunes' model ("flip-flop" buttons; see this question) where the play and pause are the same button, with an icon showing what state you can go to (Play when you're paused, Pause when you're playing). Users often mistake action for state or vice versa.
Lately I've been seeing buttons marked
> / || which have two states, unhighlighted and highlighted. Users seem able to grok this, though I'm never sure if 'in' means 'go' or 'pause. It's vaguely unsatisfying.
I was debating a single pause icon:
|| which gets pressed 'in' when engaged, like an old tape deck; but perhaps that too would be confusing.
Can you think of another way to present this play/pause dual?
I don't like the play/pause in the same button, but I understand the advantages from an "economy" point of view and also in terms of usability it makes sence.
Trying to create a different system may not be the best idea (I'm not saying inventing something new isn't good) since this is a proven system that most recognize.
iTunes uses something even worse (IMO) which is the play/pause and no stop button...
"My" trusted SoundJam MP uses this:
A Play, Stop and Pause. It is very clear and works wonderfully.
Another thing to consider is keyboard shortcuts, this for me is paramount, because to be honest I haven't pressed any of those buttons for the last several months, I use keyboard shortcuts and via Butler (on the mac) I control the playback via shortcuts also... What I mean with this is if simplifying the button system isn't such a bad idea, since maybe they won't even be used that much (?)
I think an elegant solution is to style the look of the buttons how they act. So play and pause are a toggle, make them look like a toggle.
And while we are at it lets place them on the same line as the timeline to show the relation of how they effect it.
By placing play and pause at the start of timeline it shows the user these start/push the timeline forward.
By placing the stop button at the end, you show the user that it will end the timeline and push it backwards to the start.
And the timeline player can help as well. By coloring it while its playing you show that its being pushed along and time is passing. By uncoloring you show it has paused.
Here is my mock up:
Seeing how widely used this is in pretty mainstream players such as iPod and Spotify most users should have no problem with this. Also most users probably don't overthink what the states means, such as if streaming is going on in the background. Either the music is playing or it's not and the play/pause toggle shows this pretty well.
Inspired by @jonshariat, I've created a similar version of this for a timer on my site:
I've also got it working so that the space bar will stop/start the timer as it does with spotify.
I believe the play/pause symbol (Arrow with Vertical line amalgamated to the right vertex of the triangle) is also the symbol of a diode in a semi-conductor device used in electronics. If you research how a diode works then i think you would be pleasantly satisfied about the design of the play/pause symbol.
this is so annoying why cant they be simpler ffs heeeeelllllpppp meeeeee youuu never give me the help i neeeeeddddd