Tích hợp giọng đọc AI tiếng Việt vào website WordPress tự code (A–Z)

Tích hợp giọng đọc AI WordPress tự code (A–Z) là quá trình bạn tự xây dựng hoặc phát triển một tính năng đọc nội dung trang web bằng giọng nói tiếng Việt, sử dụng công nghệ AI hoặc API hỗ trợ chuyển văn bản thành giọng nói (Text-to-Speech – TTS), hoàn chỉnh từng bước từ chuẩn bị, cài đặt, viết code đến triển khai trên website WordPress.

Sau khi tích hợp sẽ có chức năng đọc bài WordPress

Nhấp vào button dưới để test thử:

Bài viết này hướng dẫn gồm các chức năng sau:

• Button đọc bài viết
• Chọn tốc độ đọc, giọng đọc (nếu có)
• Dừng / tiếp tục đọc
• Hỗ trợ tiếng Việt
• Tự động lấy nội dung bài viết từ .wpshare247-ai-read-to-text

1. Mã HTML + JavaScript chèn vào single.php (hoặc footer.php nếu bạn muốn dùng toàn site)

Bước 1: Chèn HTML nút vào chỗ bạn muốn hiển thị (trước hoặc sau bài viết):

<div id="wpshare247-voice-controls">
  <button onclick="wpshare247ToggleReading()" id="wpshare247-readBtn">🔊 Đọc bài</button>
  <button onclick="wpshare247PauseReading()">⏸️ Tạm dừng</button>
  <button onclick="wpshare247ResumeReading()">▶️ Tiếp tục</button>
  <label>Tốc độ: <input type="range" min="0.5" max="2" step="0.1" value="1" id="wpshare247-rateSlider"></label>
</div>

Dưới đây là giải thích chi tiết các tham số trong thẻ <input type="range"> mà bạn đưa:

Giải thích từng tham số:

• type=”range”
  Đây là kiểu input dạng thanh trượt (slider). Người dùng có thể kéo thanh để chọn giá trị trong khoảng cho phép.
• min=”0.5″
  Giá trị nhỏ nhất mà thanh trượt có thể chọn được là 0.5. Trong trường hợp này, nó sẽ dùng làm tốc độ đọc tối thiểu (nửa tốc độ bình thường).
• max=”2″
  Giá trị lớn nhất mà thanh trượt có thể chọn được là 2. Tức là tốc độ đọc nhanh gấp đôi tốc độ mặc định.
• step=”0.1″
  Bước nhảy giữa các giá trị liên tiếp khi kéo thanh trượt là 0.1. Ví dụ, giá trị có thể là 0.5, 0.6, 0.7, …, 1.9, 2.0.
• value=”1″
  Giá trị mặc định của thanh trượt khi trang web được tải lên là 1, tương ứng với tốc độ đọc bình thường.

Bước 2: Chèn JavaScript phía dưới (cuối single.php hoặc footer.php trước </body>)

<script>
let wpshare247Utterance = null;
let wpshare247IsReading = false;

function wpshare247ToggleReading() {
  if (wpshare247IsReading) {
    speechSynthesis.cancel();
    wpshare247IsReading = false;
    document.getElementById('wpshare247-readBtn').innerText = '🔊 Đọc bài';
  } else {
    const text = document.querySelector('.wpshare247-ai-read-to-text')?.innerText.trim();
    if (!text) {
      alert('Không tìm thấy nội dung để đọc.');
      return;
    }

    speechSynthesis.cancel();

    wpshare247Utterance = new SpeechSynthesisUtterance(text);
    wpshare247Utterance.lang = 'vi-VN';

    const voices = speechSynthesis.getVoices();
    wpshare247Utterance.voice = voices.find(voice => voice.lang === 'vi-VN') || null;

    wpshare247Utterance.rate = parseFloat(document.getElementById('wpshare247-rateSlider').value);
    wpshare247Utterance.volume = 1;
    wpshare247Utterance.pitch = 1;

    wpshare247Utterance.onstart = () => {
      wpshare247IsReading = true;
      document.getElementById('wpshare247-readBtn').innerText = '■ Dừng đọc';
    };
    wpshare247Utterance.onend = () => {
      wpshare247IsReading = false;
      document.getElementById('wpshare247-readBtn').innerText = '🔊 Đọc bài';
    };
    wpshare247Utterance.onerror = e => {
      wpshare247IsReading = false;
      console.error('Lỗi đọc:', e);
      document.getElementById('wpshare247-readBtn').innerText = '🔊 Đọc bài';
    };

    speechSynthesis.speak(wpshare247Utterance);
  }
}

function wpshare247PauseReading() {
  if (speechSynthesis.speaking && !speechSynthesis.paused) {
    speechSynthesis.pause();
  }
}

function wpshare247ResumeReading() {
  if (speechSynthesis.paused) {
    speechSynthesis.resume();
  }
}

// Tự động cập nhật tốc độ khi kéo thanh slider
document.getElementById('wpshare247-rateSlider').addEventListener('input', () => {
  if (wpshare247Utterance && wpshare247IsReading) {
    speechSynthesis.cancel();
    wpshare247Utterance.rate = parseFloat(document.getElementById('wpshare247-rateSlider').value);
    speechSynthesis.speak(wpshare247Utterance);
  }
});
</script>

2. CSS nhẹ (tuỳ chọn, giúp nút nhìn đẹp hơn)

Bạn có thể chèn vào file style.css hoặc nội dòng:

#wpshare247-voice-controls {
  margin: 20px 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
#wpshare247-voice-controls button {
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  background: #0073aa;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
#wpshare247-voice-controls button:hover {
  background: #005177;
}
#wpshare247-voice-controls input[type=range] {
  vertical-align: middle;
}

Hoặc thêm vào tùy chỉnh Css custom trong admin WordPress.

3. Vị trí tích hợp gợi ý trong single.php

Chèn sau nội dung bài viết:

<div class="wpshare247-ai-read-to-text">
  <?php the_content(); ?>
</div>

<?php get_template_part('template-parts/voice-player'); // nếu tách riêng ?>

Lưu ý kỹ thuật

• Trình duyệt phải hỗ trợ speechSynthesis (gần như mọi trình duyệt trừ Firefox cũ).
• Người dùng phải click để kích hoạt âm thanh do trình duyệt chặn autoplay.
• Giọng đọc do hệ điều hành hoặc trình duyệt quyết định, không đồng nhất.

Việc tích hợp đoạn code giọng đọc (Text-to-Speech) vào website WordPress mang lại nhiều lợi ích thiết thực về trải nghiệm người dùng, SEO và khả năng tiếp cận. Cụ thể:

4. Vì sao nên tích hợp đoạn code giọng đọc vào website?

4.1. Tăng khả năng tiếp cận nội dung (Accessibility)

• Hỗ trợ người khiếm thị, người lớn tuổi, hoặc người có khó khăn trong việc đọc chữ.
• Giúp website trở nên thân thiện hơn với nhiều đối tượng người dùng.

4.2. Tăng thời gian ở lại trang (Time on Site)

• Người dùng có xu hướng ở lại lâu hơn nếu họ có thể nghe nội dung trong khi làm việc khác.
• Điều này gián tiếp giúp tăng điểm chất lượng và cải thiện SEO.

4.3. Nâng cao trải nghiệm người dùng

• Tính năng hiện đại, tiện ích, đặc biệt phù hợp với người dùng mobile không tiện đọc văn bản dài.
• Cho phép người dùng điều chỉnh tốc độ đọc, tạm dừng, tiếp tục theo ý muốn.

4.4. Không tốn chi phí

• Đoạn code sử dụng Web Speech API có sẵn trong trình duyệt (Chrome, Edge, Safari…), hoàn toàn miễn phí.
• Không cần tích hợp dịch vụ trả phí như Google Cloud TTS hay FPT AI, trừ khi muốn giọng tự nhiên hơn.

4.5. Dễ tích hợp – Tùy biến cao

• Dễ thêm vào theme, plugin hoặc qua shortcode.
• Có thể tùy biến giọng, tốc độ, nút điều khiển, giao diện theo brand.

5. Một số plugin WordPress tốt nhất để tích hợp giọng đọc

Dưới đây là một số plugin WordPress tốt nhất để tích hợp giọng đọc (Text-to-Speech – TTS) vào website, đặc biệt hỗ trợ tiếng Việt:

5.1. ResponsiveVoice Text To Speech

• Ưu điểm:
  • Hỗ trợ tiếng Việt khá rõ ràng.
  • Dễ tích hợp bằng shortcode [responsivevoice].
  • Có nút đọc tự động cho bài viết.
• Nhược điểm:
  • Chỉ miễn phí bản dùng thử, muốn dùng đầy đủ cần nâng cấp trả phí.
  • Giọng đọc vẫn có phần “máy móc”.

ResponsiveVoice Text To Speech

5.2. GSpeech

• Ưu điểm:
  • Dùng Google TTS (trình duyệt) giống với JavaScript SpeechSynthesis.
  • Có thể bôi chọn đoạn văn để đọc.
  • Hỗ trợ nhiều ngôn ngữ, bao gồm tiếng Việt.
• Nhược điểm:
  • Thiết kế đơn giản, ít tính năng nâng cao.
  • Một số tùy chỉnh giao diện phải nâng cấp bản Pro.

GSpeech TTS – WordPress Text To Speech Plugin