帝国cms百度朗读代码插件用古诗类的比较不错

2021-05-09 17:01:41 帝国cms教程 62

--------------------------------------------------------
    //朗读
  $('.ld').on('click', function () { 
    var ldid = $(this).attr('data-id');
  if (!$(this).hasClass('ld-on')) {
  $(this).addClass("ld-on");
        var ttsDiv = document.getElementById('bdtts_div');
        var ttsAudio = document.getElementById('tts_autio_'+ldid);
        var ttsText = $('#gs-play-'+ldid).html();
        if(ttsAudio) {//js判断元素是否存在
  ttsDiv.removeChild(ttsAudio);
  }
        var au1 = '<audio id="tts_autio_'+ldid+'" autoplay="autoplay">';
        var sss = '<source id="tts_source_'+ldid+'" src="/text2audio?tex=' + ttsText + '&cuid=dict&lan=ZH&ctp=2&pdt=30&vol=9" type="audio/mpeg">';
        var eee = '<embed id="tts_embed_'+ldid+'"+ldid height="0" width="0" src="">';
        var au2 = '</audio>';
        ttsDiv.innerHTML = au1 + sss + eee + au2;
        ttsAudio = document.getElementById('tts_autio_'+ldid);
        ttsAudio.play();//播放
  }
    else
    {
      $(this).removeClass("ld-on");
        ttsAudio = document.getElementById('tts_autio_'+ldid);
        ttsAudio.pause();// 暂停
  }
  });
--------------------------------------

帝国CMS 模板代码：
-------------------------------------
播放按钮链接：
<i class="ld" data-id="[!--id--]" title="[!--title--]朗诵">[!--title--]朗读</i>
----------------------------------------------------------------

播放内容：
<p hidden="hidden" id="gs-play-[!--id--]"><?=strip_tags($navinfor['smalltext'])?></p>

----------------------------------------------------------------------
调用播放器代码：
<div id="bdtts_div"></div>
---------------------------------------------------