04.26c10v2 Header Sound

Code ban đầu

<!-- 04.26c10v2 Header Sound Icon -->
<script>
window.TP_AUDIO_BTN_CONFIG = {
  target: ".header-actions.header-actions--right",
  insert_method: "append",
  audio_selector: ".sqs-audio-embed",
  loop: false,
  volume: 1,
  icon_size: "24px",
  icon_color: "#000000"
};
</script>
<script>
!function(){
  var c=window.TP_AUDIO_BTN_CONFIG;
  if(!c)return;
  var audio=null,playing=false,btn=null,injected=false;

  function svgPlay(color,size){
    return '<svg width="'+size+'" height="'+size+'" viewBox="0 0 24 24" fill="'+color+'" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>';
  }
  function svgPause(color,size){
    return '<svg width="'+size+'" height="'+size+'" viewBox="0 0 24 24" fill="'+color+'" xmlns="http://www.w3.org/2000/svg"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>';
  }

  function initAudio(){
    if(audio)return true;
    var embed=document.querySelector(c.audio_selector);
    if(!embed)return false;
    var url=embed.getAttribute("data-url");
    if(!url)return false;
    audio=new Audio(url);
    audio.loop=!!c.loop;
    audio.volume=Math.min(1,Math.max(0,c.volume));
    audio.addEventListener("ended",function(){
      if(!c.loop){playing=false;btn&&(btn.innerHTML=svgPlay(c.icon_color,c.icon_size));}
    });
    return true;
  }

  function buildBtn(){
    var b=document.createElement("button");
    b.className="tp-audio-btn";
    b.type="button";
    b.style.cssText="background:none;border:none;padding:0;margin-left:12px;cursor:pointer;display:inline-flex;align-items:center;line-height:1;flex:0 0 auto;";
    b.innerHTML=svgPlay(c.icon_color,c.icon_size);
    b.addEventListener("click",function(e){
      e.preventDefault();
      if(!initAudio())return;
      if(playing){
        audio.pause();
        playing=false;
        b.innerHTML=svgPlay(c.icon_color,c.icon_size);
      }else{
        audio.play();
        playing=true;
        b.innerHTML=svgPause(c.icon_color,c.icon_size);
      }
    });
    return b;
  }

  function inject(){
    if(injected)return;
    var targets=document.querySelectorAll(c.target);
    if(!targets.length)return;
    targets.forEach(function(el){
      if(el.querySelector(".tp-audio-btn"))return;
      btn=buildBtn();
      c.insert_method==="prepend"?el.insertBefore(btn,el.firstChild):el.appendChild(btn);
      injected=true;
    });
  }

  document.addEventListener("DOMContentLoaded",inject);
  document.addEventListener("mercury:load",function(){injected=false;inject();});
  new MutationObserver(inject).observe(document.documentElement,{childList:true,subtree:true});
}();
</script>