feat(core): add reload button to audio block (#12451)

Related to: [BS-3143](https://linear.app/affine-design/issue/BS-3143/更新-loading-和错误样式)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added a reload button with an icon for audio blocks, allowing users to retry loading audio files if an error occurs.
  - Error messages are now displayed with actionable options when audio loading fails.

- **Enhancements**
  - Audio file sizes are now shown in a human-readable format within the audio player.
  - Improved display of audio file information, including error messages and formatted descriptions.

- **Style**
  - Updated styling for audio player and audio block components, including new styles for error states and reload button.
  - Renamed and refined audio player description styling for better layout and spacing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/modules/media/entities/audio-media.ts

@@ -132,6 +132,9 @@ export class AudioMedia extends Entity<AudioSource> {
     return { waveform, duration };
   });
 
+  // `MediaSession` is available
+  private readonly available = 'mediaSession' in navigator;
+
   private readonly audioElement: HTMLAudioElement;
 
   private updatePlaybackState(
@@ -194,7 +197,10 @@ export class AudioMedia extends Entity<AudioSource> {
             `Calculate audio stats time: ${performance.now() - startTime}ms`
           );
         }),
-        onStart(() => this.loading$.setValue(true)),
+        onStart(() => {
+          this.loadError$.setValue(null);
+          this.loading$.setValue(true);
+        }),
         onComplete(() => {
           this.loading$.setValue(false);
         }),
@@ -212,7 +218,7 @@ export class AudioMedia extends Entity<AudioSource> {
   }
 
   private setupMediaSession() {
-    if (!('mediaSession' in navigator)) {
+    if (!this.available) {
       return;
     }
 
@@ -237,14 +243,14 @@ export class AudioMedia extends Entity<AudioSource> {
   }
 
   private updateMediaSessionMetadata() {
-    if (!('mediaSession' in navigator) || !this.props.metadata) {
+    if (!this.available || !this.props.metadata) {
       return;
     }
     navigator.mediaSession.metadata = this.props.metadata;
   }
 
   private updateMediaSessionPositionState(seekTime: number) {
-    if (!('mediaSession' in navigator)) {
+    if (!this.available) {
       return;
     }
 
@@ -260,7 +266,7 @@ export class AudioMedia extends Entity<AudioSource> {
   }
 
   private updateMediaSessionPlaybackState(state: AudioMediaPlaybackState) {
-    if (!('mediaSession' in navigator)) {
+    if (!this.available) {
       return;
     }
 
@@ -270,7 +276,7 @@ export class AudioMedia extends Entity<AudioSource> {
   }
 
   private cleanupMediaSession() {
-    if (!('mediaSession' in navigator)) {
+    if (!this.available) {
       return;
     }
     navigator.mediaSession.metadata = null;