Implement autoplay option for audio component (google#398)

demo/audio.py

@@ -8,6 +8,14 @@
   path="/audio",
 )
 def app():
+  """
+  In order to autoplay audio, set the `autoplay` attribute to `True`,
+  Note that there are autoplay restrictions in modern browsers, including Chrome,
+  are designed to prevent audio or video from playing automatically without user interaction.
+  This is intended to improve user experience and reduce unwanted interruptions.
+  You can check the [autoplay ability of your application](https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability)
+  """
   me.audio(
     src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
+    # autoplay=True
   )

mesop/components/audio/audio.ng.html

@@ -1,2 +1,6 @@
 <!-- always show controls, otherwise you can't interact with the audio. -->
-<audio controls [src]="config().getSrc()"></audio>
+<audio
+  controls
+  [src]="config().getSrc()"
+  [attr.autoplay]="config().getAutoplay()? true : null"
+></audio>

mesop/components/audio/audio.proto

@@ -4,4 +4,5 @@ package mesop.components.audio;
 
 message AudioType {
     optional string src = 1;
+    optional bool autoplay = 2;
 }

mesop/components/audio/audio.py

@@ -4,21 +4,18 @@
 
 @register_native_component
 def audio(
-  *,
-  src: str | None = None,
-  key: str | None = None,
+  *, src: str | None = None, key: str | None = None, autoplay: bool = False
 ):
   """
   Creates an audio component.
 
   Args:
       src: The URL of the audio to be played.
+      autoplay: boolean value indicating if the audio should be autoplayed or not. **Note**: There are autoplay restrictions in modern browsers, including Chrome, are designed to prevent audio or video from playing automatically without user interaction. This is intended to improve user experience and reduce unwanted interruptions
       key: The component [key](../guides/components.md#component-key).
   """
   insert_component(
     key=key,
     type_name="audio",
-    proto=audio_pb.AudioType(
-      src=src,
-    ),
+    proto=audio_pb.AudioType(src=src, autoplay=autoplay),
   )

package.json

@@ -163,6 +163,7 @@
     "@types/yaml": "^1.9.7",
     "@types/yargs": "^17.0.8",
     "autoprefixer": "^10.4.2",
+    "biome": "^0.3.3",
     "browser-sync": "2.26.13",
     "chalk": "^4.1.0",
     "cross-env": "^7.0.3",