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

Tìm hiểu cách lập hồ sơ hiệu suất của các ứng dụng Web Audio trong Chrome bằng about://tracing và Audion (tiện ích WebAudio trong Chrome DevTools).

Có thể bạn truy cập vào tài liệu này vì đang phát triển một ứng dụng sử dụng Web Audio API và gặp phải các trục trặc không mong muốn, chẳng hạn như tiếng nổ từ đầu ra hoặc bạn nghe thấy âm thanh không mong đợi. 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ư Chrome đã yêu cầu bạn tải "dữ liệu theo dõi" lên hoặc xem xét hình ảnh trực quan của biểu đồ.

Tìm hiểu cách thu thập thông tin liên quan để chúng tôi có thể hiểu rõ vấn đề và cuối cùng là khắc phục vấn đề cơ bản.

Công cụ lập hồ sơ Web Audio

Có 2 công cụ sẽ giúp bạn khi lập hồ sơ Web Audio, đó là about://tracing và tiện ích WebAudio trong Chrome DevTools.

Khi nào bạn sử dụng about://tracing?

Khi xảy ra các "trục trặc" bí ẩn. Việc lập hồ sơ ứng dụng bằng các công cụ theo dõi sẽ giúp bạn nắm được thông tin chi tiết về:

• Các lát thời gian mà các lệnh gọi hàm cụ thể đã sử dụng trên nhiều luồng
• Thời gian gọi lại âm thanh trong chế độ xem dòng thời gian

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

Khi nào bạn sử dụng tiện ích Web Audio DevTools?

Khi bạn muốn hình dung 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 lưới các đối tượng AudioNode để tạo và tổng hợp luồng âm thanh, thường trở nên phức tạp nhưng cấu trúc liên kết biểu đồ được thiết kế để không rõ ràng. (Web Audio API không có các tính năng để kiểm tra nội bộ nút/biểu đồ.) Một số thay đổi xảy ra trong biểu đồ và giờ đây bạn nghe thấy sự im lặng. Sau đó, bạn cần gỡ lỗi bằng cách lắng nghe. Việc này không bao giờ dễ dàng và sẽ 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 hình dung biểu đồ.

Với tiện ích này, bạn có thể theo dõi ướ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 web trong một ngân sách kết xuất nhất định (chẳng hạn như khoảng 2, 67 ms ở tần số 48 KHz). Nếu khả năng này gần đạt 100%, thì có nghĩa là ứng dụng của bạn có thể sẽ tạo ra các trục trặc vì trình kết xuất không hoàn thành công việc trong ngân sách đã cho.

Sử dụng about://tracing

Để 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ể khởi chạy một phiên bản Chrome mới hoặc sử dụng các bản dựng khác từ nhiều kênh phát hành (ví dụ: Beta hoặc Canary). Sau khi bạn đã chuẩn bị xong trình duyệt:

1. Mở ứng dụng (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 Record (Ghi) rồi chọn Manually select settings (Chọn chế độ cài đặt theo cách thủ công).
4. Nhấn vào nút None (Không có) trên cả phần Record Categories (Danh mục ghi) và Disabled by Default Categories (Danh mục bị tắt theo mặc định).
5. Trong phần Record Categories (Danh mục ghi), hãy chọn những danh mục sau:
   • audio
   • blink_gc
   • media
   • v8.execute (nếu bạn quan tâm đến hiệu suất mã JS AudioWorklet)
   • webaudio
6. Trong phần Disabled by Default Categories (Danh mục bị tắt theo mặc định), hãy chọn những danh mục sau:
   • audio-worklet (nếu bạn quan tâm đến vị trí bắt đầu của luồng AudioWorklet)
   • webaudio.audionode (nếu bạn cần dấu vết chi tiết cho từng AudioNode)
7. Nhấn vào nút Record (Ghi) ở dưới cùng.
8. Quay lại thẻ ứng dụng rồi thực hiện lại các bước đã kích hoạt vấn đề.
9. Khi có đủ dữ liệu theo dõi, hãy quay lại thẻ theo dõi rồi nhấn vào Stop (Dừng).

10. Thẻ theo dõi sẽ hình dung kết quả.

    

11. Nhấn vào Save (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 hình dung cách công cụ âm thanh 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, vì vậy, 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 chạy tất cả mã âm thanh 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, được điều khiển bởi đồ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, thì có nghĩa là thời gian gọi lại từ thiết bị có thể bị rung. Sự kết hợp giữa Linux và Pulse Audio được biết là có vấn đề này.

Xem các vấn đề sau đây của Chromium để biết thêm thông tin chi tiết: #825823, #864463.

Chế độ worklet

Ở Chế độ worklet, được đặc trưng bởi một bước nhảy luồng từ AudioOutputDevice sang luồng AudioWorklet thread, bạn sẽ thấy các dấu vết được căn chỉnh tốt trong 2 làn luồng. Khi worklet được kích hoạt, tất cả các thao tác âm thanh web sẽ được kết xuất bởi luồng AudioWorklet. Luồng này không phải là mức ưu tiên theo thời gian thực.

Sự bất thường thường gặp ở đây là một khối lớn do quá trình thu thập rác hoặc thời hạn kết xuất bị bỏ lỡ. Cả hai trường hợp đều dẫn đến các trục trặc trong luồng âm thanh.

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 tốt và các tác vụ kết xuất được hoàn thành tốt trong ngân sách kết xuất đã cho. Hai ảnh chụp màn hình là những ví dụ điển hình về dữ liệu theo dõi lý tưởng.

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

Ví dụ 1: Các tác 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 đề 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 kết xuất đã cho. 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 Web Audio API không hoàn thành công việc trước khi gọi lại thiết bị tiếp theo.

Các lựa chọn của 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 phiên bản AudioNode hơn.
• Giảm khối lượng công việc của mã trong AudioWorkletProcessor.
• Tăng độ trễ cơ bản của 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, quá trình 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 việc phân bổ/huỷ phân bổ bộ nhớ (ví dụ: mảng mới), thì cuối cùng, mã đó sẽ kích hoạt quá trình thu thập rác, chặn luồng một cách đồng bộ. Nếu khối lượng công việc của các thao tác âm thanh web và quá trình thu thập rác lớn hơn ngân sách kết xuất đã cho, thì điều này sẽ dẫn đến các trục trặc trong luồng âm thanh. Ảnh chụp màn hình sau đây là một ví dụ cực đoan về trường hợp này.

Các lựa chọn của bạn:

• Phân bổ bộ nhớ trước và sử dụng lại bộ nhớ đó 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 Web Audio sử dụng một mẫu tương tự với SharedArrayBuffer để chạy mã âm thanh chuyên sâu. Ví dụ:
  • Mẫu thiết kế worklet âm thanh

Ví dụ 3: Gọi lại thiết bị âm thanh bị rung 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 web. Đây phải 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 con âm thanh 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 thao tác tiếp theo sẽ bị ảnh hưởng. Hình ảnh sau đây là một ví dụ về lệnh gọi lại âm thanh bị rung. So với 2 hình ảnh trước, khoảng thời gian giữa mỗi lệnh gọi lại thay đổi đáng kể.

Các lựa chọn của bạn:

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

Sử dụng tiện ích Web Audio DevTools

Bạn cũng có thể sử dụng tiện ích DevTools được thiết kế riêng cho Web Audio API. Không giống như công cụ theo dõi, công cụ này cung cấp tính năng kiểm tra biểu đồ và các 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 có thể truy cập vào bảng điều khiển bằng cách mở Chrome DevTools rồi nhấp vào "Web Audio" (Âm thanh web) trên trình đơn trên cùng.

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

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 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 quá trình thu thập 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 thuộc tính

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 kết xuất 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 động theo thời gian thực. Bằng cách nhấp vào một phần tử trong hình ảnh trực quan, bạn có thể kiểm tra thông tin chi tiết trên trình kiểm tra thuộc tính.

Trình giám sát hiệu suất

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

• Khoảng thời gian gọi lại (ms): Hiển thị phương sai hoặc giá trị trung bình 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 phương sai lớn, thì có nghĩa là hàm callback â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).

• Khả năng kết xuất (phần trăm): Khi khả năng này gần đạt 100%, thì có nghĩa là trình kết xuất đang thực hiện quá nhiều cho một 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 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 thập 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 WebAudio DevTools cũ

Tiện ích này hiện là phương thức được nhóm Web Audio của Chrome đề xuất, nhưng bảng điều khiển WebAudio DevTools cũ cũng có sẵn. 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 bên phải của DevTools, sau đó chuyển đến Công cụ khác, rồi đến WebAudio.

Kết luận

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