Simply Aloud widget integration

The Simply Aloud widget is a simple script that let your site to integrate as many players with speakered contents as you desire.

Table of contents


Integration via JavaScript

This is the simplest way to integrate our plug-in:

<html>
    <body>
        <div id="simplyaloud_1" class="simplyaloud" data-simplyaloud='{"contentId":"<ID_1>"}'></div>
        <div id="simplyaloud_2" class="simplyaloud" data-simplyaloud='{"contentId":"<ID_2>"}'></div>
        ...
        <!-- === ==== Simply Aloud === ==== -->
        <div id="simplyaloud_player_global"></div>
        <script type="text/javascript" src="https://storage.simplyaloud.com/public/widget/1.1/widget.js"></script>
        <script type="text/javascript">
            (function($) {
                jQuery.simplyaloud({ client: "<API_CLIENT_ID>", global: {selector: "#simplyaloud_player_global"} });
            })(jQuery);
        </script>
        <!-- === ==== Simply Aloud === ==== -->
     </body>
</html>

The Simply Aloud widget needs jQuery to work properly, if your site doesn’t use jQuery, add this script before the Simply Aloud widget.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>

Initialization and usage

You can initialize and use the Simply Aloud widget in two different ways:

  1. declaring the simplyaloud plugin and setting the single contents inside each player container
  2. declaring all requested players in the JavaScript initialization code

Mode 1. Inline tags parameters

Insert wherever you want any container with unique identifiers and with parameters (as JSON) inside the data-simplyaloud attribute.

<div id="simplyaloud_1" class=”simplyaloud” data-simplyaloud='{"contentId":"<ID_123>"}'></div>
<div id="simplyaloud_2" class=”simplyaloud” data-simplyaloud='{"contentId":"<ID_456>"}'></div>
...

Insert an empty playlist container with a unique id

<div id="simplyaloud_player_global"></div>

Import jquery.js (your site probably has already imported jQuery, in this case skip this step)

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>

Import widget.js (After jQuery and after all the containers that will wrap the players)

<script type="text/javascript" src="https://storage.simplyaloud.com/public/widget/1.1/widget.js"></script>

Insert the initialization code (After scripts import and after all the containers that will wrap the players)

<script type="text/javascript">
    (function($) {
        jQuery.simplyaloud({
            client: "<API_CLIENT_ID>",
            global: {selector: "#simplyaloud_player_global"}
        });
    })(jQuery);
</script>

Mode 2. All in JavaScript initialization code

Insert any player wherever you want. Each player must have a uniquely identifiable div player.

…
<div id="simplyaloud_1" class="simplyaloud"></div>
…
<section id="main">
    <div class="simplyaloud simplyaloud_player_main"></div>
</section>
…

Insert the initialization code after the import of widget.js and the container tags.

<script type="text/javascript">
    (function($) {
        jQuery.simplyaloud({
            client: "<API_CLIENT_ID>",
            global: {selector: "#simplyaloud_player_global"},
            players: [
                {"selector" : "#simplyaloud_1", "contentId" : "<ID_1>"},
                {"selector" : "body #main .simplyaloud.simplyaloud_player_main", "contentId" : "<ID_2>"}
            ]
        });
    })(jQuery);
</script>

Customize appearance

With some CSS option you can change the apperance of the player. You can follow the next example and change:

In the global player (visible only if you have more then one single player)

Example:

<style type="text/css">
    /* SINGLE */
    .simplyaloud {font-size: 0.75em;}
    .simplyaloud .simplyaloud_container .simplyaloud_player .simplyaloud_player_controls .simplyaloud_player_controls_button {background: #900;}
    .simplyaloud .simplyaloud_container .simplyaloud_player .simplyaloud_player_progress .jp-play-bar {background: #900;}
    /* GLOBAL */
    .simplyaloud_player_global .jp-audio .jp-type-playlist .jp-progress .jp-seek-bar .jp-play-bar {background: #900;}
    .simplyaloud_player_global {font-size: 12px; line-height:normal;}
</style>

Parameters

Field Type Description
client String (mandatory) Your API client ID
global Object (mandatory) Reference to the global player container
global.selector String (mandatory) Unique indentifier of the container of the global player
players Array of objects Players you need in your page if you are not using in tag declaration (with data-simplyaloud attribute)
players[].selector String (mandatory) Unique identifier of the container for the current player
players[].contentId String (mandatory) Shared content ID
layout Object Layout for the players in the page
layout.playerSingle String Refers to the single player
layout.playerSingle.code String (mandatory) Layout code
layout.playerGlobal String Refers to the global player
layout.playerGlobal.code String (mandatory) Layout code

Integration via iFrame

If you cannot edit the source HTML of your articles, but only the rich text editor (WYSIWYG), use the iFrame integration which does not require JavaScript.

Limitations

With the iFrame integration (without JavaScript) the height of the widget is fixed. You cannot take advantage of the playlist functionality. You cannot customize color and layout of the widget player.

Base URL

The src base URL is

https://widget.simplyaloud.com/single

URL querystring parameters

iFrame attributes

Example

<iframe src="https://widget.simplyaloud.com/single?client=a1B2c3D4e5F6g7H8i9L0&layoutCode=single_article&contentId=A1B2C3" width="100%" height="150" frameBorder="0" scrolling="no"></iframe>