Audio Plugin

Audio plugin allows the user to share audio files

Add A Audio!

Usage

/* Editor */

import { RicosEditor } from 'ricos-editor';

import { pluginAudio } from 'wix-rich-content-plugin-audio';

<RicosEditor plugins={[pluginAudio(AudioConfig)]} />;

/* Viewer */

import { RicosViewer } from 'ricos-viewer';

import { pluginAudio } from 'wix-rich-content-plugin-audio/viewer';

<RicosViewer plugins={[pluginAudio(AudioConfig)]} />;

Audio Config API

disableDownload should be set in the mediaSettings of the editor.

disableDownload?: boolean;

Showcase of Audio without download

Dear FearKota The Friend

0:00

getAudioUrl

This function take the id and form a full URL (invoked when rendering audio which has relative URL).

getAudioUrl?: (src: { id: string }) => string;

handleFileSelection

Here you can call your custom audio upload functionality

handleFileSelection?: (updateEntity: ({ data: dataType }) => void) => void;

dataType =

{

name?: string,

authorName?: string,

audio: {

src: {id?: string, url?: string},

duration?: number,

},

};

handleFileUpload

Use for native file upload

handleFileUpload?: (file: File, updateEntity: ({ data: dataType }) => void) => void;

dataType =

{

name?: string,

authorName?: string,

audio: {

src: {id?: string, url?: string},

duration?: number,

},

};

Sound Cloud Plugin

SoundCloud toolbar button is part of the audio plugin. To use it we need to expose a button with exposeButtons:

see documentation above.

Add A SoundCloud!

/* Editor */

import { RicosEditor } from 'ricos-editor';

import { pluginAudio, audioButtonsTypes } from 'wix-rich-content-plugin-audio';

<RicosEditor plugins={[pluginAudio({ exposeButtons: [audioButtonsTypes.soundCloud] })]} />;

/* Viewer */

import { RicosViewer } from 'ricos-viewer';

import { pluginAudio } from 'wix-rich-content-plugin-audio/viewer';

<RicosViewer plugins={[pluginAudio(AudioConfig)]} />;

exposeButtons

The buttons exposed by the plugin

exposeButtons?: array;

Example value:

[audioButtonsTypes.audio, audioButtonsTypes.soundCloud, audioButtonsTypes.spotify];

Spotify Plugin

Spotify toolbar button is part of the audio plugin. To use it we need to expose a button with exposeButtons:

see documentation above.

Add A Spotify!

/* Editor */

import { RicosEditor } from 'ricos-editor';

import { pluginAudio, audioButtonsTypes } from 'wix-rich-content-plugin-audio';

<RicosEditor plugins={[pluginAudio({ exposeButtons: [audioButtonsTypes.spotify] })]} />;

/* Viewer */

import { RicosViewer } from 'ricos-viewer';

import { pluginAudio } from 'wix-rich-content-plugin-audio/viewer';

<RicosViewer plugins={[pluginAudio(AudioConfig)]} />;

exposeButtons

The buttons exposed by the plugin

exposeButtons?: array;

Example value:

[audioButtonsTypes.youTube, audioButtonsTypes.audio, audioButtonsTypes.soundCloud];