rs instructions

button markup

// raw markup

 <li class="page-options_item rs-button">
      <div id="readspeaker_button" class="rs_skip rsbtn_colorskin rs_preserve">
          <a id="rs_link" class="rsbtn_play page-options_link" accesskey="L" title="Listen with ReadSpeaker" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=5816&amp;lang=en_uk&amp;readid=readspeaker-content&amp;url=@(encodedUrl)" data-name="Listen" data-rsevent-id="rs_357211" role="button">
              <span class="icon icon-listen"></span> Listen
          </a>
          <a href="#" id="rs_placeholder" class="page-options_link" style="display: none;">
              <div class="pt-1">
                  <img class="pr-1" src="@Html.PatientCdnUrl("gfx/translate-loading.gif")" alt="Please wait..." /> Listen
              </div>
          </a>
      </div>
</li>

end of body

this is at the end of the body

<script>
  $(document).on('rs-load',function(){pasl('https://patient.azureedge.net/res/636378683031670982/p4/rs.config.min.js',function(){$(document).trigger('rs-conf-loaded');})});
  $(document).on('rs-conf-loaded',function(){pasl('https://f1-eu.readspeaker.com/script/5816/ReadSpeaker.js?pids=embhl',function(){ReadSpeaker.init();$(document).trigger('rs-initialized');})});
</script

p4.js (main js file)

in our main js file we have this which handles the call to rs-load ... and in turn loads config

$(function () {
    window.rsConf = { general: { usePost: true } };
    var rsLoadTriggered = false;

    $(".rs-button").on('mouseenter', function () {
        if (!rsLoadTriggered) {
            rsLoadTriggered = true;
            $(document).trigger('rs-load');
        }
    })
});

rs.config.js

// Once rs-load is trigered, we load our configuration from rs.config.js

if (!window.rsConf) { window.rsConf = {}; }
if (!window.rsConf.ui) { window.rsConf.ui = {}; }
window.rsConf.ui.rsbtnClass = 'rsbtn_colorskin';
window.rsConf.ui.player = [
	'<span class="rsbtn_box">',
    '   <span class="rsbutton"><i class="icon icon-listen"></i></span>',
	'	<a href="#" class="rsbtn_pause rsimg rspart rsbutton rsbtn_playbtn" title="Pause">',
	'		<i class="icon icon-pause"></i>',
    '       <i class="icon icon-play"></i>',
	'	</a>',
	'	<span class="rsbtn_progress_container rspart">',
	'		<span class="rsbtn_progress_played"></span>',
	'	</span>',
	'	<a href="javascript:void(0);" class="rsbtn_closer rsimg rspart rsbutton" title="Close player">',
	'		<i class="icon icon-remove"></i>',
	'	</a>',
	'	<span class="rsdefloat"></span>',
	'</span>'
];

teh re4st

Once this co0nfig, we load the actual external js from readspeaker in the callback ..
Once thats loaded we call ReadSpeaker.init(); in the callback of the external js