New feat : Redesigned audio player

[alexbelgium]

Hi, I've developed a redesigned audio player that will be added to the HA addon. It might interest you also.

Objective :

• Fix mobile issues : spectrogram disappears once playback is started & no download button
• Embed gain control as default volume is often too low compared to other playbacks
• Consistency on player appearance (currently it was using the video controls which is system dependent)

Implementation :

• Custom audio javascript which is self-contained
• Resource efficient : lazy loading (file ; audio nodes) and releasing to avoid using too much resources
• Code for frequency shift and auto-refresh adapted for the new controler

Features :

• Clean modern UI
  • Mouse & touch aware
  • Allow to start from a specific point by clicking on the spectrogram
  • Consistent accross devices (tested on Windows edge & Firefox ; Ubuntu Firefox ; IOS edge & safari)
• Audio options
  • Gain control (Off to x16)
  • Highpass (Off to 1000hz)
  • Download
  • Informations on file
• Persistance of settings (stored in local storage)

Main view :

Loading :

Options :

[alexbelgium]

Solved all issues I could find (including loading optimization) but this would still need a bit more testing as I'm not a js expert

[Nachtzuster]

Hi @alexbelgium this looks nice.

An issue I found was trying to play a file a second time does not work: the progress bar keeps sitting at the end and nothing happens.

A minor visual thing:

Since we're talking audio gain here, I guess it should be expressed in dB, as in 6dB 12dB 18dB 24dB

[alexbelgium]

Thanks for the feedback ; what is your test system so I can try to replicate?

[Nachtzuster]

Thanks for the feedback ; what is your test system so I can try to replicate?

Firefox on both Linux and Windows

[alexbelgium]

I could replicate ; should now be fixed according to my test !

[Nachtzuster]

Confirmed!

One more thing I found: If you play a clip, and after that download it, it starts playing the clip again, but not the until the end.
It seems to just play the time it takes to download the file.

[YvedD]

Hi,

Can/will this be implemented in the main branch too?
Looks very promising in any way

[alexbelgium]

Hi,

Can/will this be implemented in the main branch too? Looks very promising in any way

Thanks ! I'm just a bit struggling for the moment with two bugs that need to be solved first :

• Abnormal reading of a file after "Info" or "Download" on Firefox (cf. Nachtzuster comment above)
• When clicking on Info, it moves playback to the end (globally where the user clicked in the panel)

[alexbelgium]

I think the issue is solved, or at least I can't replicate it anymore on Edge or Firefox. Could you please check? Thanks!

[Nachtzuster]

@alexbelgium another bug squash confirmed!

I did find some more issues just now (on ubuntu+firefox):

• On the front page, after a reload or when the 'most recent' clip has not been played yet, you cannot start it by just clicking the spectrum plot, you have to click the play icon. After it has played once, clicking the spectrum does start the playback
• Today's Detections' spectra are gone:
  
• Clicking the spectrum starts the playback from the time in the spectrum. it used to start from the beginning is stopped or pause when playing. I'm guessing this is a bug and not a feature 😄

[alexbelgium]

Hi, thanks for your comments :

• the third point is actually voluntary. The idea is that the full spectrum is visible from the start. If we want to start playback, we need to click on the play icon on bottom left. However, once playback is started, you can go to any place you want in the spectrum by clicking on it. It avoids needing to play with the playback bar, and is much more convenient on mobile phones
• this is the same for the first point : upon refresh the resources is reloaded and therefore logics restarts from 0 (= need to click on bottom left)
• for today's detections I can't replicate - did you clear your browser cache ?

[hacustom]

Just voicing an opinion on this, looks like a really nice UI enhancement and I would love to see some of this functionality.

[alexbelgium]

It's already in the ha addon and docker container if you want to try https://github.com/alexbelgium/hassio-addons/blob/master/birdnet-pi/README_standalone.md

[Nachtzuster]

@alexbelgium I had another try with this branch:

• I'm fine with having the playback start at the 'click time' in the spectrum, that does make sense.
• Forcing the user to click the play button on first load feels a bit clunky, especially since on the old player clicking the picture just works. Can we have the player play if one clicks the picture at initial load too? (preferably from the beginning for that initial click - not sure if that is possible)
• The layout in Today's Detections is indeed broken, it is not cache issue. Also happens in a private browser window
  I verified this on another computer (Windows/Firefox+Chrome) -> same
  Interestingly, the layout IS correct under 'Recordings'

[alexbelgium]

Thanks ; I'll check those. I guess I changed something else in the addon that avoids those observations so I'll use a "vanilla" install from your repo

[alexbelgium]

Pushed again, today's is now fixed but I still need to adapt a bit UI with the logic of one central play button as before

[alexbelgium]

New style with no more click to move in the spectrogram.

Tested :

• Windows : Edge + Firefox
• IOS : safari

[Nachtzuster]

@alexbelgium looks good to me - ready to merge?

[alexbelgium]

Ready for me

[Nachtzuster]

@alexbelgium thanks!

[hacustom]

Updated my instance this morning, I like the new interface!

[blogdemoi]

I don't have this menu, I don't have the 3 dots menu… I just have the usual volume slider.

I am with Manjaro Linux and Firefox, both up to date.

[alexbelgium]

Mmh have you updated, and cleared your cache? If you use cloudflare it can have it's own cache. You could try in incognito mode to see if it changes something

[blogdemoi]

Mmh have you updated, and cleared your cache? If you use cloudflare it can have it's own cache. You could try in incognito mode to see if it changes something

Ah, sorry for this, I just had an update this morning and I have the 3 dots menu now and all the options now. That's wonderful and very useful ! Thank you for your hard work.