1# @ohos.multimedia.avVolumePanel (Volume Panel) 2 3The avVolumePanel module provides the capability of displaying the system volume panel for users to adjust the volume. 4 5An application cannot directly adjust the system volume. However, it can invoke the system volume panel for users to adjust the volume. When the user adjusts the volume, a volume prompt UI is displayed to explicitly notify the user that the system volume changes. 6 7 8> **NOTE** 9> 10> - The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version. 11> - The sample effect is subject to the real device in use. Currently, DevEco Studio Previewer cannot display the actual volume or adjust the volume. 12> - **Device restrictions** 13> - Currently, this module cannot be used on 2-in-1 devices. 14> - On wearable devices, the module can be used to adjust the system volume, but no UI is displayed. You need to design the UI by yourself. 15 16## Modules to Import 17 18```js 19import { AVVolumePanel } from '@kit.AudioKit'; 20``` 21 22## Properties 23 24The [universal properties](../apis-arkui/arkui-ts/ts-component-general-attributes.md) are supported. 25 26## AVVolumePanel 27 28AVVolumePanel({volumeLevel?: number, volumeParameter?: AVVolumePanelParameter}) 29 30Volume panel, which can be used to display the volume adjustment panel in your application. 31 32**Decorator**: [@Component](../../quick-start/arkts-create-custom-components.md) 33 34**Atomic service API**: This API can be used in atomic services since API version 12. 35 36**System capability**: SystemCapability.Multimedia.Audio.Volume 37 38| Name| Type| Mandatory| Decorator | Description | 39| -------- | -------- | -------- |--------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 40|volumeLevel | number | No| \@Prop | Target volume. The value must be between the minimum volume and the maximum volume supported by the device. If the value is greater than the maximum volume supported, the maximum volume is used. If the value is less than the minimum volume supported, the minimum volume is used. For details about how to obtain the maximum and minimum volume values, see [AudioVolumeGroupManager](../apis-audio-kit/js-apis-audio.md#audiovolumegroupmanager9).| 41|volumeParameter | [AVVolumePanelParameter](#avvolumepanelparameter) | No| \@Prop | Custom parameter of the volume panel. If this parameter is not passed in, the system volume bar is invoked. | 42 43## AVVolumePanelParameter 44 45Describes the volume panel parameters. 46 47**Atomic service API**: This API can be used in atomic services since API version 12. 48 49**System capability**: SystemCapability.Multimedia.Audio.Volume 50 51| Name| Type| Mandatory| Description 52| -------- | -------- | -------- | -------- | 53|position | [Position](../apis-arkui/arkui-ts/ts-types.md#position) | No| Position of the volume panel.| 54 55## Events 56 57The [universal events](../apis-arkui/arkui-ts/ts-component-general-events.md) are supported. 58 59## How to Use 60 611. When customizing the volume bar, you are advised to use the volume change listener of the audio framework to obtain the volume type (**volumeEvent.volumeType**), volume level (**volumeEvent.volume**), and whether to display the volume bar (**volumeEvent.updateUi**). The applications can determine whether to handle the current data and display their custom volume bar. For details, see [Volume Change Callback](js-apis-audio.md#onvolumechange9). 622. To ensure users are aware of volume changes, applications are not allowed to adjust the volume in the background. The system will take corresponding control measures. 63 64## Example 65 66Refer to the sample code below to develop a volume panel: 67 68```ts 69import { AVVolumePanel } from '@kit.AudioKit'; 70 71@Entry 72@Component 73struct Index { 74 75 @State volume: number = 0; 76 77 build() { 78 Row() { 79 Column() { 80 AVVolumePanel({ 81 volumeLevel: this.volume, 82 volumeParameter: { 83 position: { 84 x: 100, 85 y: 200 86 } 87 } 88 }) 89 } 90 }.width('50%').height('50%') 91 } 92} 93``` 94 95 <!--no_check-->