---
title: Lighting Music Rhythm Library Expansion
---

## Features Introduction

### Prerequisites

#### Applicable Scope

This extension is applicable to lighting categories with music rhythm functions, achieving visualization of the development process while significantly enhancing development efficiency.

#### Applicable Scenarios
- The product has music rhythms dp (music_data or mic_music_data), and there is also a requirement to develop music rhythms.

### Features

- Cloud Rhythm Library
- Local Rhythm Library
- App Rhythm Library

## Usage Process

### Installation

1. In Tuya MiniApp Tools, open the device tool, authorize login, and select a device from the device list. Click to enter the device page.

<Image src="https://images.tuyaus.com/content-platform/hestia/17304287706174b3ed515.png" style={{zoom:'50%'}} />

2. On the device page, click on 'Extension Management' in the top right corner to enter the extension market.

<Image src="https://images.tuyaus.com/content-platform/hestia/173042875702b6e3cf658.png"  style={{zoom:'50%'}} />

3. In the extension market, find '面板 IDE 照明律动库扩展' and click install.

<Image src="https://images.tuyaus.com/content-platform/hestia/1730428677aac504ba863.png"  style={{zoom:'50%'}} />

### Usage

**1. After a successful installation, an entry for 'Music Library' will appear in the top navigation bar on the device page. Click 'Rhythm Library' to enter the rhythm library management page.**

<Image src="/images/panel-plugins/dev-music/music2_en.png" style={{zoom:'100%'}} />

**2. On the rhythm library management page, you can develop the cloud rhythm library, local rhythm library, and App rhythm library.。**

**2.1 Cloud Rhythm Library**

  2.1.1 Switch to the cloud rhythm library<br/>
  2.1.2 Click to inject rhythm library code capability<br/>
  <Image src="/images/panel-plugins/dev-music/music3_en.png" style={{zoom:'100%'}} />
  <br/>
  2.1.3 If already injected, a confirmation box will pop up. After confirmation, the code will be overwritten and injected into the project.
  <Image src="/images/panel-plugins/dev-music/music5_en.png" style={{zoom:'100%'}} />
  2.1.4 Reference the corresponding code in the project to complete the development.

**Attention⚠️: The online scenario library requires activation of advanced capabilities. You can directly consult in the official group or post inquiries at https://tuyaos.com/viewforum.php?f=10.**

```tsx
import { useDevice } from '@ray-js/panel-sdk';
import { jumpToCoolBar } from '@/standModel/musicModel/CloudMusic';

type Props = {};

export const Demo: React.FC<Props> = ({ style }) => {
  const { devInfo } = useDevice();

  const handleJumpToCoolBar = () => {
    const { devId, groupId } = devInfo || {};
    jumpToCoolBar(devId, groupId);
  };

  return (
    <View onClick={handleJumpToCoolBar}>
      Jump to the online rhythm library
    </View>
  );
};
```

**2.2 Local Device Rhythm**

  2.2.1 Switch to local rhythm library<br/>
  2.2.2 Select the desired rhythm effects, you can choose one or select all.<br/>
  2.2.3 After selecting the desired effect items, click Rhythm Library Code Ability Injection.<br/>
  <Image src="/images/panel-plugins/dev-music/music4_en.png" style={{zoom:'100%'}} />
  <br/>
  2.2.4 If it has already been injected, a confirmation box will pop up, and after confirmation, the code will be overwritten and injected into the project.
  <Image src="/images/panel-plugins/dev-music/music5_en.png" style={{zoom:'100%'}} />
  2.2.5 By referencing the corresponding code in the project, you can complete the development. (If there are custom development requirements, you can modify the corresponding code in the `@/standModel/musicModel/LocalMusic` folder for adaptation.)
```tsx
import LocalMusic from '@/standModel/musicModel/LocalMusic';

export const Music: React.FC<Props> = ({ style }) => {
  return (
    <View style={style} className={styles.list}>
      <LocalMusic />
    </View>
  );
};
```

**2.3 App Rhythm**

  2.3.1 Switch to App Rhythm Library<br/>
  2.4.2 Select the desired rhythm effects, you can choose either one or all of them<br/>
  2.3.3 After selecting the desired effect items, click Rhythm Library Code Injection<br/>
  <Image src="/images/panel-plugins/dev-music/music6_en.png" style={{zoom:'100%'}} />
  <br/>
  2.3.4 If already injected, a confirmation box will pop up. After confirmation, the code will be injected into the project.
  <Image src="/images/panel-plugins/dev-music/music5_en.png" style={{zoom:'100%'}} />
  2.3.5 By referencing the corresponding code in the project, you can complete the development (if there are custom development requirements, you can modify the corresponding code in the `@/standModel/musicModel/AppMusic` folder to adapt).
```tsx
import AppMusic from '@/standModel/musicModel/AppMusic';

export const Music: React.FC<Props> = ({ style }) => {
  return (
    <View style={style} className={styles.list}>
      <AppMusic />
    </View>
  );
};
```

## Precautions
- Note ⚠️: The online rhythm library requires the activation of advanced capabilities. You can directly consult in the official group or post inquiries at https://tuyaos.com/viewforum.php?f=10.
- Note ⚠️: If the cloud rhythm library fails to redirect, please check whether it has been configured in `app.config.ts`.
```json
"functionalPages": {
  "rayPlayCoolFunctional": {
    "appid": "tyg0szxsm3vog8nf6n"
  }
}
```

## Release Notes

### v0.0.9

Release Date: 2024.10.25

- Support cloud rhythm library
- Support for local rhythm library
- Support App Rhythm Library