Xây dựng Avatar Giọng Nói Tương Tác Trong React Với Glasatar.js

Ngày càng nhiều ứng dụng AI yêu cầu giao diện giọng nói và phát biểu. Cách mà chúng trông và chuyển động, cũng như âm thanh của chúng, đóng vai trò quan trọng trong cách người dùng cảm nhận. Trong bài viết này, chúng ta sẽ tìm hiểu cách xây dựng một thư viện React (và JavaScript thuần) mang tên Glasatar (glasatarjs) biến một luồng âm thanh bình thường thành một avatar giọng nói sống động.

Tóm tắt về Glasatar

Glasatar là một thư viện mạnh mẽ với các đặc điểm nổi bật:

Chạy trên WebGL: Tạo ra các hiệu ứng GPU đẹp mắt trong trình duyệt.
Thân thiện với React: Có thể sử dụng như một component trong ứng dụng React của bạn.
Có thể cấu hình: Thay đổi chất liệu, độ mờ, độ khúc xạ, màu sắc, nền... bạn có thể tùy chỉnh mọi thứ.
Mã nguồn mở: Được cấp phép MIT, thoải mái sử dụng và phát triển.

Glasatar hoạt động cả trong môi trường React và như một thư viện JavaScript thuần nếu bạn không muốn sử dụng React.

Thử nghiệm trực tiếp

👉 Truy cập Glasatar.com để trải nghiệm demo và thử nghiệm với các thiết kế của riêng bạn. Đừng quên chia sẻ thiết kế của bạn! Hãy đeo tai nghe, nhấn “cho phép mic” và nói điều gì đó để thấy hiệu ứng thú vị.

Bắt đầu với React

Để cài đặt Glasatar, bạn có thể sử dụng npm:

bash Copy

npm install @jimhill/glasatarjs

Sau đó, bạn có thể nhập component vào ứng dụng của mình:

javascript Copy

import React, { useState } from "react";
import { Glasatar } from "@jimhill/glasatarjs";

function VoiceAvatar() {
  const [audioStream, setAudioStream] = useState(null);

  const startMic = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    setAudioStream(stream);
  };

  return (
    <div>
      <button onClick={startMic}>Bắt đầu Avatar Giọng Nói</button>
      {audioStream && (
        <Glasatar
          audioStream={audioStream}
          width={400}
          height={400}
          texture="cathedral"
          refractionStrength={15}
          blurAmount={8}
          glassOpacity={0.9}
          avatarColor="#ff9900"
          backgroundType="linear-gradient"
          backgroundGradient={{
            centerColor: "#ff9900",
            edgeColor: "#0000ff",
            angle: 45,
          }}
        />
      )}
    </div>
  );
}

export default VoiceAvatar;

Thiết kế avatar của bạn

Phần thú vị là điều chỉnh các thuộc tính. Dưới đây là một số tham số bạn có thể điều chỉnh:

texture: "arctic", "cathedral", "autumn", "flemish".
refractionStrength: Tăng cường độ khúc xạ để có hiệu ứng mạnh mẽ hơn.
blurAmount: Làm mềm kính hoặc tạo ra hiệu ứng sắc nét.
avatarColor: Tùy chỉnh màu sắc theo ý thích.
backgroundType: Màu đơn, gradient hoặc hình ảnh tùy chỉnh.

Thay đổi các chất liệu và tham số cho đến khi bạn tìm thấy điều gì đó phù hợp với ứng dụng của mình.

Ứng dụng của Glasatar

Glasatar có thể hữu ích trong nhiều trường hợp:

Ứng dụng trò chuyện giọng nói (như Discord nhưng độc đáo hơn).
Công cụ podcasting (hình ảnh hóa người dẫn chương trình khi họ nói).
Overlay cho livestream (cho phép mic tạo hiệu ứng thú vị).
Sự kiện ảo / hackathons / trò chơi.

Hoặc chỉ đơn giản là vì nó thật sự thú vị?!

Thực tiễn tốt nhất

Luôn kiểm tra quyền truy cập mic: Đảm bảo rằng ứng dụng của bạn đã yêu cầu quyền truy cập mic trước khi sử dụng.
Sử dụng headphone: Để có trải nghiệm âm thanh tốt nhất và tránh tiếng vọng.
Tối ưu hóa hiệu suất: Thử nghiệm với các cấu hình khác nhau để tìm ra thiết lập tốt nhất cho ứng dụng của bạn.

Những cạm bẫy thường gặp

Không nhận được âm thanh: Đảm bảo rằng mic của bạn đang hoạt động và quyền truy cập đã được cấp.
Hiệu ứng không như mong đợi: Kiểm tra lại các tham số đã thiết lập, có thể bạn cần điều chỉnh độ khúc xạ hoặc chất liệu.

Mẹo hiệu suất

Giảm kích thước canvas: Nếu bạn gặp vấn đề về hiệu suất, thử giảm kích thước của canvas nơi Avatar được render.
Sử dụng các chất liệu nhẹ hơn: Một số texture có thể nặng hơn và làm giảm tốc độ render.

Giải quyết sự cố

Nếu bạn gặp phải sự cố, hãy thử:

Kiểm tra console: Xem có lỗi nào xuất hiện trong trình duyệt.
Đặt lại các tham số: Nếu mọi thứ không hoạt động, hãy thử khởi động lại ứng dụng và đặt lại các tham số của Glasatar.

Kết luận

Đây là một dự án độc lập mà tôi xây dựng chỉ để giải trí, nhưng tôi rất mong muốn thấy những gì mọi người sẽ làm với nó. Nếu bạn thử nghiệm:

⭐ Đánh giá repo trên GitHub: github.com/jimhill/glasatarjs
Gửi vấn đề / yêu cầu tính năng qua x.com/jimhilluk hoặc bsky.app/profile/jimhill.uk
Chia sẻ thiết kế của bạn trong phần bình luận.
Nếu bạn tạo ra điều gì đó thú vị, hãy chia sẻ một demo!

Cảm ơn bạn đã theo dõi. Hy vọng bài viết này hữu ích cho bạn. ✌️

Xây dựng avatar giọng nói tương tác trong React với GlasatarJS