Hướng dẫn thêm đọc bằng audio vào module news nukeviet

Thứ hai - 18/10/2021 03:46
VNCODE xin chia sẽ đến mọi người tính năng đọc audio cho website tin tức nukeviet, một chức năng tuyệt vời dành cho mọi không muốn lướt website đọc, ngoài ra chúng tôi còn phát triển nhắm đến mọi người khiếm thị giúp cho họ có thể cập nhật tin tức dễ dàng,...

Hướng dẫn tạo nút audio tại nukeviet

Thêm đoạn code phía dưới vào detail.tpl tìm file (DETAIL.publtime)
<div class="col-md-6">
     <span class="">{DETAIL.publtime}</span>&nbsp;&nbsp; Đọc bằng audio
     <a onclick="speek()"><em id="chay" class="fa fa-play fa-lg">&nbsp;</em></a>
     <a onclick="pause()"><em id="dung" class="fa fa-pause fa-lg">&nbsp;</em></a>
</div>
Tiếp theo chúng ta truy cập vào link : https://responsivevoice.org/api/  để tạo key cho site. Tiếp theo chúng ta tạo tài khoản và add site cần đọc của mình vào và trả về đường dẫn mã key như dưới đây:

<script src="https://code.responsivevoice.org/responsivevoice.js?key="NHAP-KEY"></script>

Tiếp tục sao chép đoạn javacript vào phía dưới đoạn script vừa thêm
<script>
    function speek(){
        responsiveVoice.speak(document.getElementById("news-bodyhtml").textContent, "Vietnamese Female");
        document.getElementById("chay").style.display = "none";
        document.getElementById("dung").style.display = "block";
    }
    function pause(){
     responsiveVoice.pause();
        document.getElementById("chay").style.display = "block";
        document.getElementById("dung").style.display = "none";
    }
</script>
Tiếp theo chúng ta thêm 1 chút css tùy biến để phù hợp với site
#dung{
  display: none;
}
Mong bài viết của mình sẽ giúp ích được các bạn phần nào cho website của bạn được sinh động hơn. Hãy nhấn nút  Like và chia sẽ để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.

Tác giả: admin

Tổng số điểm của bài viết là: 5 trong 1 đánh giá

Xếp hạng: 5 - 1 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây