# Integration

### Introduction

We have made the script very easy to use while also keeping it very customizable.

After successfully installing the resource, you should start by completing these following steps:

### **1️⃣** Speaker creation <a href="#id-1-speaker-creation" id="id-1-speaker-creation"></a>

1. **Speaker menu**

Players can create new speakers through the speakers menu by default.

The default command for speakers menu is <mark style="color:blue;">/speakers</mark>.

1. **Inventory**

If you don't want the players to be able to create new speakers through the command, this resource also supports inventory based speakers.

To make this feature work, you will need to change <mark style="color:blue;">creationMethod</mark> to inventory in <mark style="color:blue;">editable\_server/config.lua</mark> and create the speaker item in your inventory resource.

{% tabs %}
{% tab title="ox\_inventory" %}
All speakers use the same item. The difference is in item metadata (image, label, description).&#x20;

Add this section to <mark style="color:blue;">ox\_inventory/data/items.lua</mark>

```lua
['speaker'] = {
    label = 'Speaker',
    weight = 0,
    description = 'Speaker.',
    consume = 0,
    server = {
        export = 'rahe-speakers.speaker'
    }
},
```

If you didn't name the item <mark style="color:blue;">speaker</mark>, adjust the <mark style="color:blue;">inventoryItemId</mark> in <mark style="color:blue;">editable\_server/config.lua</mark> accordingly.
{% endtab %}

{% tab title="qb\_inventory" %}
When using qb-inventory, all created speaker types are automatically added and made usable by the resource.&#x20;

However, inventory images must be added manually.

Add all speaker images to <mark style="color:blue;">qb-inventory/html/images/</mark>.&#x20;

For default seeded speaker images:&#x20;

Add <mark style="color:blue;">speaker\_retro.png</mark> to <mark style="color:blue;">qb-inventory/html/images/</mark>

<figure><img src="https://2340261896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH10xunhFUE8KSIDcSB6v%2Fuploads%2FobivRQi2SUYvzFfR7U5k%2Fboombox%20(1).png?alt=media&#x26;token=6524376c-b667-4705-8e50-9d2e54ec907e" alt=""><figcaption><p>speaker_retro.png</p></figcaption></figure>

Add <mark style="color:blue;">speaker\_vibe.png</mark> to <mark style="color:blue;">qb-inventory/html/images/</mark>

<figure><img src="https://2340261896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH10xunhFUE8KSIDcSB6v%2Fuploads%2Ff2AeUsuXNjJBRgk8lIC8%2Fspeaker1%20(1).png?alt=media&#x26;token=7e262b47-71d9-41ba-a804-0e2c41a89ada" alt=""><figcaption><p>speaker_vibe.png</p></figcaption></figure>

Add <mark style="color:blue;">speaker\_beat.png</mark> to <mark style="color:blue;">qb-inventory/html/images/</mark>

<figure><img src="https://2340261896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH10xunhFUE8KSIDcSB6v%2Fuploads%2FLTtH1CDLZ2xSpfuMhUdc%2Fspeaker2%20(1).png?alt=media&#x26;token=76fa535c-7c94-4a49-991f-cf0fdaf4ed35" alt=""><figcaption><p>speaker_beat.png</p></figcaption></figure>

Add <mark style="color:blue;">speaker\_blast.png</mark> to <mark style="color:blue;">qb-inventory/html/images/</mark>

<figure><img src="https://2340261896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH10xunhFUE8KSIDcSB6v%2Fuploads%2Fv9MSlVGfR32Twjt0PNiO%2Fspeaker3%20(1).png?alt=media&#x26;token=0f119fcc-e5d4-4a76-962c-77c3920555bb" alt=""><figcaption><p>speaker_blast.png</p></figcaption></figure>
{% endtab %}

{% tab title="qs-inventory" %}
When using qs-inventory, you need to add every speaker item to the correct items file. \
You also have to include every speaker image in the proper directory. \
Default speakers are already provided for you. \
If you create new speaker types, you'll need to add these yourself.

#### 1. Adding items <a href="#id-1.-adding-items" id="id-1.-adding-items"></a>

🚩When using QB, add this section to <mark style="color:blue;">qb-core/shared/items.lua</mark>&#x20;

🚩When using ESX, add this section to <mark style="color:blue;">qs-inventory/shared/items.lua</mark>

```lua
['speaker_retro'] = {
    name = 'speaker_retro',
    label = 'Speaker Retro',
    weight = 1000,
    type = 'item',
    image = 'speaker_retro.png',
    unique = true,
    useable = true,
    shouldClose = true,
    description = 'Low volume, range and quality.',
},
['speaker_vibe'] = {
    name = 'speaker_vibe',
    label = 'Speaker Vibe',
    weight = 1000,
    type = 'item',
    image = 'speaker_vibe.png',
    unique = true,
    useable = true,
    shouldClose = true,
    description = 'Good volume, range and quality.',
},
['speaker_beat'] = {
    name = 'speaker_beat',
    label = 'Speaker Beat',
    weight = 1000,
    type = 'item',
    image = 'speaker_beat.png',
    unique = true,
    useable = true,
    shouldClose = true,
    description = 'Great volume, range, quality and bass.',
},
['speaker_blast'] = {
    name = 'speaker_blast',
    label = 'Speaker Blast',
    weight = 1000,
    type = 'item',
    image = 'speaker_blast.png',
    unique = true,
    useable = true,
    shouldClose = true,
    description = 'Epic volume, range, quality, bass and filters.',
},
```

#### 2. Adding images <a href="#id-2.-adding-images" id="id-2.-adding-images"></a>

Add the following image file as <mark style="color:blue;">qs-inventory/html/images/speaker\_retro.png</mark>

<figure><img src="https://2340261896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH10xunhFUE8KSIDcSB6v%2Fuploads%2FobivRQi2SUYvzFfR7U5k%2Fboombox%20(1).png?alt=media&#x26;token=6524376c-b667-4705-8e50-9d2e54ec907e" alt=""><figcaption></figcaption></figure>

Add the following image file as <mark style="color:blue;">qs-inventory/html/images/speaker\_vibe.png</mark>

<figure><img src="https://2340261896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH10xunhFUE8KSIDcSB6v%2Fuploads%2Ff2AeUsuXNjJBRgk8lIC8%2Fspeaker1%20(1).png?alt=media&#x26;token=7e262b47-71d9-41ba-a804-0e2c41a89ada" alt=""><figcaption></figcaption></figure>

Add the following image file as <mark style="color:blue;">qs-inventory/html/images/speaker\_beat.png</mark>

<figure><img src="https://2340261896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH10xunhFUE8KSIDcSB6v%2Fuploads%2FLTtH1CDLZ2xSpfuMhUdc%2Fspeaker2%20(1).png?alt=media&#x26;token=76fa535c-7c94-4a49-991f-cf0fdaf4ed35" alt=""><figcaption></figcaption></figure>

Add the following image file as <mark style="color:blue;">qs-inventory/html/images/speaker\_blast.png</mark>

<figure><img src="https://2340261896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH10xunhFUE8KSIDcSB6v%2Fuploads%2Fv9MSlVGfR32Twjt0PNiO%2Fspeaker3%20(1).png?alt=media&#x26;token=0f119fcc-e5d4-4a76-962c-77c3920555bb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="OTHER" %}
\
Check <mark style="color:blue;">editable\_server/framework.lua</mark> for ox\_inventory, qb-inventory and es\_extended examples.

Use these to develop your custom solution, heres' some pointers:

### 🚩For inventories with registerUsableItem <a href="#for-inventories-with-registerusableitem" id="for-inventories-with-registerusableitem"></a>

#### ⚒️ With metadata support (images and labels): <a href="#with-metadata-support-images-and-labels" id="with-metadata-support-images-and-labels"></a>

\- Create item (itemId must match inventoryItemId in editable\_server/config.lua)&#x20;

\- Make the item usable (prepareInventory function in editable\_server/framework.lua)&#x20;

\- Fill out metadata function (getItemDataForSpeakerType in editable\_server/framework.lua) - make sure label and image keys match your inventory&#x20;

\- When item is used, trigger event with player source, typeId from metadata and item's slot

```lua
TriggerEvent('rahe-speakers:server:speakerItemUsed', source, item.metadata.typeId, item.slot)
```

#### ⚒️ Without metadata support: <a href="#without-metadata-support" id="without-metadata-support"></a>

\- Create items automatically (see example for QB in editable\_server/framework.lua) or manually - up to you&#x20;

\- Each speaker type must have its own item id matching the one assigned when creating the speaker type in-game.&#x20;

\- Make each item usable (prepareInventory function in editable\_server/framework.lua)&#x20;

\- When item is used, trigger event with player source and itemId that was used

```lua
TriggerEvent('rahe-speakers:server:itemUsedById', source, itemId)
```

### 🚩For inventories without registerUsableItem <a href="#for-inventories-without-registerusableitem" id="for-inventories-without-registerusableitem"></a>

#### ⚒️ With metadata support (images and labels): <a href="#with-metadata-support-images-and-labels-1" id="with-metadata-support-images-and-labels-1"></a>

\- Create item (itemId must match inventoryItemId in editable\_server/config.lua)&#x20;

\- Make item usable in your inventory resource&#x20;

\- Fill out metadata function (getItemDataForSpeakerType in editable\_server/framework.lua)&#x20;

\- Make sure label and image keys match your inventory&#x20;

\- When item is used, trigger event with player source, typeId from metadata and item's slot

```lua
TriggerEvent('rahe-speakers:server:speakerItemUsed', source, item.metadata.typeId, item.slot)
```

#### ⚒️ Without metadata support: <a href="#without-metadata-support-1" id="without-metadata-support-1"></a>

\- Create each item manually&#x20;

\- Each speaker type must have its own item id matching the one assigned when creating the speaker type in-game.&#x20;

\- Make each item usable in your inventory resource&#x20;

\- When item is used, trigger event with player source and itemId that was used

```lua
TriggerEvent('rahe-speakers:server:itemUsedById', source, itemId)
```

***

Note: When a player creates a new speaker type in-game, they assign it an item ID. This same ID must be used as the item ID in your inventory system. For example, if a player creates Club Speaker speaker type with item ID club\_speaker, you must create an inventory item with the same ID for this speaker type.
{% endtab %}
{% endtabs %}

If you didn't name the item speaker, adjust the inventoryItemId in editable\_server/config.lua accordingly.

### **️**2️⃣ Obtaining Youtube API key <a href="#id-2-obtaining-youtube-api-key" id="id-2-obtaining-youtube-api-key"></a>

A YouTube API key is required for certain features like queues and music history.&#x20;

We provide two detailed tutorials on how to obtain it: one text-based and one video.&#x20;

Choose whichever you prefer.

1. Video tutorial

{% embed url="<https://www.youtube.com/watch?v=LLAZUTbc97I>" %}

2. Text tutorial

> 1) Register or login into [Google Console Cloud](https://console.cloud.google.com/)
> 2) Skip to step 7 if you already have an account
> 3) Select your country and accept Terms of Service
> 4) Navigate to <mark style="color:blue;">APIs & Services</mark> > <mark style="color:blue;">Credentials</mark> in the left sidebar
> 5) Click <mark style="color:blue;">Create Project</mark>, fill in details, and click <mark style="color:blue;">Create</mark>
> 6) Once project is set up, click <mark style="color:blue;">Create Credentials</mark>
> 7) Select <mark style="color:blue;">API key</mark>
> 8) Copy the key and insert it into <mark style="color:blue;">editable\_server/config.lua</mark> -> <mark style="color:blue;">youtubeApiKey</mark>
> 9) Go to <mark style="color:blue;">Enabled APIs and Services</mark> in the left sidebar
> 10) Click <mark style="color:blue;">Enable APIs and Services</mark> at the top
> 11) Search for <mark style="color:blue;">YouTube Data API v3</mark> and select it
> 12) Click <mark style="color:blue;">Enable</mark>

All done! The script will now use youtube API to fetch music related data!