Hướng dẫn thêm nút chuyển văn bản thành giọng nói cho Blogger

Trong bài viết này, mình sẽ hướng dẫn các bạn một mẹo khá hữu ích cho Blogspot/Blogger, đó là cách thêm nút chuyển văn bản thành giọng nói sử dụng công nghệ của Google vào trang Blogspot của mình. Đây là một tính năng tuyệt vời giúp người đọc có thể nghe được nội dung bài viết thay vì phải đọc, mang đến một trải nghiệm thú vị và tiện lợi hơn cho người dùng, đặc biệt là đối với những ai có thị lực kém hoặc muốn tiết kiệm thời gian.

Với sự hỗ trợ của Google Assistant, việc chuyển đổi văn bản thành giọng nói trở nên vô cùng dễ dàng và hiệu quả. Mình sẽ không đi sâu vào các công dụng hay lợi ích của tính năng này, mà sẽ bắt đầu ngay vào cách thực hiện thêm nút chuyển văn bản thành giọng nói vào blog của bạn. Nếu bạn muốn trang blog của mình trở nên nổi bật và thân thiện hơn với người dùng, thì đừng bỏ qua mẹo này nhé!

Mục lục bài viết

HƯỚNG DẪN CHI TIẾT

Trong bài viết này, mình sẽ sử dụng dịch vụ từ trang web ResponsiveVoice để giúp bạn thêm chức năng chuyển văn bản thành giọng nói vào trang Blog của mình. 

Bước 1: Cấu hình trang Blog của bạn Trước tiên, mình sẽ hướng dẫn bạn cách cấu hình trang Blog để sử dụng dịch vụ này. Sau đó, mình sẽ hướng dẫn bạn cách đăng ký dịch vụ (bạn sẽ cần đăng ký để lấy API, tuy nhiên, trong bài viết này mình sẽ cung cấp API cho bạn). 

Các bước thực hiện: 

1. Truy cập vào trang quản lý Blog của bạn trên Blogger. 
2. Vào Chủ đề (Theme). 
3. Chọn Chỉnh sửa HTML (Edit HTML). 
4. Tìm kiếm thẻ </body> trong mã HTML của trang. 
5. Sau khi tìm thấy thẻ </body>, bạn cần chèn đoạn mã script mà mình cung cấp ở phía trên thẻ này để kích hoạt chức năng chuyển văn bản thành giọng nói. 

Lưu ý: Đảm bảo bạn chèn đoạn mã đúng vị trí để không ảnh hưởng đến các phần khác của trang.

<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 đó:

.btnvoice {
    margin: 0;
    overflow: hidden;
    position: relative;
    background: linear-gradient(45deg, #f90, #fc0);
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.btnvoice:hover {
    background: linear-gradient(45deg, #fc0, #f90);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.btnvoice button.voice-button, 
.btnvoice button.voice-stop {
    padding: 5px 10px;
    font-size: 14px;
    background: none;
    outline: none;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s ease;
}

.btnvoice button.voice-button {
    color: #fff;
    background-color: #ff9800;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btnvoice button.voice-button:hover {
    transform: scale(1.1);
    background-color: #ffb74d;
}

.btnvoice button.voice-stop {
    color: #222;
    background-color: #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btnvoice button.voice-stop:hover {
    transform: scale(1.1);
    background-color: #d6d6d6;
}

Chèn nút hiển thị, thường là chèn trong phần hiển thị bài viết

<data:post.body>

Đoạn mã này thường xuất hiện hai lần trở lên, tùy vào mẫu giao diện (Template) mà bạn đang sử dụng. Bạn cần xác định đúng thẻ hiển thị bài viết hoặc thử nghiệm với đoạn mã để đảm bảo chính xác hơn. Sau đó, bạn có thể chèn vào ngay dưới thẻ đó.

<span class='btnvoice'>

<button class='voice-button' onclick='responsiveVoice.speak(document.querySelector('.post-body').textContent, 'Vietnamese Female');' 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 vẫn hoạt động mà không cần phải chèn vào phần hiển thị bài viết. Ví dụ, bạn có thể chèn vào trong <div class="entry-meta"> để làm đẹp trang web (đây là một yêu cầu nâng cao, đòi hỏi bạn phải hiểu rõ về mã nguồn của blog). Quan trọng là bạn cần xác định đúng vị trí cần chèn mã.

Tiện ích này hỗ trợ nhiều ngôn ngữ khác nhau. Bạn có thể dễ dàng truy cập Tại đây để khám phá thêm. Để thay đổi giọng nói, bạn chỉ cần nhấn tổ hợp phím Ctrl + F và tìm kiếm từ khóa Male hoặc Female, sau đó thay đổi ngôn ngữ theo ý muốn của bạn.

Sau đó lưu mẫu lại và tận hưởng thành quả.

Facebook: Dịch Vụ Mạng Xã Hội Đà Nẵng
Zalo: Dịch Vụ Đà Nẵng
Phone: 0333.110304
Gmail: mxhdn.xyz@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...