Cách thêm nút Đọc bài viết bằng chuyển văn bản ra giọng nói vào trang Blog

 Khi có một nút Đọc bài viết ở đầu mỗi bài, thì các bài viết sẽ trở thành một Audio Blog (tạm dịch là Blog âm thanh) và nó khá giống với tin tức trên Radio hay Podcast vậy, nó giúp độc giả có thể là vừa nghe bài viết mà vừa làm việc khác cùng lúc mà không bị gián đoạn

Vậy làm thế nào để thêm nút Đọc bài viết vào Blogger Website của bạn? Trong bài viết này mình sẽ hướng dẫn các bạn!

Khâu chuẩn bị

Đầu tiên, các bạn đăng ký một tài khoản miễn phí tại websitevoice.com. Sau đó vào liên kết sau và làm theo hướng dẫn trên màn hình của bạn để cài đặt widget cho trang Blog: https://websitevoice.com/dashboard/widget

Cùng tùy chỉnh nào!

Trong trang này, các bạn hãy chỉnh sửa các tùy chọn phong cách (style) cho phù hợp, như cách hiển thị nút, màu sáng (Light Mode) hay tối (Dark Mode), màu nút (chọn các màu làm mẫu có sẵn trong thư viện hoặc nhập mã màu riêng của bạn - mã màu thì bạn lên Google tìm từ khóa "color picker" rồi chọn màu, sau đó Copy mã là được), hiển thị thời gian ước tính của Audio,… Sau đó, sao chép (copy) mã và dán (paste) vào trong mã nguồn (source code) trang web của bạn.

Ngoài ra, trang web còn cho phép bạn cấu hình đoạn Audio bài đọc để phát ở đầu và cuối. Bạn có thể thêm các đoạn nhỏ đánh dấu bản quyền kiểu như “Bản quyền bài viết từ DBlog” và “Cảm ơn bạn đã nghe bài viết này. Chúc bạn một ngày tốt lành!”.

Sau khi cài đặt xong Widget, các bạn có thể theo dõi thống kê về lượt phát Audio - ở đây mình tạm gọi là số lần nghe (nhấn nút Đọc bài) từ những người truy cập.

Ở phần "Select the language and voice" bạn hãy nhấp vào, trong Menu thả xuống, chọn Vietnamese (Danh) hoặc nếu bài viết toàn tiếng Anh thì bạn để mặc định.

Tích hợp vào trang

Đối với các bạn là nhà phát triển, các bạn có thể sử dụng CSS để tùy chỉnh hiển thị của widget để chúng có thể hiển thị đồng bộ tự động với giao diện hiện tại của trang web hơn.

Với các phiên bản trả phí (Starter và Premium), các bạn sẽ được sử dụng nhiều tính năng tuyệt vời như: không có Watermark của dịch vụ, có thêm các giọng nói mới để tùy chọn, tốc độ chuyển đổi âm thanh nhanh hơn giúp người dùng không đợi lâu...

Rồi, giờ thì bạn sao chép (Copy) hai dòng Code trong khung đen vào trong bài viết ở chế độ HTML và tận hưởng thôi!

Ví dụ đoạn Code của mình...

Dòng 1: <div class="wv-button-placeholder"></div>

Dòng 2: 

<script async src="https://widget.websitevoice.com/DQeYg3tsS-OGTAZRUWKHbg"></script>

<script>

  window.wvData=window.wvData||{};function wvtag(a,b){wvData[a]=b;}

  wvtag('id', 'DQeYg3tsS-OGTAZRUWKHbg');

  wvtag('language', 'vi-VN');

  wvtag('widget-style', {

    backgroundColor: '#74C284',

    showTime: true,

    buttonText: 'Đọc nội dung'

  });

</script>

Nếu bạn thấy bài hay, hãy Share cho bạn bè mình ngay nhé!

Cập nhật quan trọng về tính năng này

Bây giờ, tính năng này không còn miễn phí như trước kia...