Lập hồ sơ ứng dụng âm thanh web trong Chrome

Tìm hiểu cách phân tích hiệu suất của ứng dụng Âm thanh trên web trong Chrome bằng about://tracing và Audion (một tiện ích WebAudio trong Công cụ của Chrome cho nhà phát triển).

Hongchan Choi
X Trang chủ

Bạn đọc được bài viết này có thể là do bạn đang phát triển một ứng dụng sử dụng Web Audio API và gặp phải sự cố không mong muốn như phát ra tiếng ồn từ đầu ra hoặc bạn nghe thấy âm thanh không mong muốn. Có thể bạn đã tham gia vào một cuộc thảo luận trên crbug.com và một kỹ sư của Chrome đã yêu cầu bạn tải "dữ liệu theo dõi" lên hoặc xem hình ảnh trực quan của biểu đồ. Bài viết này hướng dẫn cách lấy thông tin liên quan để chúng ta có thể hiểu được vấn đề và cuối cùng là khắc phục vấn đề cơ bản.

Công cụ phân tích âm thanh trên web

Có 2 công cụ sẽ hữu ích cho bạn khi phân tích Âm thanh web là about://tracing và tiện ích WebAudio trong Công cụ của Chrome cho nhà phát triển.

Bạn sử dụng about://tracing khi nào?

Khi "sự cố" bí ẩn xảy ra. Việc phân tích ứng dụng bằng các công cụ theo dõi cung cấp cho bạn thông tin chi tiết về:

  • Các lát cắt thời gian dành cho các lệnh gọi hàm cụ thể trên các luồng khác nhau
  • Thời gian gọi lại âm thanh trong chế độ xem theo dòng thời gian

Thông báo này thường cho thấy thời hạn gọi lại âm thanh bị lỡ hoặc việc thu thập rác lớn có thể gây ra các sự cố âm thanh không mong muốn. Thông tin này rất hữu ích trong việc tìm hiểu vấn đề cơ bản. Vì vậy, các kỹ sư của Chromium thường hỏi thông tin này, đặc biệt khi việc tái tạo cục bộ không khả thi. Bạn có thể xem hướng dẫn chung về cách theo dõi tại đây.

Bạn sử dụng tiện ích Công cụ cho nhà phát triển âm thanh trên web khi nào?

Khi bạn muốn trực quan hoá biểu đồ âm thanh và theo dõi hiệu suất của trình kết xuất âm thanh theo thời gian thực. Biểu đồ âm thanh, một mạng gồm các đối tượng AudioNode để tạo và tổng hợp luồng âm thanh, thường phức tạp nhưng cấu trúc liên kết biểu đồ lại bị mờ theo thiết kế. (API Web Audio không có tính năng xem xét nội dung nút/biểu đồ.) Một số thay đổi xảy ra trong biểu đồ và giờ đây bạn không nghe thấy. Sau đó, đã đến lúc gỡ lỗi bằng cách lắng nghe. Việc này chưa bao giờ dễ dàng và trở nên khó khăn hơn khi bạn có một biểu đồ âm thanh lớn hơn. Tiện ích Web Audio DevTools có thể giúp bạn bằng cách trực quan hoá biểu đồ.

Với tiện ích này, bạn có thể theo dõi số liệu ước tính đang chạy về khả năng kết xuất, cho biết hiệu suất của trình kết xuất âm thanh trên web trong một ngân sách kết xuất nhất định (ví dụ: khoảng 2,67 mili giây @ 48KHz). Nếu công suất đạt gần 100%, điều đó có nghĩa là ứng dụng của bạn có thể gây ra sự cố vì trình kết xuất không hoàn tất công việc trong phạm vi ngân sách cho trước.

Sử dụng about://tracing

Cách thu thập dữ liệu theo dõi

Hướng dẫn dưới đây dành cho Chrome 80 trở lên.

Để có kết quả tốt nhất, hãy đóng tất cả các thẻ và cửa sổ khác, đồng thời tắt các tiện ích. Ngoài ra, bạn có thể ra mắt một phiên bản Chrome mới hoặc sử dụng các bản dựng khác từ các kênh phát hành khác (ví dụ: bản Beta hoặc Canary). Sau khi trình duyệt của bạn đã sẵn sàng, hãy làm theo các bước bên dưới:

  1. Mở ứng dụng của bạn (trang web) trên một thẻ.
  2. Mở một thẻ khác rồi chuyển đến about://tracing.
  3. Nhấn vào nút Ghi lại rồi chọn Chọn cài đặt theo cách thủ công.
  4. Nhấn vào các nút None (Không) trên cả hai phần RecordRecord (Danh mục bản ghi) và Disabled by Default Category (Danh mục mặc định bị tắt).
  5. Trong phần Record Category (Bản ghi danh mục), hãy chọn các mục sau:
    • audio
    • blink_gc
    • media
    • v8.execute (nếu bạn quan tâm đến việc AudioWorklet hiệu suất của mã JS)
    • webaudio
  6. Trong phần Tắt theo danh mục mặc định, hãy chọn các mục sau:
    • audio-worklet (nếu bạn quan tâm đến điểm bắt đầu của chuỗi AudioWorklet)
    • webaudio.audionode (nếu bạn cần dấu vết chi tiết cho từng AudioNode)
  7. Nhấn nút Record (Ghi) ở dưới cùng.
  8. Quay lại thẻ ứng dụng rồi làm lại các bước gây ra vấn đề.
  9. Khi bạn có đủ dữ liệu theo dõi, hãy quay lại thẻ theo dõi rồi nhấn vào Dừng.

  10. Thẻ theo dõi sẽ trực quan hoá kết quả.

    Ảnh chụp màn hình sau khi quá trình theo dõi hoàn tất.

  11. Nhấn Lưu để lưu dữ liệu theo dõi.

Cách phân tích dữ liệu theo dõi

Dữ liệu theo dõi trực quan hoá cách công cụ âm thanh trên web của Chrome kết xuất âm thanh. Trình kết xuất có 2 chế độ kết xuất: Chế độ hệ điều hành và Chế độ worklet. Mỗi chế độ sử dụng một mô hình phân luồng khác nhau, do đó, kết quả theo dõi cũng khác nhau.

Chế độ hệ điều hành

Ở chế độ hệ điều hành, luồng AudioOutputDevice sẽ chạy tất cả mã âm thanh trên web. AudioOutputDevice là một luồng ưu tiên theo thời gian thực bắt nguồn từ Dịch vụ âm thanh của trình duyệt, hoạt động theo đồng hồ phần cứng âm thanh. Nếu bạn thấy sự bất thường từ dữ liệu theo dõi trong làn này, điều đó có nghĩa là thời gian gọi lại từ thiết bị có thể dao động. Sự kết hợp giữa Linux và Pulse Audio được biết là đã gây ra sự cố này. Hãy xem các vấn đề sau đây với Chromium để biết thêm thông tin chi tiết: #825823, #864463.

Ảnh chụp màn hình kết quả theo dõi chế độ hệ điều hành.

Chế độ Worklet

Trong Chế độ Worklet, được đặc trưng bằng cách chuyển một luồng từ AudioOutputDevice sang luồng AudioWorklet, bạn sẽ thấy các dấu vết được căn chỉnh phù hợp trong hai làn luồng như minh hoạ dưới đây. Khi worklet được kích hoạt, tất cả hoạt động âm thanh trên web sẽ được kết xuất bằng luồng AudioWorklet. Luồng này hiện không phải là luồng ưu tiên theo thời gian thực. Điểm bất thường phổ biến ở đây là một khối lớn do việc thu gom rác hoặc lỡ thời hạn kết xuất. Cả hai trường hợp đều dẫn đến sự cố trong luồng âm thanh.

Ảnh chụp màn hình kết quả theo dõi chế độ worklet.

Trong cả hai trường hợp, dữ liệu theo dõi lý tưởng được đặc trưng bởi các lệnh gọi lại thiết bị âm thanh được căn chỉnh phù hợp và các tác vụ kết xuất được hoàn thành tốt trong phạm vi ngân sách kết xuất nhất định. Hai ảnh chụp màn hình ở trên là ví dụ tuyệt vời về dữ liệu theo dõi lý tưởng.

Học hỏi từ ví dụ thực tế

Ví dụ 1: Những nhiệm vụ kết xuất vượt quá ngân sách kết xuất

Ảnh chụp màn hình bên dưới (vấn đề về Chromium #796330) là một ví dụ điển hình về trường hợp mã trong AudioWorkletProcessor mất quá nhiều thời gian và vượt quá ngân sách hiển thị nhất định. Thời gian gọi lại hoạt động tốt nhưng lệnh gọi hàm xử lý âm thanh của API Web Audio không thể hoàn tất công việc trước lần gọi lại thiết bị tiếp theo.

Biểu đồ cho thấy sự cố âm thanh do tác vụ hiển thị vượt quá ngân sách.

Lựa chọn dành cho bạn:

  • Giảm khối lượng công việc của biểu đồ âm thanh bằng cách sử dụng ít thực thể AudioNode hơn.
  • Giảm khối lượng công việc của mã trong AudioWorkletProcessor.
  • Tăng độ trễ cơ bản lên AudioContext.

Ví dụ 2: Thu thập rác đáng kể trên luồng worklet

Không giống như trên luồng kết xuất âm thanh của hệ điều hành, việc thu thập rác được quản lý trên luồng worklet. Điều đó có nghĩa là nếu mã của bạn thực hiện phân bổ/giải phóng bộ nhớ (ví dụ: các mảng mới), thì cuối cùng mã sẽ kích hoạt một hoạt động thu thập rác giúp chặn đồng bộ luồng. Nếu khối lượng công việc của hoạt động âm thanh trên web và thu gom rác lớn hơn ngân sách hiển thị nhất định, thì luồng âm thanh sẽ gặp sự cố. Ảnh chụp màn hình sau đây là một ví dụ điển hình của trường hợp này.

Các sự cố âm thanh do thu gom rác gây ra.

Lựa chọn dành cho bạn:

  • Phân bổ trước bộ nhớ và sử dụng lại bất cứ khi nào có thể.
  • Sử dụng các mẫu thiết kế khác nhau dựa trên SharedArrayBuffer. Mặc dù đây không phải là giải pháp hoàn hảo, nhưng một số ứng dụng âm thanh trên web sử dụng mẫu tương tự với SharedArrayBuffer để chạy mã âm thanh chuyên sâu. Ví dụ:

Ví dụ 3: Lệnh gọi lại thiết bị âm thanh có nhiễu từ AudioOutputDevice

Thời gian chính xác của lệnh gọi lại âm thanh là điều quan trọng nhất đối với âm thanh trên web. Đây sẽ là đồng hồ chính xác nhất trong hệ thống của bạn. Nếu hệ điều hành hoặc hệ thống âm thanh con của hệ điều hành đó không thể đảm bảo thời gian gọi lại ổn định, thì tất cả các hoạt động tiếp theo sẽ bị ảnh hưởng. Hình ảnh sau đây là ví dụ về lệnh gọi lại âm thanh có sự biến động. So với 2 hình ảnh trước, khoảng thời gian giữa mỗi lệnh gọi lại khác nhau đáng kể.

Ảnh chụp màn hình so sánh thời gian gọi lại không ổn định với thời gian gọi lại ổn định.

Lựa chọn dành cho bạn:

  • Tăng dung lượng bộ nhớ đệm lệnh gọi lại âm thanh hệ thống bằng cách điều chỉnh tuỳ chọn latencyHint.
  • Nếu bạn gặp phải sự cố, hãy gửi vấn đề lên crbug.com kèm theo dữ liệu theo dõi.

Sử dụng tiện ích Công cụ cho nhà phát triển âm thanh trên web

Bạn cũng có thể sử dụng tiện ích Công cụ cho nhà phát triển được thiết kế riêng cho API Web âm thanh. Không giống như công cụ theo dõi, tính năng này cho phép kiểm tra biểu đồ và chỉ số hiệu suất theo thời gian thực.

Bạn cần cài đặt tiện ích này từ Cửa hàng Chrome trực tuyến.

Sau khi cài đặt, bạn sẽ truy cập vào bảng điều khiển bằng cách mở Công cụ của Chrome cho nhà phát triển rồi nhấp vào "Âm thanh web" ở trình đơn trên cùng.

Ảnh chụp màn hình cho thấy cách mở bảng điều khiển Âm thanh trên web trong Công cụ của Chrome cho nhà phát triển.

Bảng điều khiển Web Audio có 4 thành phần: bộ chọn ngữ cảnh, công cụ kiểm tra thuộc tính, trình trực quan hoá biểu đồ và trình theo dõi hiệu suất.

Ảnh chụp màn hình bảng điều khiển Âm thanh trên web trong Công cụ của Chrome cho nhà phát triển.

Bộ chọn ngữ cảnh

Vì một trang có thể có nhiều đối tượng BaseAudioContext, nên trình đơn thả xuống này sẽ cho phép bạn chọn ngữ cảnh mà bạn muốn kiểm tra. Bạn cũng có thể kích hoạt tính năng thu gom rác theo cách thủ công bằng cách nhấp vào biểu tượng thùng rác ở bên trái.

Trình kiểm tra tài sản

Bảng điều khiển bên cho thấy nhiều thuộc tính của ngữ cảnh do người dùng chọn hoặc AudioNode. Không hỗ trợ kiểm tra các giá trị động trong AudioParam.

Trình trực quan hoá biểu đồ

Chế độ xem này hiển thị cấu trúc liên kết biểu đồ hiện tại của một ngữ cảnh do người dùng chọn. Hình ảnh trực quan này thay đổi linh hoạt theo thời gian thực. Bằng cách nhấp vào một phần tử trong hình ảnh, bạn có thể kiểm tra thông tin chi tiết về công cụ kiểm tra tài sản.

Trình theo dõi hiệu suất

Thanh trạng thái ở dưới cùng chỉ hoạt động khi BaseAudioContext được chọn là một AudioContext, chạy theo thời gian thực. Thanh này cho thấy chất lượng luồng âm thanh tức thì của AudioContext đã chọn và được cập nhật mỗi giây. Phương thức này cung cấp các thông tin sau:

  • Khoảng thời gian gọi lại (ms): Hiển thị giá trị trung bình/biến thể có trọng số của khoảng thời gian gọi lại. Lý tưởng nhất là giá trị trung bình phải ổn định và phương sai phải gần bằng 0. Nếu bạn thấy sự chênh lệch lớn, thì tức là hàm gọi lại âm thanh ở cấp hệ thống có thời gian không ổn định, có thể dẫn đến chất lượng luồng âm thanh kém. (Xem ví dụ 3 ở trên.)

  • Khả năng kết xuất (phần trăm): Khi công suất đạt gần 100%, điều đó có nghĩa là trình kết xuất đang hoạt động quá nhiều so với ngân sách kết xuất đã cho. Vì vậy, bạn nên cân nhắc thực hiện ít đối tượng hơn (ví dụ: sử dụng ít đối tượng AudioNodes hơn trong biểu đồ).

Bạn có thể kích hoạt trình thu gom rác theo cách thủ công bằng cách nhấp vào biểu tượng thùng rác.

Bảng điều khiển Công cụ cho nhà phát triển WebAudio cũ

Hiện tại, tiện ích này là một phương thức được nhóm Âm thanh web của Chrome đề xuất. Tuy nhiên, bạn cũng có thể sử dụng bảng điều khiển Công cụ cho nhà phát triển WebAudio cũ. Bạn có thể truy cập vào bảng điều khiển này bằng cách nhấp vào trình đơn "ba dấu chấm" ở góc trên cùng bên phải của Công cụ cho nhà phát triển, sau đó chuyển đến Công cụ khác, sau đó chọn WebAudio.

Ảnh chụp màn hình cho thấy cách mở bảng điều khiển WebAudio trong Công cụ của Chrome cho nhà phát triển.

Kết luận

Việc gỡ lỗi âm thanh là một việc khó khăn. Việc gỡ lỗi âm thanh trong trình duyệt thậm chí còn khó hơn. Tuy nhiên, các công cụ này có thể giúp bạn giảm bớt gánh nặng bằng cách cung cấp cho bạn thông tin chi tiết hữu ích về hiệu suất của mã âm thanh trên web. Tuy nhiên, trong một số trường hợp, bạn có thể gặp sự cố trong Chrome hoặc tiện ích. Sau đó, đừng ngại gửi báo lỗi trên crbug.com hoặc công cụ theo dõi lỗi tiện ích.

Ảnh chụp của Jonathan Velasquez trên Unsplash