Tiếng vợt chạm bóng, tiếng bóng nảy, tiếng động cơ gầm lên khi xe tăng tốc — trong các ứng dụng của AppGiaiTri, không tiếng nào trong số đó là một tệp ghi âm. Chúng được tạo ra ngay trên máy, tại đúng khoảnh khắc cần nghe, bằng vài dòng mã. Bài này giải thích cách làm đó: vì sao chọn nó, âm thanh được “nặn” ra từ đâu, và những cái bẫy riêng của iPhone mà ai làm âm thanh web cũng phải đi qua.
Vì sao không dùng tệp ghi âm cho xong?
Tệp âm thanh là cách quen thuộc và cho chất lượng tự nhiên nhất. Nhưng với ứng dụng chạy trên trình duyệt, nó có ba cái giá:
- Dung lượng. Mỗi hiệu ứng vài chục kilobyte, nhân lên vài chục hiệu ứng, cộng nhạc nền vài megabyte — tất cả phải tải trước khi chơi và cất vào kho khi mất mạng. Âm thanh tạo bằng mã chỉ tốn vài dòng chữ.
- Không đổi theo tình huống. Một tệp ghi tiếng đánh bóng thì lần nào cũng y hệt. Tiếng tạo bằng mã có thể to hơn, cao hơn khi cú đánh mạnh hơn — mà không cần thêm tệp nào.
- Âm liên tục biến thiên gần như không thể ghi sẵn. Tiếng động cơ phải trượt đều theo tốc độ xe từng khoảnh khắc. Ghép từ các đoạn ghi âm thì nghe ra “bậc thang”, tạo bằng mã thì trượt mượt.
Đổi lại, âm thanh tổng hợp nghe “điện tử” hơn, hợp với phong cách tươi sáng, gọn gàng. Đó là lựa chọn có chủ ý chứ không phải tiết kiệm công.
Hộp đồ nghề: bốn khối ghép
Trình duyệt có sẵn một bộ công cụ âm thanh gọi là Web Audio. Hãy hình dung nó như bàn trộn âm thanh trong phòng thu, nơi ta cắm dây nối các khối với nhau. Gần như mọi tiếng động trong ứng dụng của AppGiaiTri chỉ dùng bốn khối:
| Khối | Làm gì | Ví dụ đời thường |
|---|---|---|
| Bộ tạo dao động | Phát ra một nốt có cao độ, với hình sóng tròn, vuông, tam giác hoặc răng cưa | Tiếng còi, tiếng “tít” máy móc |
| Tiếng ồn trắng | Một dãy số ngẫu nhiên phát thành âm, nghe như tiếng xè xè của đài mất sóng | Tiếng gió, tiếng vỗ tay, tiếng va chạm |
| Bộ lọc | Cắt bớt âm cao hoặc âm trầm | Như nghe nhạc qua bức tường: chỉ còn tiếng bùm bùm |
| Bộ chỉnh âm lượng | Tăng giảm độ to theo thời gian, rất nhanh và rất chính xác | Tay đẩy cần trên bàn trộn |
Bí quyết nằm ở khối cuối cùng. Một âm thanh nghe “giống thật” hay không phụ thuộc nhiều vào hình dạng độ to theo thời gian hơn là vào chất âm. Tiếng gõ nào cũng bật lên gần như tức thì rồi tắt dần; tiếng gió thì lên từ từ. Chỉ cần đúng hình dạng đó, tai người sẽ tự điền phần còn lại.
Mổ xẻ ba tiếng động có thật
Tiếng vợt chạm bóng
Trong Giao Đấu, tiếng đánh bóng là hai lớp chồng lên nhau, cùng kéo dài chưa tới một phần mười giây:
- Một cú xè ngắn từ tiếng ồn trắng, lọc bớt phần quá chói — đó là tiếng “bốp” của mặt vợt.
- Một nốt tam giác trượt từ cao xuống thấp — đó là cảm giác “căng” của dây vợt.
Điểm đáng giá: cao độ và độ to của cả hai lớp tỉ lệ với lực cú đánh. Cú đánh mạnh nghe sắc và vang hơn, cú bỏ nhỏ nghe khẽ. Người chơi không để ý chuyện này, nhưng nếu tắt đi họ sẽ thấy ngay có gì đó “sai sai”. Tiếng bóng nảy xuống sân thì đơn giản hơn nữa: một nốt tròn, trầm, trượt xuống một quãng tám trong vài phần trăm giây — như tiếng “bịch”.
Tiếng khán giả reo
Tiếng reo sau một điểm đẹp là tiếng ồn trắng kéo dài hơn một giây, qua bộ lọc có tần số cắt trượt dần từ cao xuống thấp. Tai nghe ra một đám đông “ồ” lên rồi lắng xuống. Không có giọng người nào trong đó cả.
Tiếng động cơ trong Rượt Đuổi
Đây là tiếng phức tạp nhất và cũng thú vị nhất. Trong Rượt Đuổi, tiếng động cơ không phát theo từng lần, mà chạy liên tục suốt cuộc đua:
- Hai bộ tạo dao động chạy song song: một sóng răng cưa (nghe gắt, nhiều “gai”) và một sóng vuông thấp hơn khoảng một quãng tám (tạo độ dày, độ rền).
- Cả hai đi qua một bộ lọc cắt âm cao, để tiếng rền trầm như động cơ thật chứ không chói như còi.
- Mỗi khung hình, ứng dụng đọc tốc độ xe và kéo cao độ của cả hai lên tương ứng. Với ô tô, nốt chính đi từ khoảng 55 dao động mỗi giây khi đứng yên lên khoảng 225 khi chạy hết ga.
Ba loại phương tiện dùng chung một “động cơ âm thanh” nhưng khác thông số. Xe máy có dải cao hơn và bộ lọc mở rộng hơn, nên nghe rít và gắt. Cano có dải thấp nhất và bộ lọc hẹp nhất, nên nghe trầm và đục như đang ở dưới nước. Chỉ ba bộ số khác nhau, người chơi nhận ra ngay mình đang lái gì.
Một chi tiết người làm hay sai: nếu đặt cao độ nhảy thẳng tới giá trị mới mỗi khung hình, tai sẽ nghe tiếng lách tách li ti. Cách đúng là ra lệnh “trượt dần về giá trị mới” trong vài phần trăm giây. Web Audio có sẵn lệnh đó, và nó chạy trên đồng hồ riêng của bộ âm thanh, không phụ thuộc vòng vẽ hình có giật hay không.
Nhạc nền cũng được “chơi sống”
Nhạc nền trong các ứng dụng này không phải bản nhạc thu sẵn mà là một vòng hợp âm được máy chơi theo nhịp: tiếng bass trầm ở mỗi phách, nốt rải của hợp âm, có khi thêm một giai điệu. Mỗi môn trong Giao Đấu có một nhịp độ riêng — bóng bàn nhanh hơn, pickleball thong thả hơn.
Cái khó ở đây là giữ nhịp đều. Đồng hồ hẹn giờ thông thường của trình duyệt không chính xác: bận vẽ hình là nó trễ vài phần trăm giây, đủ để nhạc lệch phách. Cách giải mà dân làm âm thanh web dùng là hai đồng hồ: một đồng hồ thô, cứ khoảng 80 phần nghìn giây thức dậy một lần; mỗi lần thức, nó xếp lịch trước các nốt sẽ vang trong ba phần mười giây tới lên đồng hồ chính xác của bộ âm thanh. Đồng hồ thô có trễ một chút cũng không sao, vì các nốt đã được hẹn giờ sẵn trên đồng hồ chuẩn.
Cửa ải iPhone
Làm âm thanh cho web mà không nói tới iPhone thì chưa đủ. Ba cái bẫy dưới đây đều đã xảy ra thật và đều có dấu vết trong mã:
Phải có cú chạm “hợp lệ”
Mọi trình duyệt đều cấm trang web tự phát tiếng khi người dùng chưa làm gì — để không ai bị giật mình vì một trang quảng cáo la hét. Âm thanh chỉ được “mở khoá” bởi một thao tác của người dùng. Nhưng Safari khắt khe hơn: khoảnh khắc ngón tay vừa đặt xuống màn hình không được tính, phải đợi tới lúc nhấc tay lên (hoặc một cú bấm hoàn chỉnh, hoặc một phím). Ứng dụng nào mở khoá âm thanh ở lúc chạm xuống sẽ câm trên iPhone mà chạy bình thường trên Android. Lõi âm thanh của AppGiaiTri vì vậy lắng nghe cả ba loại thao tác trên toàn trang, kể cả các nút của menu.
Nút gạt im lặng
Mặc định, iPhone coi âm thanh web như tiếng chuông báo: gạt nút im lặng là câm hết, kể cả khi người dùng đang đeo tai nghe và muốn nghe. Có hai lớp xử lý: khai báo với trình duyệt rằng đây là âm thanh kiểu “phát nhạc” (trên các bản Safari có hỗ trợ), và với bản cũ hơn thì phát liên tục một đoạn âm thanh im lặng qua trình phát thông thường để đẩy cả trang sang kênh nhạc. Đoạn im lặng đó được nhúng thẳng vào mã, không phải tải.
Chuyển ứng dụng thì phải im
Khi người dùng vuốt sang ứng dụng khác, bộ âm thanh được tạm dừng; quay lại thì chạy tiếp. Nghe hiển nhiên, nhưng thiếu dòng này thì tiếng động cơ vẫn rền trong túi quần khi người dùng đang nghe điện thoại.
Những gì không nên làm
- Không tạo bộ âm thanh mới cho mỗi tiếng động. Mỗi bộ âm thanh chiếm tài nguyên riêng và trình duyệt có giới hạn; tạo mới liên tục thì sớm muộn cũng câm. Cả ứng dụng dùng chung một bộ, mỗi tiếng động chỉ là vài khối mới cắm vào rồi tự huỷ khi xong.
- Không để âm lượng về đúng số không bằng phép trượt kiểu nhân. Phép trượt kiểu nhân (nghe tự nhiên nhất cho tiếng tắt dần) không đi tới số không được; phải dừng ở một giá trị rất nhỏ rồi mới tắt hẳn.
- Không gộp nhạc và hiệu ứng vào cùng một cần âm lượng. Người dùng hay muốn tắt nhạc nhưng giữ tiếng động. Hai đường riêng, hai thanh trượt riêng trong cài đặt.
Câu hỏi thường gặp
Vì sao ứng dụng web trên iPhone không có tiếng?
Thường vì âm thanh chưa được mở khoá bằng một cú chạm, hoặc vì nút gạt im lặng đang bật. Hãy chạm một lần vào màn hình rồi thử lại, và kiểm tra nút gạt bên hông máy. Ứng dụng làm kỹ sẽ tự xử lý cả hai trường hợp.
Âm thanh tạo bằng mã có tốn pin hơn tệp ghi âm không?
Không đáng kể. Vài bộ tạo dao động và bộ lọc là phép tính rất nhẹ so với việc vẽ hình mỗi khung. Phần tốn pin nhất của ứng dụng giải trí vẫn là màn hình và card đồ hoạ.
Web Audio là gì?
Web Audio là bộ công cụ âm thanh có sẵn trong trình duyệt, cho phép trang web tạo, lọc và trộn âm thanh ngay trên máy với độ trễ thấp. Nó hoạt động giống một bàn trộn nhỏ, trong đó các khối âm thanh được nối với nhau.
Có tắt nhạc nền mà vẫn giữ tiếng hiệu ứng được không?
Được. Trong phần cài đặt của các ứng dụng AppGiaiTri, nhạc nền và âm thanh hiệu ứng có hai thanh âm lượng riêng. Kéo nhạc về không thì vẫn nghe tiếng bóng, tiếng động cơ như thường.
Chuyển sang ứng dụng khác thì âm thanh có tự tắt không?
Có. Khi trang bị ẩn, bộ âm thanh được tạm dừng hoàn toàn và chạy tiếp khi bạn quay lại. Không có tiếng nào phát ra trong lúc bạn nghe điện thoại hay dùng ứng dụng khác.
Tiếng động cơ trong ứng dụng đua xe web được làm thế nào?
Thường là hai bộ tạo dao động chạy liên tục qua một bộ lọc cắt âm cao, cao độ được kéo lên xuống theo tốc độ xe mỗi khung hình. Đổi dải cao độ và độ mở của bộ lọc là ra tiếng ô tô, xe máy hay cano khác nhau.
