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.