It's missing a play button, but is there something to this approach..?

@Gargron maybe make the bottom half shorter like it is on Soundcloud?

@Gargron I love it. Honestly IMO it doesn't need a play button; clicking on the waveform should be intuitive enough...?

@vy @gargron but how would you differentiate between pausing the audio and scrubbing through it?

@violet @Gargron You could have click = play/pause, and drag = scrub... Of course you'd have to have some sort of control pop up for keyboard navigators anyway, so

@vy @Gargron I would feel like clicking it would cause it to seek to the time I clicked on. I also wouldn't know how to pause it after it started playing

@Gargron without understanding how difficult this would actually be to pull off, I think just clicking on the waveform would be cool, and maybe when paused the blue can turn to a different shade of grey? it looks fuckin r a d either way

@Gargron Looks cool. And being able to share sound recordings that way is really great!

Me: Ok. You've implemented audio. Now what's the next step in your development cycle
@Gargron : adding the play button...
@lunarised @Gargron isn't it obvious? the eye at the top of the page will pause/unpause all audio for the thread
@Gargron eh - without a play button i think people would associate clicking on the waveform to moving to different spots in the audio.

@Gargron I do find a waveform useful as it helps to spot points within a soundtrack.

I'm highly partial to mpv's keyboard controls (and have a bluetooth keyboard). Play/pause, and a skip forward/back (10-15s) would be useful. Space to play/pause w/ keyboard, at a minimum.

@Gargron looks clean and really good, but if the play button looked like the Mastodon logo and even had a small motion effect, that would be very unique and still very clean. Just a thought. Anyway, awesome!

@Gargron kinda like SoundCloud? I do like that style of player

@Gargron Oh my god this is the feature I've been dreaming of

@Gargron definitely like this style. Is it dependant on the waveform of the audio file?

@Gargron other than the play button, I think it would look better with a different background color around the waveform. maybe it could be a little bit shorter also

@Gargron really think it would look better if the bottom half of the waveform was squished a bit

@ben Would need to write a custom renderer for wavesurfer.js for that to happen...

@ben @Gargron Working on a project that might use this lib. if we do, we will add both bottom clipping and stereo as top/down. ...but so far it is not ranking at the top.

@Gargron Looks similar to's on-page player display. Looks good.

@Gargron In most UI's, clicking on the waveorm acts as jumping to a specific point, and clicking+dragging will pop up a numerical display of how far back or forward you're seeking. Is also touch-friendly.

Buttons underneath are universally recognized symbols, everyone knows what to do when they see that.

Main thing is space. It's easy to just click on a video and click again to pause it without hunting for that small play button. But people are going to want to seek with that wavefrom.

@Gargron If someone clicks anywhere on it and it starts playing, and it's something loud and obnoxious, they'll want to click again to stop it, and if they do that and it just skips to another part of the loud and obnoxious noise that's going to be frustrating. Prolly worse on mobile.

In videos the seekbar's much smaller compared to the overall video, you can click almost anywhere and the video will play or pause. Dunno how it could be rearranged.

@Gargron I like it! This seems much better than the empty screen that currently gets shown when an audio only file gets uploaded. 👍🔊

@Gargron Build in audio capabilities in Mastodon? Are you kidding me?
So cool to start a small podcast with random thought and idea's.

@Gargron - Could there be a slider as long as the soundscape? ...and a moving play/pause button on that slider?

@Gargron - Or maybe just a moving vertical line with the play/pause button?

Looks cool but... as others mentioned... not practical.
No reason to reinvent the wheel.
The standard button controls you need for audio play have already been defined. Look at any cassette player, for example.
(to be continued)

- Play (or "Play/Pause" in media players)
- Pause (merged with "Play", in media players)
- Stop (and go to beginning, in media players)
- Fast Forward (skip forward according to a user defined amount of time, for media players)
- Rewind (skip backwards, according to a user defined amount of time, for media players)
- Record (Save File, for media players)
- A timeline is useful for taking big but inaccurate leaps.
The waveform looks great, but is not necessary.

Today, for the first time, I had the chance to use the 's audio player. Unfortunately, it lacks all the features mentioned above.
I think it would be helpful to remember, that a good audio player should be good at reproducing...
- audio sounds (like... "boom!")
- songs
- albums
- audiobooks
- podcasts, lectures, and radio shows

@Gargron @fedilab
... and I'll bother you, once again with that issue. If you want to go completely minimalist (as I suspect you do), you can have only 2 buttons.
- the play/pause button
- a share button, that allows the user to open the direct url link of that audio file, with an external media player (a player that might have "all the nice features").
. . .
For example, in my Android phone, I prefer to open almost all youtube links, from whatever app, with the NewPipe app.

Don't forget that media links are hosted by the instance itself, so sharing with an external app won't work for private or direct messages.

@Gargron personally didn't like when websites did it, because it seems like smashing pausing&resuming and going to a certain part of the song into the same action and that doesn't seem to work that well
Sign in to participate in the conversation

Server run by the main developers of the project 🐘 It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!