Use WaveSurfer instead of audio tag.

[toshihikoyanase]

Contributor License Agreement

This repository (optuna-dashboard) and Goptuna share common code.
This pull request may therefore be ported to Goptuna.
Make sure that you understand the consequences concerning licenses and check the box below if you accept the term before creating this pull request.

• I agree this patch may be ported to Goptuna by other Goptuna contributors.

Reference Issues/PRs

A possible follow-up for #629.

What does this implement/fix? Explain your changes.

• Install WaveSurfer to play audio artifacts.
• Add WaveSurferArtifactViewer based on the official example
• Use the WaveSurferArtifactViewer instead of audio tag in the ArtifactCardMedia.tsx

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (d31ab9a) 65.76% compared to head (afe0299) 67.20%.
Report is 33 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #716      +/-   ##
==========================================
+ Coverage   65.76%   67.20%   +1.44%     
==========================================
  Files          35       35              
  Lines        2284     2293       +9     
==========================================
+ Hits         1502     1541      +39     
+ Misses        782      752      -30     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[c-bata]

@contramundum53 Could you review this PR?

[c-bata]

@keisuke-umezawa Could you review this PR?

[contramundum53]

There seems to be a problem that the audio is stopped when automatic update runs.

[toshihikoyanase]

You're right. The WaveSurferArtifactViewer gets recreated unexpectedly every time the automatic update runs.
I'll investigate what triggers the recreation. Thanks.

[toshihikoyanase]

I found that we did not need to observe the options of wavesurfer, such as URL of the audio file, since the Optuna artifacts including audio files are not designed to be updated in-place. They are usually removed and re-uploaded instead.

I guess we can keep playing the audio now, so please take another look.

[keisuke-umezawa]

@toshihikoyanase
LGTM! After the purpose of this PR is clear, I will merge it.