一個 HTML tag，文字、粵拼與聲音同時準備好。

使用 render="font" 顯示彩色字型。controls 加入播放／停止按鈕；rate、pitch、gap 分別調整語速、音高和字間距。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<cantomore-text
  render="font"
  pronounce="all"
  controls
  rate="1"
  pitch="0"
  gap="60"
  character-size="4.2rem"
>學廣東話很容易</cantomore-text>

使用 render="ruby" 自訂粵拼。四個 *-color 分別控制聲母、韻腹、韻尾和聲調顏色；data-cantomore-omit 讓指定內容保持原樣。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<cantomore-text
  render="ruby"
  show-jyutping="true"
  pronounce="word"
  controls
  character-size="3rem"
  jyutping-size="0.34em"
  onset-color="#1769aa"
  nucleus-color="#16835b"
  coda-color="#7b4ab5"
  tone-color="#a45514"
>今日<strong>去銀行</strong>，然後行街。<span data-cantomore-omit>English / 123 / 🙂 保持原樣</span></cantomore-text>

以 data-cantomore-reading 指定讀音，粵拼之間以空格分隔，數量須與中文字數相同。例如「銀行」對應 ngan4 hong4。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<cantomore-text render="ruby" show-jyutping="true" pronounce="all" controls character-size="2.5rem">
  我去<span data-cantomore-reading="ngan4 hong4">銀行</span>。
</cantomore-text>

彩色字型用 @font-palette-values 改色：0 聲母、1 韻腹、2 韻尾、3 聲調、4 輔助線、5 描邊／陰影。中文字用 color 設定。這組配色沿用 font 網站的深色示範。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<style>
@font-palette-values --cantomore-night {
  font-family: "CantoMore";
  base-palette: 0;
  override-colors:
    0 #75B9FFFF, 1 #D6A7FFFF, 2 #75D99AFF,
    3 #DDB47AFF, 4 #FF8B7AFF, 5 #FFFDF740;
}
.dark-font-card {
  background: #102b43;
  color: #fffdf7;
  padding: 1.5rem;
  border-radius: 1rem;
  font-palette: --cantomore-night;
}
</style>

<div class="dark-font-card">
  <cantomore-text render="font" pronounce="all" controls character-size="3rem">銀行 行街 操行</cantomore-text>
</div>

HTML Ruby 用 onset-color 等屬性，無需字型 palette；適合希望獨立控制每個粵拼部分的網頁。播放時的底色亦可用 highlight-color 調整。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<style>
.dark-ruby-card {
  background: #102b43;
  padding: 1.5rem;
  border-radius: 1rem;
  color: #fffdf7;
}
</style>

<div class="dark-ruby-card">
  <cantomore-text render="ruby" show-jyutping controls
    character-size="2.5rem" jyutping-size="0.4em"
    character-color="#fffdf7" onset-color="#75b9ff"
    nucleus-color="#d6a7ff" coda-color="#75d99a"
    tone-color="#ddb47a" highlight-color="#31546b"
  >今日學廣東話</cantomore-text>
</div>

參考 font 網站的「詩史試時市事」及「銀行／行街／操行」。同一個「行」會按已收錄的詞語選讀音；未收錄語境可用上方的作者指定讀音。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<cantomore-text render="font" controls character-size="2.8rem">詩史試時市事</cantomore-text>
<cantomore-text render="ruby" show-jyutping controls
  character-size="2.5rem" jyutping-size="0.4em"
>銀行　行街　操行</cantomore-text>

用 CSS 變數集中管理文字樣式；strong 等原有標籤會保留。data-cantomore-omit 可讓指定區域完全略過處理。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<style>
.lesson-card {
  padding: 1.25rem;
  background: #f0f7f4;
  border-radius: 1rem;
}
.lesson-card cantomore-text {
  --cantomore-character-size: 2rem;
  --cantomore-jyutping-size: .42em;
  --cantomore-character-color: #173f3b;
  --cantomore-onset-color: #1769aa;
  --cantomore-nucleus-color: #16835b;
  --cantomore-coda-color: #7b4ab5;
  --cantomore-tone-color: #a45514;
  --cantomore-highlight-color: #ffe08a;
}
</style>

<div class="lesson-card">
  <cantomore-text render="ruby" show-jyutping controls>
    今日<strong>學廣東話</strong>。
    <span data-cantomore-omit>提示：保留原樣 / English / 123 🙂</span>
  </cantomore-text>
</div>

在 render="ruby" 下，加入或移除 show-jyutping 即可切換。它是布林屬性：要隱藏時移除屬性，不要寫 show-jyutping="false"。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<label><input id="reading-toggle" type="checkbox" checked> 顯示粵拼</label>
<cantomore-text id="reading-demo" render="ruby" show-jyutping
  controls character-size="2.7rem" jyutping-size="0.4em"
>學廣東話很容易</cantomore-text>

<script>
document.querySelector('#reading-toggle').addEventListener('change', event => {
  document.querySelector('#reading-demo')
    .toggleAttribute('show-jyutping', event.target.checked);
});
</script>

all 點字讀單字，控制列可讀整段；word 讀目前識別的詞語；whole 點任何字讀整個元素；none 關閉播放。目前 phrase 與 whole 同樣讀整個元素。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<label for="mode-select">點擊模式</label>
<select id="mode-select">
  <option value="all">逐字（all）</option>
  <option value="word">詞語（word）</option>
  <option value="whole">整段（whole）</option>
  <option value="phrase">整段（phrase）</option>
  <option value="none">不播放（none）</option>
</select>
<cantomore-text id="mode-demo" render="ruby" show-jyutping
  pronounce="all" controls character-size="2.7rem"
>今日去銀行，然後行街。</cantomore-text>

<script>
document.querySelector('#mode-select').addEventListener('change', event => {
  document.querySelector('#mode-demo').setAttribute('pronounce', event.target.value);
});
</script>

調整後再按播放試聽。rate 是語速倍率、pitch 是相對半音、gap 是字間距調整（毫秒）、volume 是 0–1 音量。pitch="0" 沿用公開語音的預設音高。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<style>
.voice-settings label {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin: .75rem 0;
}
.voice-settings input { min-width: 0; flex: 1; }
.voice-settings output { margin: 0; min-width: 2.5em; }
</style>

<div id="voice-settings" class="voice-settings">
  <label>語速 <input data-setting="rate" type="range" min="0.1" max="4" step="0.1" value="1"><output>1</output></label>
  <label>音高 <input data-setting="pitch" type="range" min="-4" max="4" step="1" value="0"><output>0</output></label>
  <label>字間距 <input data-setting="gap" type="range" min="0" max="150" step="10" value="60"><output>60</output></label>
  <label>音量 <input data-setting="volume" type="range" min="0" max="1" step="0.1" value="0.8"><output>0.8</output></label>
</div>
<cantomore-text id="voice-demo" controls character-size="2.8rem"
  rate="1" pitch="0" gap="60" volume="0.8"
>學廣東話很容易</cantomore-text>

<script>
document.querySelectorAll('#voice-settings input').forEach(input => {
  input.addEventListener('input', () => {
    document.querySelector('#voice-demo').setAttribute(input.dataset.setting, input.value);
    input.nextElementSibling.value = input.value;
  });
});
</script>

可用 ready()、play()、playChar()、playRange()、stop() 和 refresh() 整合自己的介面。字索引由 0 開始，playRange(0, 3) 不包含第 3 號索引。事件可同步顯示播放狀態。

<script defer src="https://speechtext.cantomore.com/cantomore-text.js"></script>

<style>
.api-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
</style>

<cantomore-text id="api-demo" render="ruby" show-jyutping
  character-size="2.5rem" jyutping-size="0.4em"
>學廣東話很容易</cantomore-text>
<div id="api-buttons" class="api-buttons">
  <button type="button" data-action="whole">播放整段</button>
  <button type="button" data-action="char">播放首字</button>
  <button type="button" data-action="range">播放頭三字</button>
  <button type="button" data-action="stop">停止</button>
  <button type="button" data-action="refresh">更新文字</button>
</div>
<p id="api-status" role="status">點按按鈕試用</p>

<script>
const apiText = document.querySelector('#api-demo');
const apiStatus = document.querySelector('#api-status');
apiText.addEventListener('cantomore-playstart', () => { apiStatus.textContent = '播放中'; });
apiText.addEventListener('cantomore-playend', () => { apiStatus.textContent = '播放完成'; });
apiText.addEventListener('cantomore-error', event => { apiStatus.textContent = event.detail.message; });
document.querySelector('#api-buttons').addEventListener('click', async event => {
  const action = event.target.dataset.action;
  if (!action) return;
  try {
    await apiText.ready();
    if (action === 'whole') await apiText.play();
    if (action === 'char') await apiText.playChar(0);
    if (action === 'range') await apiText.playRange(0, 3);
    if (action === 'stop') { await apiText.stop(); apiStatus.textContent = '已停止'; }
    if (action === 'refresh') {
      await apiText.stop();
      apiText.textContent = '今日去銀行';
      await apiText.refresh();
      apiStatus.textContent = '文字及讀音已更新';
    }
  } catch (error) { apiStatus.textContent = error.message; }
});
</script>