Có gì mới?

Diễn Đàn Cú Đêm

  • Bạn có những câu chuyện thầm kín nhưng không biết kể với ai, bạn buồn phiền vì chuyện tình cảm, gia đình, cuộc sống. Hãy chia sẻ tâm sự của bạn với cộng đồng cú đêm nhé. NGHIÊM CẤM SPAM QUẢNG CÁO.

Share Code Thêm giọng đọc Google cho bài viết blogger

  • Thread starter Phit
  • Ngày gửi
  • Replies 0
  • Views 200

Phit

Cú Đêm Member
Tham gia
17/8/21
Bài viết
260
Lượt thích
100
Điểm
43
Nơi ở
Sao Hoả
Trong bài viết này mình sẽ hướng dẫn các bạn thêm một tips nhỏ cho Blogspot/Blogger, đó là Thêm nút chuyển văn bản thành giọng nói cho Blogspot bằng Chị Google.

Công dụng của tiện ích này mình sẽ không nói lại, mình bắt đầu hướng dẫn thêm vào Blogspot/Blogger luôn nhé ^^

HƯỚNG DẪN CHI TIẾT​



Bài viết này mình sử dụng dịch vụ https://responsivevoice.org/license/


Bước 1: Cấu hình cho trang Blog của bạn (mình sẽ hướng dẫn đăng ký dịch vụ này sau, bài viết này sử dụng API mà mình cung cấp).

Truy cập Blogger -> Chủ để -> Chỉnh sửa HTML -> Tìm kiếm thẻ </body> và chèn đoạn Scriptchạy tập lệnh lên phía trên đó:



Mã:
<script src='https://code.responsivevoice.org/responsivevoice.js?key=AN1jc0tp'/>


Tiếp theo bạn tìm ]]></b:skin> và dán đoạn mã CSS sau lên phía trên đó:



Mã:
/*-- Google Voice --*/

.btnvoice{margin:0;overflow:hidden;position:relative;background: #f90;border-radius: 20px;}

.btnvoice button.voice-button,.btnvoice button.voice-stop{padding:0 5px;font-size:13px;background:none;outline:0;cursor:pointer}

.btnvoice button.voice-button{color:#fff;border:none;border-radius:0}

.btnvoice button.voice-stop{color:#222;border:none;border-radius:0}



Chèn nút hiển thị, thường là chèn trong phần hiển thị bài viết
Mã:
<data:post.body>
(đoạn mã này thường xuất hiện 2 hoặc nhiều hơn, tuỳ mỗi Template mà bạn sử dụng) bạn cần tìm đúng thẻ hiện thị bài viết hoặc thử đoạn mã để chính xác hơn. Bạn chèn vào phía dưới nó.


Mã:
<span class='btnvoice'>

<button class='voice-button' onclick='responsiveVoice.speak(document.querySelector(&apos;.post-body&apos;).textContent, &apos;Vietnamese Female&apos;);' title='Đọc bài viết'><i class="fas fa-microphone"></i> Đọc bài viết</button>

<button class='voice-stop' onclick='responsiveVoice.cancel();' title='Dừng lại'><i class="fas fa-microphone-slash"></i> Dừng lại</button>

</span>


Tuy nhiên đoạn mã này hoạt động ngay cả khi không cần chèn vào phần hiển thị bài viết, ví dụ như mình chèn vào <div class="entry-meta">để làm đẹp trang luôn (phần này nâng cao yêu cầu phải hiểu rõ về code của blog). Bạn cần xác định đúng chỗ để chèn.

Thêm nút chuyển văn bản thành giọng nói cho Blogspot bằng Chị Google

Bước 2: Chỉnh sửa tiện ích

.post-body ở phía trên đoạn HTML là đoạn mà nó hiểu để đọc nội dung.
  • Vietnamese Female - Là giọng đọc Nữ Việt Nam (Nếu muốn chuyển qua Nam sửa thành Vietnamese Male).


Ngoài ra tiện ích này hỗ trợ rất nhiều ngôn ngữ bạn có thể truy cập https://code.responsivevoice.org/responsivevoice.js?key=AN1jc0tp . Bấm tổ hợp phím Ctrl F và gõ Male hoặc Female (Trước đó là ngôn ngữ bạn có thể sửa).

Thêm nút chuyển văn bản thành giọng nói cho Blogspot bằng Chị Google
Sau đó lưu mẫu lại và tận hưởng thành quả.

RÌ VIU GIỌNG ĐỌC NÀY​



Cá nhân mình đã trải nghiệm tuy nhiên khi ngắt nghỉ dấu . và , khá lâu 😂 và giọng đọc nữ khá là củ chuối, giọng nam thì khá là OK


Xong rồi đó, xem thêm nhiều thủ thuật blogspot hơn tại đây nhé!!!

Nguồn: Truongblogger.top
 
Sửa lần cuối:

Thành viên trực tuyến

Không có thành viên trực tuyến.
shape1
shape2
shape3
shape4
shape7
shape8
Top