PostTTS cho mọi website

Thêm âm thanh tự nhiên vào website của bạn chỉ với một thẻ script. Chạy trên mọi CMS, framework hay trang tĩnh — không cần build, không phụ thuộc gì.

Bắt đầu miễn phí Xem demo trực tiếp

< 10KB đã gzip · Không phụ thuộc gì · Chạy trên mọi CMS

Bắt đầu nhanh

Đăng ký và lấy site ID

Tạo tài khoản miễn phí và lấy site ID từ trang Tích hợp. Gói miễn phí gồm 10 bài viết/tháng.

Đánh dấu nội dung bài viết

Thêm thuộc tính data-posttts vào phần tử bọc văn bản bài viết — thường là thẻ <article>.

Thêm thẻ script vào <head>

Chèn một thẻ <script> với site ID của bạn. Nó tải bất đồng bộ và không chặn render.

Demo trực tiếp

Đây chính xác là những gì khách truy cập sẽ thấy sau khi nhúng.

Blog của bạn

5 tháng 4, 2026

Cách thêm âm thanh vào website

Nghe đọc bài

0:00

Âm thanh là định dạng nội dung phát triển nhanh nhất trên web. Thêm nút phát vào bài viết cho độc giả thêm lựa chọn nghe khi đi đường, tập thể dục hay làm nhiều việc cùng lúc — và chỉ mất chưa đến năm phút để cài đặt.

Cách hoạt động

Tải bất đồng bộ

Script dùng defer nên không bao giờ chặn render hay tương tác của trang.

Quét DOM

Tìm các phần tử có dấu data-posttts (hoặc selector tuỳ chỉnh của bạn).

Lấy URL âm thanh

Tra cứu âm thanh đã tạo sẵn cho trang đó từ API PostTTS.

Chèn trình phát

Render một trình phát cách ly CSS, thân thiện di động ngay cạnh nội dung.

Mẫu tích hợp

Ví dụ sẵn dùng cho các stack phổ biến nhất.

<!-- 1. Add the script to your <head> -->
<script
  src="https://posttts.com/player.js"
  data-site="YOUR_SITE_ID"
  defer
></script>

<!-- 2. Mark your article content -->
<article data-posttts>
  <h1>Your article title</h1>
  <p>Your article content...</p>
</article>

<!-- In header.php, before </head> -->
<script
  src="https://posttts.com/player.js"
  data-site="<?php Kecho esc_attr( get_option('posttts_site_id') ); ?>"
  defer
></script>

<!-- In single.php, wrap the post content -->
<article data-posttts <?php post_class(); ?>>
  <?php the_title('<h1>', '</h1>'); ?>
  <?php the_content(); ?>
</article>

// pages/_document.tsx (or app/layout.tsx)
import Script from 'next/script';

export default function Document() {
  return (
    <html>
      <head>
        <Script
          src="https://posttts.com/player.js"
          data-site="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </head>
      <body>{/* ... */}</body>
    </html>
  );
}

// In your post component
export function Post({ title, body }) {
  return (
    <article data-posttts>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: body }} />
    </article>
  );
}

<!-- Hugo: layouts/partials/head.html -->
<script src="https://posttts.com/player.js" data-site="YOUR_SITE_ID" defer></script>

<!-- Hugo: layouts/_default/single.html -->
<article data-posttts>
  <h1>{{ .Title }}</h1>
  {{ .Content }}
</article>

<!-- Jekyll: _layouts/post.html -->
<article data-posttts>
  <h1>{{ page.title }}</h1>
  {{ content }}
</article>

<!-- Ghost: default.hbs (in <head>) -->
<script src="https://posttts.com/player.js" data-site="YOUR_SITE_ID" defer></script>
<!-- Ghost: post.hbs -->
<article data-posttts>{{content}}</article>

Tham chiếu cấu hình

Thuộc tính	Kiểu	Mặc định	Mô tả
data-site	string	—	Bắt buộc. Mã định danh site PostTTS của bạn. Lấy từ bảng điều khiển.
data-selector	string	[data-posttts]	CSS selector cho các phần tử nội dung cần chuyển thành âm thanh.
data-position	enum	before	Vị trí chèn trình phát: before, after, start hoặc end của nội dung.
data-voice	enum	woman	Giọng mặc định. Người đọc có thể đổi qua dropdown trên trình phát.
data-theme	enum	light	Giao diện trình phát: light, dark hoặc minimal.
data-speed	number	1	Tốc độ phát mặc định. Hỗ trợ 0.75, 1, 1.25, 1.5, 2.
data-auto	boolean	false	Bật tự động nhận diện ngữ nghĩa khi không có dấu đánh.

Nhận diện nội dung

Bốn cách để chỉ cho script biết nội dung bài viết nằm ở đâu.

Đánh dấu chủ động (khuyến nghị)

Thêm data-posttts vào phần tử bọc bài viết. Chắc chắn và rõ ràng nhất.

<article data-posttts>...</article>

Chỉ định vị trí trình phát thủ công

Kiểm soát chính xác nơi trình phát xuất hiện bằng cách thêm phần tử data-posttts-player bên trong hoặc cạnh nội dung.

<article data-posttts>
  <div data-posttts-player></div>
  <p>Article text...</p>
</article>

Ghi đè bằng CSS selector

Nếu không thể sửa template, hướng script đến một class hay phần tử có sẵn trên trang.

<script src="https://posttts.com/player.js"
  data-site="YOUR_SITE_ID"
  data-selector=".entry-content"></script>

Tự động nhận diện dự phòng

Khi không có dấu đánh, dùng HTML ngữ nghĩa (<article> → [itemprop="articleBody"] → <main>). Tắt mặc định.

<script src="https://posttts.com/player.js"
  data-site="YOUR_SITE_ID"
  data-auto="true"></script>

Bỏ qua phần tử con không mong muốn

Thêm data-posttts-skip vào bất kỳ phần tử con nào bạn muốn loại khỏi âm thanh — sidebar, chú thích ảnh, nút chia sẻ, v.v.

<article data-posttts>
  <p>This is read aloud.</p>
  <aside data-posttts-skip>This is skipped.</aside>
</article>

Ví dụ cấu hình

Ba kiểu cấu hình phổ biến. Mọi thứ đều là thuộc tính data-* trên thẻ script — không cần gọi init riêng.

Giọng đọc và tốc độ phát tuỳ chỉnh

Chọn một trong sáu mã giọng preset (woman, woman-news, woman-story, man, man-formal, man-calm) hoặc mã giọng tuỳ chỉnh ở dạng voc_…. data-speed nhận giá trị từ 0,5 đến 2,0.

<script
  src="https://posttts.com/player.js"
  data-site="YOUR_SITE_ID"
  data-voice="man-formal"
  data-speed="1.15"
  defer
></script>

Giao diện tối, trình phát đặt ở cuối bài

Ba giao diện có sẵn là light (mặc định), dark, và minimal. data-position nhận một trong các giá trị before (mặc định), after, start, hoặc end. Nếu cần toàn quyền chọn vị trí, thêm phần tử data-posttts-player và script sẽ gắn trình phát vào đó.

<script
  src="https://posttts.com/player.js"
  data-site="YOUR_SITE_ID"
  data-theme="dark"
  data-position="end"
  defer
></script>

Chế độ tự động nhận diện cho trang không sửa được

Nếu không thể thêm dấu data-posttts, hãy đặt data-auto="true". Script sẽ dùng HTML ngữ nghĩa (<article> → [itemprop="articleBody"] → <main>). Kết hợp với data-selector khi trang không có markup ngữ nghĩa.

<script
  src="https://posttts.com/player.js"
  data-site="YOUR_SITE_ID"
  data-auto="true"
  data-theme="minimal"
  defer
></script>

Câu hỏi thường gặp

Không. Script dưới 10KB đã gzip, tải kèm defer (không chặn), và file âm thanh dùng preload="metadata" — nên file m4a thực tế chỉ được tải khi người đọc nhấn phát. Âm thanh được phục vụ từ CDN toàn cầu.

Dùng data-theme="light|dark|minimal" trên thẻ script cho các theme có sẵn. Mọi class của trình phát đều có tiền tố .posttts-* nên bạn có thể ghi đè style trong CSS riêng mà không xung đột.

Có. Với framework không tải lại toàn trang khi chuyển route, hãy gọi window.PostTTS.scan() sau mỗi lần chuyển route để gắn lại trình phát vào nội dung mới. Trong Next.js, dùng next/script với strategy="afterInteractive".

Script xử lý êm thấm: ghi cảnh báo ra console và không làm gì thêm — trang render bình thường, không có UI hỏng. Khi API hoạt động trở lại, trình phát sẽ được gắn ở lần tải trang tiếp theo.

Có. Mỗi phần tử khớp selector sẽ có trình phát riêng. Rất phù hợp cho bố cục kiểu tạp chí hay trang có nhiều bài viết.

Rất ít. Mọi class của trình phát đều dùng tiền tố .posttts-* và trình phát lấy font/màu từ CSS custom properties giới hạn trong root. Không áp dụng reset toàn cục.

Khám phá các tính năng liên quan

Tìm hiểu thêm những cách PostTTS giúp bạn thu hút khán giả

Player

Một dòng. Xong.

Thêm âm thanh vào website chỉ với một dòng code.

Tìm hiểu thêm

Player

Thương hiệu của bạn, trình phát của bạn

Trình phát âm thanh đẹp mắt, khớp với thương hiệu của bạn.

Tìm hiểu thêm

Player

Hoàn hảo trên mọi màn hình

Trình phát âm thanh responsive hoàn toàn, thiết kế ưu tiên di động.

Tìm hiểu thêm

Sẵn sàng thêm âm thanh vào website?

Tạo tài khoản miễn phí và lấy site ID trong chưa đến một phút.

Tạo tài khoản miễn phí

Gói miễn phí gồm 10 bài viết/tháng · Không cần thẻ tín dụng