Add and manage sounds

[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1448985248097{margin-bottom: -10px !important;}”]

Add and manage sounds

[/vc_column_text][vc_column_text css=”.vc_custom_1448985267374{margin-right: 5% !important;}”]

Sounds are an important addition to any interactive experience. Here is how you add them on your pages.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1448985295808{margin-left: 5% !important;}”]

Here are the different options proposed by Racontr that we will approach:

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

First step: Add a sound on a page

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]Firstly, you have to import your sound in your library. Once in your editor, you have to:

  1. Click on the “+” icon on the menu on the top left,
  2. then on “Audio”,
  3. choose your sound
  4. and validate.

It will display on your page once you validate your choice.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5727″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463745896412{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

Sound properties

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]

  1. Click on your sound and edit its properties in the panel that should appear automatically (otherwise you can open it by clicking on the gears-shaped icon). You can change the name of the sound and add a class for your own custom code.
  2. Manage volume: choose the sound volume. You can create fade by adding an action on an element. Display controls, autoplay, loop, opacity.
  3. Duplicate and remplace the sound on the page. Change the opacity of the element.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5724″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463745915449{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]

Saving

Log in with your credentials

or    

Forgot your details?