cas_speaker

※今後もツイキャスのバージョンアップで動かなくなることが予測されるので、気づいたらりしゃるまでよろしっく！
※2022/1/3-5：ブックマークレット用に微改修。音声切り替えボタン追加。※実質未対応だったfirefox対策。
※2022/1/30：古い録画（2021年5月以前）に対応できなくなっていたので修理。（あと前回のwiki更新説明文だけ変えてコード更新するの忘れてｔ）
URL：https://syaru.playing.wiki/d/cas_speaker ※コメント欄に貼り付けるときなどにどうぞ

概要
・ツイキャスのコメントを読上げてくれるスクリプトです。※PC用です。
・ライブ、録画共に利用可能。
・再生時間にコメントが連動しない古い録画でもコメントリプレイと組み合わせることで利用可能になります。

仕組みや制作意図など
・~~ツール配信では公式の提供する読上げ機能が利用できない、~~また他の人の配信を視聴するときもコメント読上げ機能がほしかった。

※読み上げ機能なくて不便だったので作ったんだけどいつの間にか公式にも実装されてｔ（公式発表見つからないので時期不明だけど2021年台後半の気配）

・TL読み上げスクリプト同様、文字列を読み上げる機能と、ページの更新を検知する機能を組み合わせ。

使い方（逆順になってます）
※PC用です、利用する場合は以下の操作をおこないます。
③以上、あとは再生に合わせて勝手に動いてくれるはずです。
②ブックマークバーにドロップしたショートカットをクリック。
①コメント読み上げを使いたいツイキャスの放送のページに行く
　※⓪は初回だけで大丈夫です。（修正のあった場合などは適宜差し替えてください。）
⓪以下の「オレンジ色のボタン」をブックマークバーにドラッグ＆ドロップ
 cas🔈

//CAS_SPEAKER 20220130ris 古い録画（2021年5月以前、要コメント併用）に対応。
//20211017ris 最新の環境に対応。20220103~05risブックマークレット用に微改修。音声切り替え機能追加。
//録画の方のクラス名前がライブと統合されて変わっていたもよう、あとspeechSynthesis.getVoices構成変更に対応、日本語が12から14に変更になっていたもよう。
//v20201013ris コメントリプレイ２に対応
//v20201006ris //"voiceの設定が必須になったもよう、ノータッチだったので実装。
//v20200126ris //"公式コード変更対応
//v20190922ris //"URL正規表現修正、読み上げクリアなど

//ref='https://qiita.com/munieru_jp/items/a6f1433652124a2165e4'
function cas_speaker(){
  //ここじゃ使えませんアラート
  let isTwitcasting = (~document.location.href.indexOf('twitcasting.tv/'));
  if(isTwitcasting==false){alert('ツイキャスのページから実行して下さい。'); return;}

//"RATEしゃべる速さ、PITCH声の高さ、VOLUME音の大きさ設定
  let RATE=1.4, PITCH=0.9, VOLUME=0.5;  let name_shorter=true;
  
  let ele=document.createElement('div');ele.id='speak_settings';
  ele.innerHTML='<style>#speak_settings{position:fixed;top:0;right:0;width:350px;z-index:1000;'
    +`background:rgba(222,222,222,0.5);text-align:right;}`
    +`#speak_settings>input{width:200px}</style><details open><summary style='text-align:left'>読み上げ設定</summary>`
    +`<span id='ssr'>[`+RATE.toFixed(2)+`]</span>SPEED<input id='speed_slider' type='range' name='speed' min='0' max='2.0' step='0.03125' value='1.4'><br/>`
    +`<span id='ssp'>[`+PITCH.toFixed(2)+`]</span>PITCH<input id='pitch_slider' type='range' name='pitch' min='0' max='2.0' step='0.03125' value='0.9'><br/>`
    +`<span id='ssv'>[`+VOLUME.toFixed(2)+`]</span>VOLUME<input id='volume_slider' type='range' name='volume' min='0' max='1.0' step='0.03125' value='0.5'><br/>`
//    +`<button onclick='document.getElementById(`+'`speak_settings`'+').style.botom=`0px`'+`;'>↓</button>`
//    +`<button onclick='document.getElementById(`+'`speak_settings`'+`).remove();'>x</button>`
    +`<button id='voice_change'>ボイスチェンジ</button>`//"20211017ris 停止ボタン追加
    +`<button id='speech_clear'>■クリア</button>`//"20211017ris 停止ボタン追加
    +`</details>`;
  document.body.appendChild(ele);document.body.style.paddingTop=document.getElementById('speak_settings').clientHeight+'px';
  scrollBy(0,document.getElementById('speak_settings').clientHeight);
  function ssview(id,val){document.getElementById(id).innerHTML='['+Number(val).toFixed(2)+']'}
  document.getElementById('speed_slider').addEventListener('input', function(){ RATE = this.value;ssview('ssr',RATE);}, false);
  document.getElementById('pitch_slider').addEventListener('input', function(){ PITCH = this.value;ssview('ssp',PITCH);}, false);
  document.getElementById('volume_slider').addEventListener('input', function(){ VOLUME = this.value;ssview('ssv',VOLUME);}, false);
  document.getElementById('voice_change').addEventListener('click', function(){ VOICE = voice_list[seek=(seek+1)%voice_list.length];}, false);//"20220105ris //ボイス切替ボタン追加
  document.getElementById('speech_clear').addEventListener('click', ()=>{ speechArray = []; speechSynthesis.cancel();}, false);//"20211017ris 停止ボタン追加

//"ボイス設定（仕様変更で必須に、以降も要警戒）
  let VOICE=speechSynthesis.getVoices()[14];//"20211017 [12]→[14]
  let voice_list=[],seek=0;//"20220105ris
  function get_voice(){
    if(speechSynthesis.getVoices().length==0) return setTimeout(get_voice,100);
    //voice = speechSynthesis.getVoices().find(function(voice){ return voice.name === 'Google 日本'; });
    //VOICE = speechSynthesis.getVoices()[12];
    VOICE = speechSynthesis.getVoices();//"20211017ris 以降番号が変わっても自動で日本語を探しに行くように変更
///    for(i=0;i<VOICE.length;i++) if(~VOICE[i].name.indexOf('haruka')) return VOICE = VOICE[i];//"20211017ris
    //"登録優先順位のためにそれぞれにループで探す。終わったら配列の０番を登録。
    for(i=0;i<VOICE.length;i++) if(~VOICE[i].name.indexOf('日本')) voice_list.push(VOICE[i]);//"20220105ris
    for(i=0;i<VOICE.length;i++) if(~VOICE[i].name.indexOf('Haruka')) voice_list.push(VOICE[i]);//"20220105ris
    for(i=0;i<VOICE.length;i++) if(~VOICE[i].name.indexOf('Kyoko')) voice_list.push(VOICE[i]);//"20220105ris
    for(i=0;i<VOICE.length;i++) if(~VOICE[i].name.indexOf('Nanami')) voice_list.push(VOICE[i]);//"20220105ris
    VOICE=voice_list[0];//"20220105ris
  }get_voice();

//"読上げ系処理=======================================================================
  var speaking_text = '';
  var speechArray =['読み上げ','script ready'];
  const EOT = '[END_OF_TEXT]';
  const SPLIT_STR ='[SPLIT_STR]';
  var speech_bot_run = false;

//"テキストを読み上げ用の形式に
  const uttr = function(text,rate=RATE,pitch=PITCH,volume=VOLUME,voice=VOICE){
    const utr = new SpeechSynthesisUtterance(text);
    utr.rate = rate; utr.pitch = pitch; utr.volume = volume; utr.voice = voice;
    return utr;
  };

//"読み上げ文章を追加格納していくやつ
  function speechArrayEnter(str){
    console.log(str);
    console.log('rep1:url:' + (str = str.replace(/([:\/\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)/g,'URL')));
    console.log('rep2:splitin:' + (str = str.replace( /[,\s「（　）」、。?!？！\n]+/g, SPLIT_STR )));//"区切文字やその連続
    // console.log('rep2:splitin:' + (str = str.replace( /([\u3040-\u309Fー])([^\u3040-\u309Fー])/g, '$1'+SPLIT_STR+'$2' )))//"ひらがなからひらがな以外の文字の境目
    console.log('splited:array:' + (str = str.split( SPLIT_STR )));
    str.forEach( txt=>{
      if(txt.length<=30) { speechArray.push(txt); return;}
      //"↓長すぎる場合は細切れに
      let txts = txt.replace( /([\u3040-\u309F])([^\u3040-\u309Fー])/g, '$1'+SPLIT_STR+'$2').split( SPLIT_STR );
      let keep = '';
      txts.forEach( tx=>{
        if((keep.length + tx.length)>=30&& keep!='' ) { speechArray.push(keep); keep='';}
        keep+=tx;
        if(keep.length<=30) return;
        else speechArray.push(keep.slice(0,30));//"↓それでも長すぎる場合はさらに細切れに
        if(keep.length>=30) speechArray.push(keep.slice(30,60));else return keep='';
        if(keep.length>=60) speechArray.push(keep.slice(60,90));else return keep='';
        if(keep.length>=90) speechArray.push(keep.slice(90,120));else return keep='';
        if(keep.length>=120) speechArray.push(keep.slice(120));else return keep='';      
      });
      if(keep!='') speechArray.push(keep);
    });
    if(speech_bot_run) { console.log(speech_bot_run); return;};
    console.log('spbrun'); speech_bot_run = true; speech_bot();
  }
  var count=0,busycount=0;
  //"しゃべる頃合いを見計らって待機させるやつ
  function speech_bot(){
    let delay_time = 100, cnslogtext = 'call count :'+count++;
    if(speechArray.length==0) {speech_bot_run = false; count=0; return;}
    if(speechSynthesis.pending==false || speechSynthesis.speaking==false) {
      cnslogtext+='[speech okey]';
      speaking_text = speechArray.shift(); console.log(speaking_text);
      if(speaking_text == EOT) delay_time = 500;//"EOTは読まない
      else speechSynthesis.speak( uttr(speaking_text) );
      busycount=0;
    }else{
      cnslogtext+='[speech busy]' ;
      if(++busycount>=50) { busycount=0; speechSynthesis.cancel();
      speechSynthesis.speak( uttr('読み上げスキップしました★') ) }
    }
    if(count%5==0) console.log(cnslogtext + '|setTimeout(speech_bot(),'+delay_time+') (x5)');
    setTimeout(()=>speech_bot(), delay_time);
  }

//"テキスト取得系======================================================================
  //監視ターゲットの取得
  let target_element_p = document.getElementsByClassName('tw-comment-list-view__scroller')[0];
  let target_element = target_element_p.firstChild;
  let is_live = (~document.location.href.indexOf('/movie/'))==0;  console.log('is_live(@speaker):'+is_live);
  if(document.getElementsByClassName('tw-comment-history').length){//"20220130ris{
    target_element = target_element_p;
    len=(elm=document.getElementsByClassName('tw-comment-history-item__details')).length;
    for(i=0;i<len;i++)elm[i].classList.add('tw-comment-item-name-body');
    len=(elm=document.getElementsByClassName('tw-comment-history-item__content')).length;
    for(i=0;i<len;i++)elm[i].classList.add('tw-comment-item-comment');
  }//"20220130ris}
  //"tw-player-comment-list -> tw-comment-list-view__scroller //20200126ris
  //let is_live = (~document.location.href.indexOf("/movie/"))==0;  console.log('is_live(@speaker):'+is_live);
  //"20211017ris 下２行、ライブと録画でクラス名別れてたの統一された模様 
  let class_name_for_name = 'tw-comment-item-name-body';//is_live?'tw-comment-item-name-body':'tw-comment-history-item__details';
  let class_name_for_text = 'tw-comment-item-comment';//is_live?'tw-comment-item-comment':'tw-comment-history-item__content';
  if(~document.location.href.indexOf('/windowcomment')){
    //target_element = document.getElementById('comment')
    ///target_element = target_element_p
    ///class_name_for_name = 'user'
    ///class_name_for_text = 'comment-text'   
  }else if(~document.location.href.indexOf('/movie/')){
    //target_element = target_element_p//"20211017ris ライブと録画同じになったため不用に。
  }

//オブザーバーの作成
  const observer = new MutationObserver( records => {//"records:arranged@target_element
    records.forEach(record=>{ Array.from(record.addedNodes).forEach(node_comment=>{
      //console.log('node_comment.innerHTML'+node_comment.innerHTML)
      let name = node_comment.getElementsByClassName(class_name_for_name)[0].textContent.trim();
      if(name_shorter==true) name=name.split(/[@,.\s＠「（　）」、。?!？！]/)[0];
      let text = node_comment.getElementsByClassName(class_name_for_text)[0].textContent;
  //    console.log('name:'+name);    console.log('text:'+text)
      speechArrayEnter(name.trim()+'ﾉｺﾒﾝﾄ '+text+' '+EOT);
    }) })
  });

speechSynthesis.cancel();//"念の為クリア

//監視の開始
  observer.observe(target_element, {childList: true});
}cas_speaker();//"start script

※宣伝用リンク：https://syaru.playing.wiki/d/cas_speaker