<!-- wp:html -->
<div class="fz-card">
  <p><strong>Fuzhou:</strong> 呀摸没</p>
  <p><strong>IPA:</strong> ia⁵⁵ mo⁵⁵ mo⁵⁵</p>
  <p><strong>Putonghua:</strong> 很没意思</p>
  <p><strong>English:</strong> very boring</p>
  <button class="fz-speaker" data-text="呀摸没">🔊 朗读</button>
</div>
<!-- /wp:html -->

<!-- 样式仅出现一次即可，可重用区块会自动合并 -->
<style>
.fz-card{border:1px solid #e2e2e2;border-radius:8px;padding:1rem 1.25rem;margin-bottom:1.5rem;background:#fff}
.fz-speaker{cursor:pointer;background:#d6336c;color:#fff;border:none;padding:.4rem .8rem;border-radius:4px;font-size:.9rem}
.fz-speaker:disabled{opacity:.6}
</style>
<script>
document.querySelectorAll('.fz-speaker').forEach(btn=>{
  btn.onclick=()=>{
    const t = btn.dataset.text;
    btn.disabled=true; btn.textContent='🔊 播放中…';
    fetch('/wp-json/fz/v1/tts?text='+encodeURIComponent(t))
      .then(r=>r.json()).then(d=>{
        new Audio(d.url).play();
        btn.disabled=false; btn.textContent='🔊 朗读';
      });
  };
});
</script>