Audio

Chart style

The Audio media component lets you embed an MP4-format audio player in a visual application with custom URLs, playback settings, and volume controls.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis coordinates of the component. Unit: pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The rotation angle of the widget around its center. Unit: degrees.

    • Enter a value in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust it.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Audio URL: We recommend that you use an audio URL in the MP4 format, such as // player.alicdn.com/video/editor.mp4. You can also configure the audio URL in the Data Source panel. You can use the audio URL in the Data Source panel.

• Playback Settings: Set the playback style of the audio.

  Metric	description
  Autoplay	If you turn on the switch, the audio is automatically played on the preview or publish page. Note Due to browser protocol restrictions, audio autoplay requires a prior user interaction with the component.
  Loop the video	Turn on the switch to replay the audio automatically after it finishes on the Preview or Publish page.
  Playback Speed	The playback speed multiplier for the audio.
  Hyperlink	Set the playback start position in seconds.

• Volume Settings: Turn on the switch to mute the audio. When muted is off, set the playback volume as a percentage.

• Download: Turn on the switch to allow users to download the audio from the Preview or Publish page by clicking More in the Actions column.

Data Sources panel

source :(Optional) The audio resource URL. This has the same effect as the audio link in the Style panel. If both are configured, the value in the Data Source panel takes precedence.

Advanced Panel

This widget does not support interaction events.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the audio interface request is completed	The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

   • Action

     Action	Description
     Request Audio Interface	Requests server data again, using data from an upstream processing node or layer node as parameters. For example, if the API data source is https://api.test and the data passed to the request audio interface is { id: '1'}, the final request URL becomes https://api.test?id=1.
     Import Audio Interface	Imports pre-processed data in the widget's drawing format for redrawing, without re-requesting server data. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     Start the playback	Start playing the audio. No parameters are required.
     Pause playback	Pause audio playback. No parameters are required.
     End playback	Stop audio playback. No parameters are required.
     Move	Move the widget to a specified location. See the data example below. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggle the visibility of the widget. No parameters are required.
     Display	Show the widget. See the data example below. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the widget. See the data example below. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically update widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data, then modify the style field for the data processing node in Blueprint Editor.