11/08/2018, 19:54

Giới thiệu về web audio api trên html5 (phần 1)

Web audio api là là javascript API dành cho xử lý (processing) và tái tạo(synthesizing) âm thanh. Mới được ra đời vào thời gian gần đây (first draft vào 2011/05/12), mặc dù chưa được sử dụng nhiều ( do phần nhiều là chưa được support rộng rãi, tình trạng support các bạn có thể xem ở đây ), nhưng cá ...

Web audio api là là javascript API dành cho xử lý (processing) và tái tạo(synthesizing) âm thanh. Mới được ra đời vào thời gian gần đây (first draft vào 2011/05/12), mặc dù chưa được sử dụng nhiều ( do phần nhiều là chưa được support rộng rãi, tình trạng support các bạn có thể xem ở đây ), nhưng cá nhân mình thấy web audio api có tiềm năng ứng dụng không nhỏ, nằm ở các lý do dưới đây:

  • Web audio cung cấp api ở tầng cao, giúp cho việc xử lý âm thanh trở nên dễ dàng hơn rất nhiều, đặc biệt bạn không phải quan tâm nhiều đến những công đoạn như xử lý binary data, phân tích FFT, encode/decode, input/output.
  • Engine để xử lý âm thanh của web audio api chạy trên một thread riêng biệt, chính vì thế một số xử lý nặng như convolve, filter sẽ không làm ảnh hưởng đến GUI thread, chính vì vậy bạn sẽ đỡ phải quan tâm nhiều đến việc phải xử lý thế nào cho nhẹ, hay cho không block UI.
  • Việc xử lý âm thanh (đặc biệt là play vào thời điểm nào- timing control) là rất quan trọng với việc làm game. Xu hướng làm rich game trên browser ngày càng phát triển, khiến cho việc sử dụng và phát triên web audio api là không thể tránh khỏi.

Để tìm hiểu và sử dụng web audio api thì bài viết này mình sẽ chia làm 2 ý, đầu tiên là kiến thức cơ bản về xử lý âm thanh, và thứ hai là web audio cung cấp những gì, và sử dụng nó ra sao.

Cơ bản về xử lý âm thanh

Bài viết này sẽ không đi quá sâu về xử lý âm thanh, mình sẽ đi qua một số khái niệm cơ bản để giúp cho việc sử dụng web audio api dễ dàng hơn. Đầu tiên các bạn nên tham khảo trước ở một số tài liệu cơ bản về digital audio processing. Mình có google thì nó ra một cái tài liệu khá dễ hiểu ở đây. Sau khi đọc tài liệu trên thì mình mong muốn các bạn nắm rõ được các khái niệm

  1. Khái niệm âm thanh là gì và được biểu diễn thế nào trên máy tính? Âm thanh là các dao động cơ học được truyền trong không khí, va đập vào màng nhĩ , làm rung màng nhĩ và kích thích não người. Trên máy tính ở dạng raw thì âm thanh thường được biểu diễn dưới dạng đồ thị dạng time-series data, tức là có 1 trục là thời gian , và một trục là độ lớn (amplitude)

alt text

Để biểu diễn được trên máy tính thì sẽ cần làm 2 việc, 1 là sampling (tức là một khoảng thời gian bao nhiêu lại lấy dữ liệu một lần) và 2 là quantitize , tức là với sóng có biên độ là X thì bạn phải biểu diễn X dưới dạng bit để máy tính có thể hiểu được. Như hình vẽ dưới đây thì data được sampling với thời gian là 0.1s và được sử dụng 8bit để quantitize.

alt text

  1. Khái niệm về tần số (frequency) và biến đổi Fourier(Fourier transform). Khái niệm về tần số các bạn có thể tìm hiểu thông qua google. Về Fourier transform, hay viết tắt là FT, thì FT giúp biên dữ liệu time series data nói chung ( ở đây là sound wave ) từ dạng ban đầu là trục độ lớn(x)/trục thời gian(y) trở thành trục độ lớn(x)/trục tần số(y). Việc biến đổi này có ích ở việc là giúp phân tích thành phần của sound wave, giúp cho ta biết trong data đó có những sóng có tần số thế nào, độ lớn ra sao. Điều này sẽ giúp cho việc nhận diện/ biểu diễn sound wave được thực hiện một cách dễ dàng hơn rất nhiều.

alt text

Nắm được các khái niệm trên một cách rõ ràng, chúng ta đã có thể sử dụng web audio api để làm một số việc từ đơn giản đến tương đối phức tạp rồi :).

Cấu trúc cơ bản của web audio api

Web audio api có thiết kế dưới dạng graph, được cấu thành bởi các node ( kiến trúc này còn được gọi là modular routing ). Mỗi node có thể có nhiều inputs và/hoặc nhiều outputs.

alt text

Tại sao lại là dưới dạng graph? Vì audio processing thường qua nhiều công đoạn, mỗi công đoạn xử lý lại có thể có nhiều output ( giống như hình trên ), do đó mà việc biểu diễn dưới dạng graph và connection giữa các node giúp cho việc tách các xử lý ra/ tổng hợp kết quả xử lý lại được thực hiện một cách dễ dàng và clean hơn.

Load audio file một cách đơn giản

Chúng ta sẽ bắt đầu sử dụng web audio api bằng cách load và play một file audio đơn giản:

context = new webkitAudioContext();
sourceNode = context.createBufferSource();
sourceNode.connect(context.destination);

function loadSound(source) {
  var req = new XMLHttpRequest();
    req.open('GET', source, true);
    req.responseType = 'arraybuffer';

    req.onload = function() {
      context.decodeAudioData(req.response, function(buffer){
        playSound(buffer);
      }, function(){});
    }
    req.send();
}

function playSound( buffer ) {
  sourceNode.buffer = buffer;
  sourceNode.noteOn(0);
}

Các bạn sẽ thấy để thao tác với web audio api thì đầu tiên các bạn sẽ phải tạo ra một object gọi là AudioContext ( trên chrome sẽ gọi là WebkitAudioContext ). Toàn bộ các thao tác như tạo node mới sẽ quay quanh object này

Sau khi đã có context rồi thì các bước tiếp theo sẽ là :

  1. Tạo ra sourceNode (sourceNode còn là Node dùng để input data)
  2. Tạo ra destinationNode (là Node dùng để output data)
  3. Load data thông qua XHR
  4. play thông qua hàm noteOn của sourceNode (noteOn(0) tức là play tại thời điểm 0 là thời điểm bắt đầu của audio data)

Các bạn có thể thấy ở trên một graph đơn giản nhất đã được tạo ra với 2 node là Source và Destination được connect với nhau.

Kết luận

Như vậy các bạn đã có hình dung cơ bản về web audio api.

Ở bài viết tiếp theo mình sẽ nói về các node xử lý cơ bản như AnalyzerNode, ConvolverNode, OscillatorNode và các ứng dụng của chúng.

Các bạn có thể xem bài trình bày của mình tại osaka htmlday (bài viết bằng tiếng Nhật :D):

Bài liên quan

Tự học kiểm thử tự động với Appium- Giới thiệu Appium và hướng dẫn cài đặt (Phần 1)

Kiểm thử tự động là một khái niệm khá quen thuộc trong kiểm thử phần mềm, nhưng để nắm bắt và update những công cụ kiểm thử tự động là một điều không hề đơn giản. Đặc biệt là những bạn ngại ngần về code. Và mình cũng không phải ngoại lệ =)). Kiểm thử tự động không quá khó như mọi người nghĩ, chỉ ...

Trịnh Tiến Mạnh viết 23:18 ngày 20/10/2018

Giới thiệu AR Quick Look trong iOS 12 (phần 1)

Ở WWDC 2018, Apple đã đưa ra phiên bản ARKit 2.0 với một tá các API và đặc tính mới việc phát triển AR(Augmented Reality). Một trong những đặc tính đó là một sự bổ sung cho API của Quick Look. Nếu bạn chưa biết Quick Look là gì, thì nó là một framework cho phép người sử dụng xem được rất nhiều định ...

Trịnh Tiến Mạnh viết 10:03 ngày 07/09/2018

10 ví dụ về animation thú vị trên Codepen (phần 1)

Hiện nay, các trình duyệt trên mobile đã mạnh mẽ và tuyệt vời hơn rất nhiều khi có những hình ảnh vô cùng sống động. Với việc sử dụng CSS3, chúng ta có thể tạo ra những tác phẩm, những chuyển động vô cùng thú vị mà không cần bất kỳ hình ảnh nào. Rõ ràng, điều đó đã hỗ trợ rất nhiều trong việc load ...

Hoàng Hải Đăng viết 18:23 ngày 12/08/2018

Giới thiệu về Web App Manifest

Giới thiệu Web App Manifest là một file JSON (manifest.json), file này giúp trình duyệt đọc được nội dung Web App của chúng ta. Mình hiểu nôm nay là tệp kê khai. Một tệp kê khai (manifest) bao gồm những nội dung chính như name, icons, start_url, v.v. Tạo manifest Tạo một tệp kê khai ...

Bùi Văn Nam viết 18:01 ngày 12/08/2018

Giới thiệu về Canvas trong HTML5

HTML5 Canvas là gì? Khái quát về Canvas trong HTML5 Khi làm việc về web, các thẻ HTML ta không còn xa lạ nữa như: a, ul, li, div, span... Với HTML5 chúng sẽ làm làm quen với với 1 thẻ mới đó là Canvas, thẻ này trên HTML thì không khác so với các thẻ khác nhưng khác chủ yếu ở phần Javascript . ...

Trịnh Tiến Mạnh viết 13:43 ngày 12/08/2018
0