Embed audio player using code snippet

To embed Veedmo audio player using manual JavaScript configuration you need to add, to your website, specially prepared JavaScript code snippet and manually set all configuration options in it.

JavaScript code snippet (sample)

Specially prepared JavaScript code snippet (mentioned below) can be added to website in various ways (e.g. via 3rd party frameworks, Google Tag Manager, ...); we recommend to inject it before closing </body> tag as it requires website's DOM (Document Object Model) to be loaded, so player could be injected in given (in configuration) query selector on page.

(function veedmoAudioPlayer(j) {
  (function veedmoEl() {
    var elem = document.querySelector(j.query_selector);
    if (elem) {
      if (!window.veedmoAudioLoad) {
        window.veedmoAudioLoad = [];
        var script = document.createElement('script');
        script.onload = function () {
          for (var i = 0; i < window.veedmoAudioLoad.length; i++) {
            window.veedmoAudioLoad[i]();
          }
        };
        script.src = "//cdn.cronos.pw/cdn/audio/v1/current.js";
        document.body ? document.body.appendChild(script) : document.head.appendChild(script);
      }
      window.veedmoAudio ? new window.veedmoAudio().runManual(j) : window.veedmoAudioLoad.push(function() { new window.veedmoAudio().runManual(j); });
    } else {
      setTimeout(veedmoEl, 100);
    }
  })();
})({
  "partner_id": UNIQUE_NUMERIC_PARTNER_ID,
  "query_selector": "#element",
  "insert_method": 0,
  "audio_url": "https://cdn.veedmo-static.com/cdn/samples/audio/sample-audio.mp4",
  "audio_title": "Sample audio title",
  "tag_url_desktop": "",
  "tag_url_mobile": "",
  "position": 3,
  "corner": "bl",
  "vertical_margin": 20,
  "horizontal_margin": 20,
  "call_to_action_text": "Listen to this audio"
});

Configuration parameters

Below there is a list of supported configuration parameters. * - mandatory parameter.

Param	Description
partner_id *	Unique numeric ID of Veedmo partner account. Contact us to obtain your partner account and partner_id.
query_selector *	JavaScript querySelector (e.g. id, class name) of the page element to inject player into. IMPORTANT: do not use veedmo as your query selector name as it is system reserved name.
audio_url *	URL of audio file. Mandatory, if audio_ssml is not defined. Optional, if audio_ssml is defined.
audio_ssml *	Text to be read by player's AI text-to-speach mechanism (text can be passed in plain text format or SSML format). If both audio_ssml and audio_url are defined in config, audio_ssml will always be used as primary audio source. Mandatory, if audio_url is not defined. Optional, if audio_url is defined.
audio_lang	Language of read text (set together with audio_ssml parameter). Possible values: en - English th - Thai dk - Danish es - Spanish it - Italian de - German fr - French se - Swedish no - Norwegian If not defined, English language will be used.
tag_url_desktop	URL(s) of ad tag(s), or pure XML(s) content of ad(s), to display on desktop devices. If empty, no ad(s) will be displayed on desktop devices. Handles single URL, or XML content of ad tag, or multiple URLs / XMLs content, via waterfall mechanism. To set up waterfall mechanism, pass array of objects, where each object contains ad tag URL / XML content, and a type (acceptable types are: vast - for ad tag URL(s), and vastxml - for ad XML(s) content). Example: "tag_url_desktop": [   {     url: "AD_TAG_1 URL",     type: "vast"   },   {     url: "AD_TAG_2 pure XML content",     type: "vastxml"   }, ], Waterfall mechanism waits max. 5sec for each ad request to return response. If no ad, empty ad or ad error is returned, mechanism jumps to next ad tag, in set order, and performs request.
tag_url_mobile	URL(s) of ad tag(s), or pure XML(s) content of ad(s), to display on mobile devices. If empty, no ad(s) will be displayed on mobile devices. Handles single URL, or XML content of ad tag, or multiple URLs / XMLs content, via waterfall mechanism. To set up waterfall mechanism, pass array of objects, where each object contains ad tag URL / XML content, and a type (acceptable types are: vast - for ad tag URL(s), and vastxml - for ad XML(s) content). Example: "tag_url_mobile": [   {     url: "AD_TAG_1 URL",     type: "vast"   },   {     url: "AD_TAG_2 pure XML content",     type: "vastxml"   }, ], Waterfall mechanism waits max. 5sec for each ad tag request to return response. If no ad, empty ad or ad error is returned, mechanism jumps to next ad tag, in set order, and performs request.
responsive	Possible values: 1 - player will resize to the parent container width 2 - player will have fixed size (requires to set width param) If not defined, 1 (responsive size) will be used.
width	Player width, in pixels (px). Required only if responsive is set to 2.
floating_width	Floating player width, in pixels (px). Required only if position is set to 2 or 3. If not defined, 65 (65px) will be used.
insert_method	Possible values: 0 - inject player inside "query_selector" target element (appendChild) 1 - inject player before "query_selector" target element (beforebegin) 2 - inject player inside "query_selector" target element, after its last child (beforeend) 3 - inject player inside "query_selector" target element, before its first child (afterbegin) 4 - inject player after "query_selector" target element (afterend) If not defined, 0 (appendChild) will be used.
ad_title	Text displayed in player (instead of audio_title) only when ad is playing. If not defined, Advertising will be used.
audio_title	Title of audio added in audio_url param. By default it's empty.
position	Possible values: 1 - player will appear in page content 2 - player (floating) will appear in corner of the screen (corner defined in corner param) 3 - player will appear in page content, and switch to sticky (floating) mode when min. 50% of player height will be out of browser's viewport (sticky mode screen corner is defined in corner param) If not defined, 1 (in page content) will be used. Recommended setting: 3 (to maximize viewability).
corner	Corner of the screen in which floating player will appear. Required only if position is set to 2 or 3. Possible values: bl - bottom left corner of the screen br - bottom right corner of the screen tl - top left corner of the screen tr - top right corner of the screen If not defined, br (bottom right) will be used.
vertical_margin	Floating player distance from top / bottom (depending on set corner param value) edge of the screen, in pixels (px). Required only if position is set to 2 or 3. If not defined, 20 (20px) will be used.
horizontal_margin	Floating player distance from left / right (depending on set corner param value) edge of the screen, in pixels (px). Required only if position is set to 2 or 3. If not defined, 20 (20px) will be used.
block_if_adblock	Player behaviour when adblock is detected in browser, and tag_url_desktop or tag_url_mobile are set. Possible values: 0 - play audio despite blocked ad 1 - block audio and display custom message in player (message defined in adblock_message param) If not defined, 1 (block audio) will be used.
adblock_message	Custom message content to display in player, if adblock was detected and enabled. If not defined, To play this audio please disable your adblock. will be used.
close_btn_time_offset	Time after which X button will appear in player, in milliseconds (ms). Required only if position is set to 2 or 3. If not defined, 3000 (3sec) will be used.
enable_sticky_on_outside_viewport	Sticky mode (position set to 3) behaviour depending on ad status and player visibility in viewport. Possible values: 0 - player will switch to sticky mode after page visitor will pass it, while scrolling the page 1 - player will switch to sticky mode after page visitor will pass it, while scrolling the page, and additionally straight after player was loaded on page (only if player was loaded on page out of viewport) If not defined, 0 (switch to sticky mode after page visitor will pass player, while scrolling the page) will be used. Recommended setting: 1 (to maximize ad viewability).
consent_string_timeout	Delays player load to wait for page visitor to accept page's privacy policies, in seconds. If not defined, player on load (before requesting ad) will check (for 5 seconds) page visitor's privacy policies consent status and use it when requesting ad.
call_to_action_text	Text displayed in player after it has been loaded on page. By default it's empty.
branding	Customizable player branding. Branding can appear in two forms: corner - 20px height (max. 70px width) clickable image in top right corner of player bar - 16px height bar (with 10px height image) on bottom of player (appears always, when configured - hidden by default) corner and bar are objects, with 3 configurable parameters each: text - text which will appear (on hover of corner image, or on bottom bar) link - URL which will be opened on click on text set in text or / and image image - URL of image (formats: *.jpg, *.png, *.svg) which will appear in corner, or on bar (after the text) If not defined, only Powered by Veedmo will appear in top right corner of player.
customization	Customizable colors of elements of player UI. Following elements' colors can be customized: controls_color - HEX RGB (e.g. FF0000) or text value (e.g. red) play_control_background_color - HEX RGB (e.g. FF0000) or text value (e.g. red) play_control_color - HEX RGB (e.g. FF0000) or text value (e.g. red) play_progress_bar_color - HEX RGB (e.g. FF0000) or text value (e.g. red) player_background_color - HEX RGB (e.g. FF0000) or text value (e.g. red) player_border_color - HEX RGB (e.g. FF0000) or text value (e.g. red)

Live example

Below there is an the example showing how Veedmo audio player can be embedded on page using manual JavaScript configuration. Click on "Result" tab to see the result.